Make the theme colors use CSS custom properties.
This commit is contained in:
parent
38bca9721a
commit
abb09bc671
|
@ -69,6 +69,7 @@
|
|||
"confirm",
|
||||
"document",
|
||||
"FileReader",
|
||||
"getComputedStyle",
|
||||
"performance",
|
||||
"window"
|
||||
],
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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'
|
||||
};
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue