From abb09bc671edba754b4f5a046834f8ef2959d7d6 Mon Sep 17 00:00:00 2001 From: Bauke Date: Sat, 3 Oct 2020 13:20:12 +0200 Subject: [PATCH] Make the theme colors use CSS custom properties. --- package.json | 1 + source/ts/import-export.ts | 5 +- source/ts/scripts/user-labels.ts | 40 ++++--- source/ts/scripts/user-labels/handlers.ts | 10 +- source/ts/scripts/user-labels/label-form.ts | 10 +- source/ts/theme-colors.ts | 122 ++------------------ source/ts/utilities.ts | 28 +---- 7 files changed, 48 insertions(+), 168 deletions(-) diff --git a/package.json b/package.json index 4a47c11..9baf5fa 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "confirm", "document", "FileReader", + "getComputedStyle", "performance", "window" ], diff --git a/source/ts/import-export.ts b/source/ts/import-export.ts index c0f4766..e41fd53 100644 --- a/source/ts/import-export.ts +++ b/source/ts/import-export.ts @@ -9,7 +9,6 @@ import { isValidHexColor, setSettings } from './utilities'; -import {themeColors} from './theme-colors'; export async function importSettingsHandler(event: MouseEvent): Promise { event.preventDefault(); @@ -53,9 +52,7 @@ export async function importFileHandler(event: Event): Promise { } 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, diff --git a/source/ts/scripts/user-labels.ts b/source/ts/scripts/user-labels.ts index 2aec09e..bcd996a 100644 --- a/source/ts/scripts/user-labels.ts +++ b/source/ts/scripts/user-labels.ts @@ -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 => { 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( - `` + `` ); } } @@ -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'); diff --git a/source/ts/scripts/user-labels/handlers.ts b/source/ts/scripts/user-labels/handlers.ts index 08612f1..e3a1068 100644 --- a/source/ts/scripts/user-labels/handlers.ts +++ b/source/ts/scripts/user-labels/handlers.ts @@ -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(); diff --git a/source/ts/scripts/user-labels/label-form.ts b/source/ts/scripts/user-labels/label-form.ts index dee0610..36d3c58 100644 --- a/source/ts/scripts/user-labels/label-form.ts +++ b/source/ts/scripts/user-labels/label-form.ts @@ -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'); diff --git a/source/ts/theme-colors.ts b/source/ts/theme-colors.ts index ddd0388..1c8449e 100644 --- a/source/ts/theme-colors.ts +++ b/source/ts/theme-colors.ts @@ -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' }; diff --git a/source/ts/utilities.ts b/source/ts/utilities.ts index dc009ec..91f5257 100644 --- a/source/ts/utilities.ts +++ b/source/ts/utilities.ts @@ -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.