tildes-community/tildes-reextended
tildes-community
/
tildes-reextended
1
Fork 0
Code

Make the theme colors use CSS custom properties.

This commit is contained in:
Bauke 2020-10-03 13:20:12 +02:00
parent 38bca9721a
commit abb09bc671
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
7 changed files with 48 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -69,6 +69,7 @@
"confirm",
"document",
"FileReader",
"getComputedStyle",
"performance",
"window"
],

5
source/ts/import-export.ts
View File

@ -9,7 +9,6 @@ import {
isValidHexColor,
setSettings
} from './utilities';
import {themeColors} from './theme-colors';
export async function importSettingsHandler(event: MouseEvent): Promise<void> {
event.preventDefault();
@ -53,9 +52,7 @@ export async function importFileHandler(event: Event): Promise<void> {
}
newSettings.data.userLabels.push({
color: isValidHexColor(label.color)
? label.color
: themeColors.white.backgroundAlt,
color: isValidHexColor(label.color) ? label.color : '#f0f',
id: newSettings.data.userLabels.length + 1,
priority: Number.isNaN(label.priority) ? 0 : label.priority,
text: typeof label.text === 'undefined' ? 'Label' : label.text,

40
source/ts/scripts/user-labels.ts
View File

@ -1,6 +1,6 @@
import {Except} from 'type-fest';
import debounce from 'debounce';
import {ColorKey, ThemeKey, themeColors} from '../theme-colors';
import {ColorKey, themeColors} from '../theme-colors';
import {
getSettings,
Settings,
@ -8,7 +8,7 @@ import {
createElementFromString,
UserLabel,
isInTopicListing,
getCurrentThemeKey,
getCSSCustomPropertyValue,
isColorBright,
setSettings,
appendStyleAttribute,
@ -28,16 +28,12 @@ import {
labelColorInputHandler
} from './user-labels/handlers';
let theme: typeof themeColors[ThemeKey];
(async (): Promise<void> => {
const settings: Settings = await getSettings();
if (!settings.features.userLabels) {
return;
}
const themeKey: ThemeKey = getCurrentThemeKey();
theme = themeColors[themeKey];
addLabelsToUsernames(settings);
const existingLabelForm: HTMLElement | null = document.querySelector(
'#trx-user-label-form'
@ -47,10 +43,13 @@ let theme: typeof themeColors[ThemeKey];
}
const themeSelectOptions: string[] = [];
for (const color in theme) {
if (Object.hasOwnProperty.call(theme, color)) {
for (const color in themeColors) {
if (Object.hasOwnProperty.call(themeColors, color)) {
const colorValue = getCSSCustomPropertyValue(
themeColors[color as ColorKey]
);
themeSelectOptions.push(
`<option value="${theme[color as ColorKey]}">${color}</option>`
`<option value="${colorValue}">${color}</option>`
);
}
}
@ -88,7 +87,8 @@ let theme: typeof themeColors[ThemeKey];
document.body.append(labelForm);
labelForm.setAttribute(
'style',
`background-color: ${theme.background}; border-color: ${theme.foregroundAlt};`
`background-color: var(${themeColors.backgroundPrimary});` +
`border-color: var(${themeColors.foregroundSecondary});`
);
const labelColorInput: HTMLInputElement = querySelector(
@ -103,7 +103,9 @@ let theme: typeof themeColors[ThemeKey];
'#trx-user-label-form-color > select'
);
presetColorSelect.addEventListener('change', presetColorSelectHandler);
presetColorSelect.value = theme.backgroundAlt;
presetColorSelect.value = getCSSCustomPropertyValue(
themeColors.backgroundSecondary
);
const labelTextInput: HTMLInputElement = querySelector(
'#trx-user-label-input > input'
@ -113,8 +115,8 @@ let theme: typeof themeColors[ThemeKey];
const labelPreview: HTMLDivElement = querySelector('#trx-user-label-preview');
labelPreview.setAttribute(
'style',
`background-color: ${theme.background};` +
`border-color: ${theme.foregroundAlt};`
`background-color: var(${themeColors.backgroundPrimary});` +
`border-color: var(${themeColors.foregroundSecondary});`
);
const formSaveButton: HTMLAnchorElement = querySelector(
@ -201,7 +203,10 @@ function addLabelsToUsernames(settings: Settings): void {
);
if (!isInTopicListing()) {
element.insertAdjacentElement('afterend', addLabelSpan);
appendStyleAttribute(addLabelSpan, `color: ${theme.foreground};`);
appendStyleAttribute(
addLabelSpan,
`color: var(${themeColors.foregroundPrimary});`
);
}
const userLabels: UserLabel[] = settings.data.userLabels.filter(
@ -214,7 +219,10 @@ function addLabelsToUsernames(settings: Settings): void {
!element.nextElementSibling.className.includes('trx-user-label'))
) {
element.insertAdjacentElement('afterend', addLabelSpan);
appendStyleAttribute(addLabelSpan, `color: ${theme.foreground};`);
appendStyleAttribute(
addLabelSpan,
`color: var(${themeColors.foregroundPrimary});`
);
}
continue;
@ -248,7 +256,7 @@ function addLabelsToUsernames(settings: Settings): void {
'style',
`background-color: ${userLabel.color};`
);
if (isColorBright(userLabel.color)) {
if (isColorBright(userLabel.color.trim())) {
userLabelSpan.classList.add('trx-bright');
} else {
userLabelSpan.classList.remove('trx-bright');

10
source/ts/scripts/user-labels/handlers.ts
View File

@ -2,11 +2,11 @@ import {
log,
isValidHexColor,
UserLabel,
getCurrentThemeKey,
querySelector
querySelector,
getCSSCustomPropertyValue
} from '../../utilities';
import {findLabelByID} from '../user-labels';
import {themeColors, ThemeKey} from '../../theme-colors';
import {themeColors} from '../../theme-colors';
import {
getLabelForm,
setLabelFormColor,
@ -19,8 +19,6 @@ import {
updatePreview
} from './label-form';
const theme: typeof themeColors[ThemeKey] = themeColors[getCurrentThemeKey()];
export function addLabelHandler(
event: MouseEvent,
element: HTMLSpanElement
@ -30,7 +28,7 @@ export function addLabelHandler(
setLabelFormTitle('Add New Label');
setLabelFormUsername(element.getAttribute('data-trx-username')!);
setLabelFormPriority(0);
setLabelFormColor(theme.backgroundAlt);
setLabelFormColor(getCSSCustomPropertyValue(themeColors.backgroundSecondary));
setLabelFormText('');
showLabelForm(element);
updatePreview();

10
source/ts/scripts/user-labels/label-form.ts
View File

@ -4,13 +4,10 @@ import {
UserLabel,
log,
isColorBright,
getCurrentThemeKey,
querySelector,
isValidTildesUsername
} from '../../utilities';
import {themeColors, ThemeKey} from '../../theme-colors';
const theme: typeof themeColors[ThemeKey] = themeColors[getCurrentThemeKey()];
import {themeColors} from '../../theme-colors';
export function getLabelForm(): HTMLFormElement {
return querySelector('#trx-user-label-form');
@ -134,11 +131,12 @@ export function updatePreview(color?: string, text?: string): void {
const labelPreview: HTMLDivElement = querySelector('#trx-user-label-preview');
labelPreview.setAttribute(
'style',
`background-color: ${color}; border-color: ${theme.foregroundAlt};`
`background-color: ${color}; ` +
`border-color: var(${themeColors.foregroundSecondary});`
);
labelPreview.firstElementChild!.textContent = text;
if (isColorBright(color)) {
if (isColorBright(color.trim())) {
labelPreview.classList.add('trx-bright');
} else {
labelPreview.classList.remove('trx-bright');

122
source/ts/theme-colors.ts
View File

@ -1,113 +1,15 @@
export type ThemeKey = keyof typeof themeColors;
export type ColorKey = keyof typeof themeColors[ThemeKey];
export type ColorKey = keyof typeof themeColors;
export const themeColors = {
atomOneDark: {
background: '#282C34',
backgroundAlt: '#21242b',
foreground: '#ABB2BF',
foregroundAlt: '#828997',
cyan: '#56B6C2',
blue: '#61AFEF',
purple: '#C678DD',
green: '#98C379',
red: '#E06C75',
orange: '#D19A66'
},
black: {
background: '#000',
backgroundAlt: '#222',
foreground: '#ccc',
foregroundAlt: '#888',
cyan: '#2aa198',
blue: '#268bd2',
purple: '#6c71c4',
green: '#859900',
red: '#f00',
orange: '#b58900'
},
dracula: {
background: '#282a36',
backgroundAlt: '#44475a',
foreground: '#f8f8f2',
foregroundAlt: '#6272a4',
cyan: '#8be9fd',
blue: '#6272a4',
purple: '#bd93f9',
green: '#50fa7b',
red: '#ff5555',
orange: '#ffb86c'
},
gruvboxDark: {
background: '#282828',
backgroundAlt: '#3c3836',
foreground: '#fbf1c7',
foregroundAlt: '#ebdbb2',
cyan: '#689d6a',
blue: '#458588',
purple: '#b16286',
green: '#98971a',
red: '#fb4934',
orange: '#fabd2f'
},
gruvboxLight: {
background: '#fbf1c7',
backgroundAlt: '#ebdbb2',
foreground: '#282828',
foregroundAlt: '#3c3836',
cyan: '#689d6a',
blue: '#458588',
purple: '#b16286',
green: '#98971a',
red: '#fb4934',
orange: '#fabd2f'
},
solarizedLight: {
background: '#fdf6e3',
backgroundAlt: '#eee8d5',
foreground: '#657b83',
foregroundAlt: '#93a1a1',
cyan: '#2aa198',
blue: '#268bd2',
purple: '#6c71c4',
green: '#859900',
red: '#dc322f',
orange: '#cb4b16'
},
solarizedDark: {
background: '#002b36',
backgroundAlt: '#073642',
foreground: '#839496',
foregroundAlt: '#586e75',
cyan: '#2aa198',
blue: '#268bd2',
purple: '#6c71c4',
green: '#859900',
red: '#dc322f',
orange: '#cb4b16'
},
white: {
background: '#fff',
backgroundAlt: '#eee',
foreground: '#333',
foregroundAlt: '#888',
cyan: '#1e824c',
blue: '#1460aa',
purple: '#551a8b',
green: '#4b6319',
red: '#d91e18',
orange: '#e66b00'
},
zenburn: {
background: '#3f3f3f',
backgroundAlt: '#4f4f4f',
foreground: '#dcdccc',
foregroundAlt: '#aaa',
cyan: '#8cd0d3',
blue: '#80d4aa',
purple: '#bc8cbc',
green: '#7f9f7f',
red: '#dc8c6c',
orange: '#efef8f'
}
backgroundPrimary: '--background-primary-color',
backgroundSecondary: '--background-secondary-color',
foregroundPrimary: '--foreground-primary-color',
foregroundSecondary: '--foreground-secondary-color',
exemplary: '--comment-label-exemplary-color',
offtopic: '--comment-label-offtopic-color',
joke: '--comment-label-joke-color',
noise: '--comment-label-noise-color',
malice: '--comment-label-malice-color',
mine: '--stripe-mine-color',
official: '--alert-color'
};

28
source/ts/utilities.ts
View File

@ -1,5 +1,4 @@
import {browser, Manifest} from 'webextension-polyfill-ts';
import {themeColors, ThemeKey} from './theme-colors';
export interface UserLabel {
color: string;
@ -171,31 +170,8 @@ export function getManifest(): {nodeEnv?: string} & Manifest.ManifestBase {
return {...manifest};
}
export function getCurrentThemeKey(): ThemeKey {
const body: HTMLBodyElement = querySelector('body');
const classes: string | null = body.getAttribute('class');
if (classes === null || !classes.includes('theme-')) {
return 'white';
}
const themeIndex: number = classes.indexOf('theme-');
const themeKey: ThemeKey = kebabToCamel(
classes.slice(
themeIndex + 'theme-'.length,
classes.includes(' ', themeIndex)
? classes.indexOf(' ', themeIndex)
: classes.length
)
) as ThemeKey;
if (typeof themeColors[themeKey] === 'undefined') {
log(
`Attempted to retrieve theme key that's not defined: "${themeKey}" Using the white theme as fallback.`,
true
);
return 'white';
}
return themeKey;
export function getCSSCustomPropertyValue(property: string): string {
return getComputedStyle(document.body).getPropertyValue(property);
}
// Adapted from https://stackoverflow.com/a/12043228/12251171.