From bac138d004263cb5352d6676d7a2947caa119d74 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih Date: Sun, 9 Apr 2023 19:10:10 +0900 Subject: [PATCH] (remove) embed theme.ts --- packages/frontend/src/embed/init.ts | 2 +- packages/frontend/src/embed/scripts/theme.ts | 139 ------------------- 2 files changed, 1 insertion(+), 140 deletions(-) delete mode 100644 packages/frontend/src/embed/scripts/theme.ts diff --git a/packages/frontend/src/embed/init.ts b/packages/frontend/src/embed/init.ts index f054673a7e..aeba2f63bf 100644 --- a/packages/frontend/src/embed/init.ts +++ b/packages/frontend/src/embed/init.ts @@ -11,7 +11,7 @@ import 'iframe-resizer/js/iframeResizer.contentWindow'; import { parseMfm } from './scripts/parse-mfm'; import { renderNotFound } from './scripts/render-not-found'; import { parseEmoji } from './scripts/parse-emoji'; -import { applyTheme } from './scripts/theme'; +import { applyTheme } from '@/scripts/theme'; import lightTheme from '@/themes/_light.json5'; import darkTheme from '@/themes/_dark.json5'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; diff --git a/packages/frontend/src/embed/scripts/theme.ts b/packages/frontend/src/embed/scripts/theme.ts deleted file mode 100644 index 3adac761af..0000000000 --- a/packages/frontend/src/embed/scripts/theme.ts +++ /dev/null @@ -1,139 +0,0 @@ -import tinycolor from 'tinycolor2'; - -export type Theme = { - id: string; - name: string; - author: string; - desc?: string; - base?: 'dark' | 'light'; - props: Record; -}; - -import lightTheme from '@/themes/_light.json5'; -import darkTheme from '@/themes/_dark.json5'; -import { deepClone } from '@/scripts/clone'; -import { miLocalStorage } from '@/local-storage'; - -export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X')); - -export const getBuiltinThemes = () => Promise.all( - [ - 'l-light', - 'l-coffee', - 'l-apricot', - 'l-rainy', - 'l-botanical', - 'l-vivid', - 'l-cherry', - 'l-sushi', - 'l-u0', - - 'd-dark', - 'd-persimmon', - 'd-astro', - 'd-future', - 'd-botanical', - 'd-green-lime', - 'd-green-orange', - 'd-cherry', - 'd-ice', - 'd-u0', - ].map(name => import(`../../themes/${name}.json5`).then(({ default: _default }): Theme => _default)), -); - -let timeout = null; - -export function applyTheme(theme: Theme, persist = true) { - if (timeout) window.clearTimeout(timeout); - - document.documentElement.classList.add('_themeChanging_'); - - timeout = window.setTimeout(() => { - document.documentElement.classList.remove('_themeChanging_'); - }, 1000); - - const colorSchema = theme.base === 'dark' ? 'dark' : 'light'; - - // Deep copy - const _theme = deepClone(theme); - - if (_theme.base) { - const base = [lightTheme, darkTheme].find(x => x.id === _theme.base); - if (base) _theme.props = Object.assign({}, base.props, _theme.props); - } - - const props = compile(_theme); - - for (const tag of document.head.children) { - if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') { - tag.setAttribute('content', props['htmlThemeColor']); - break; - } - } - - for (const [k, v] of Object.entries(props)) { - document.documentElement.style.setProperty(`--${k}`, v.toString()); - } - - document.documentElement.style.setProperty('color-schema', colorSchema); - - if (persist) { - miLocalStorage.setItem('theme', JSON.stringify(props)); - miLocalStorage.setItem('colorSchema', colorSchema); - } -} - -function compile(theme: Theme): Record { - function getColor(val: string): tinycolor.Instance { - // ref (prop) - if (val[0] === '@') { - return getColor(theme.props[val.substr(1)]); - } - - // ref (const) - else if (val[0] === '$') { - return getColor(theme.props[val]); - } - - // func - else if (val[0] === ':') { - const parts = val.split('<'); - const func = parts.shift().substr(1); - const arg = parseFloat(parts.shift()); - const color = getColor(parts.join('<')); - - switch (func) { - case 'darken': return color.darken(arg); - case 'lighten': return color.lighten(arg); - case 'alpha': return color.setAlpha(arg); - case 'hue': return color.spin(arg); - case 'saturate': return color.saturate(arg); - } - } - - // other case - return tinycolor(val); - } - - const props = {}; - - for (const [k, v] of Object.entries(theme.props)) { - if (k.startsWith('$')) continue; // ignore const - - props[k] = v.startsWith('"') ? v.replace(/^"\s*/, '') : genValue(getColor(v)); - } - - return props; -} - -function genValue(c: tinycolor.Instance): string { - return c.toRgbString(); -} - -export function validateTheme(theme: Record): boolean { - if (theme.id == null || typeof theme.id !== 'string') return false; - if (theme.name == null || typeof theme.name !== 'string') return false; - if (theme.base == null || !['light', 'dark'].includes(theme.base)) return false; - if (theme.props == null || typeof theme.props !== 'object') return false; - return true; -}