mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-05-14 15:45:43 +02:00
enhance(frontend): テーマの適用管理を改善 (#17376)
* wip * add test * use themeManager.currentCompiledTheme for obtaining theme variables / reduce getComputedStyle usage * fix * fix: better error handling on theme installation * Update Changelog * chore: remove frontend-shared builds as it is currently working as a stub package * fix: broken lockfile * fix * fix lint * fix
This commit is contained in:
かっこかり
GitHub
@@ -6,73 +6,183 @@
|
||||
// TODO: (可能な部分を)sharedに抽出して frontend-embed と共通化
|
||||
|
||||
import { ref, nextTick } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { EventEmitter } from 'eventemitter3';
|
||||
import lightTheme from '@@/themes/_light.json5';
|
||||
import darkTheme from '@@/themes/_dark.json5';
|
||||
import JSON5 from 'json5';
|
||||
import { version } from '@@/js/config.js';
|
||||
import type { Ref } from 'vue';
|
||||
import type { BundledTheme } from 'shiki/themes';
|
||||
import { getBuiltinThemes, parseThemeCode, themeProps, compile } from '@@/js/theme.js';
|
||||
import type { Theme, CompiledTheme } from '@@/js/theme.js';
|
||||
import { deepClone } from '@/utility/clone.js';
|
||||
import { globalEvents } from '@/events.js';
|
||||
import { miLocalStorage } from '@/local-storage.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import * as os from '@/os.js';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import { deepEqual } from '@/utility/deep-equal.js';
|
||||
|
||||
export type Theme = {
|
||||
id: string;
|
||||
name: string;
|
||||
author: string;
|
||||
desc?: string;
|
||||
base?: 'dark' | 'light';
|
||||
kind?: 'dark' | 'light'; // legacy
|
||||
props: Record<string, string>;
|
||||
codeHighlighter?: {
|
||||
base: BundledTheme;
|
||||
overrides?: Record<string, any>;
|
||||
} | {
|
||||
base: '_none_';
|
||||
overrides: Record<string, any>;
|
||||
};
|
||||
type ThemeManagerEvents = {
|
||||
'themeChanging': () => void;
|
||||
'themeChanged': () => void;
|
||||
'previewStateChanged': (isPreview: boolean) => void;
|
||||
'requestUpdateThemeCache': (theme: Theme, compiled: CompiledTheme) => void;
|
||||
};
|
||||
|
||||
export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
|
||||
class ThemeManager extends EventEmitter<ThemeManagerEvents> {
|
||||
/** 現在常用しているテーマ */
|
||||
private _theme: Theme | null = null;
|
||||
get theme() { return this._theme; }
|
||||
private _compiledTheme: CompiledTheme | null = null;
|
||||
get compiledTheme() { return this._compiledTheme; }
|
||||
|
||||
export const getBuiltinThemes = () => Promise.all(
|
||||
[
|
||||
'l-light',
|
||||
'l-coffee',
|
||||
'l-apricot',
|
||||
'l-rainy',
|
||||
'l-botanical',
|
||||
'l-vivid',
|
||||
'l-cherry',
|
||||
'l-sushi',
|
||||
'l-u0',
|
||||
/** 現在適用中のテーマ */
|
||||
private _currentTheme: Theme | null = null;
|
||||
get currentTheme() { return this._currentTheme; }
|
||||
get currentThemeId() { return this._currentTheme?.id; }
|
||||
private _currentCompiledTheme: CompiledTheme | null = null;
|
||||
get currentCompiledTheme() { return this._currentCompiledTheme; }
|
||||
|
||||
'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)),
|
||||
);
|
||||
/** プレビュー中かどうか */
|
||||
private _isPreviewMode = false;
|
||||
get isPreviewMode() { return this._isPreviewMode; }
|
||||
set isPreviewMode(value: boolean) {
|
||||
if (this._isPreviewMode !== value) {
|
||||
this._isPreviewMode = value;
|
||||
this.emit('previewStateChanged', value);
|
||||
}
|
||||
}
|
||||
|
||||
export function getBuiltinThemesRef() {
|
||||
const builtinThemes = ref<Theme[]>([]);
|
||||
getBuiltinThemes().then(themes => builtinThemes.value = themes);
|
||||
return builtinThemes;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
/** テーマを更新し、同時に適用します。 */
|
||||
public updateTheme(newTheme: Theme) {
|
||||
if (newTheme.id === this.theme?.id && version === miLocalStorage.getItem('themeCachedVersion')) return; // 変更なし
|
||||
|
||||
this.isPreviewMode = false;
|
||||
|
||||
// テーマを更新
|
||||
this._theme = deepClone(newTheme);
|
||||
const compiled = this.compile(newTheme);
|
||||
this._compiledTheme = compiled;
|
||||
|
||||
// 適用中のテーマも更新
|
||||
this._currentTheme = deepClone(this.theme);
|
||||
this._currentCompiledTheme = deepClone(compiled);
|
||||
|
||||
this.applyTheme();
|
||||
}
|
||||
|
||||
/** プレビュー用のテーマを適用します。 */
|
||||
public previewTheme(theme: Theme) {
|
||||
this.isPreviewMode = true;
|
||||
|
||||
// 適用中のテーマを更新
|
||||
this._currentTheme = deepClone(theme);
|
||||
this._currentCompiledTheme = this.compile(theme);
|
||||
|
||||
this.applyTheme();
|
||||
}
|
||||
|
||||
/** プレビュー状態を解除し、適用中のテーマを常用しているテーマに戻します。 */
|
||||
public clearPreview() {
|
||||
this.isPreviewMode = false;
|
||||
|
||||
// 適用中のテーマを常用しているテーマに戻す
|
||||
this._currentTheme = deepClone(this.theme);
|
||||
this._currentCompiledTheme = deepClone(this.compiledTheme);
|
||||
|
||||
this.applyTheme();
|
||||
}
|
||||
|
||||
/** 通常のテーマのコンパイルに加え、ベースとなるテーマの値を解決し代入します。 */
|
||||
private compile(theme: Theme) {
|
||||
const _theme = deepClone(theme);
|
||||
|
||||
if (_theme.base != null) {
|
||||
const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
|
||||
if (base) _theme.props = Object.assign({}, base.props, _theme.props);
|
||||
}
|
||||
|
||||
return compile(_theme);
|
||||
}
|
||||
|
||||
/** currentThemeを適用します。 */
|
||||
private applyTheme() {
|
||||
if (this.currentTheme == null || this.currentCompiledTheme == null) return;
|
||||
|
||||
// visibilityStateがhiddenな状態でstartViewTransitionするとブラウザによってはエラーになる
|
||||
// 通常hiddenな時に呼ばれることはないが、iOSのPWAだとアプリ切り替え時に(何故か)hiddenな状態で(何故か)一瞬デバイスのダークモード判定が変わりapplyThemeが呼ばれる場合がある
|
||||
if (window.document.startViewTransition != null && window.document.visibilityState === 'visible') {
|
||||
window.document.documentElement.classList.add('_themeChanging_');
|
||||
try {
|
||||
window.document.startViewTransition(async () => {
|
||||
this.updateAttributes();
|
||||
await nextTick();
|
||||
}).finished.then(() => {
|
||||
window.document.documentElement.classList.remove('_themeChanging_');
|
||||
this.emit('themeChanged');
|
||||
});
|
||||
} catch (err) {
|
||||
// 様々な理由により startViewTransition は失敗することがある
|
||||
// ref. https://github.com/misskey-dev/misskey/issues/16562
|
||||
|
||||
// FIXME: viewTransitonエラーはtry~catch貫通してそうな気配がする
|
||||
console.error(err);
|
||||
|
||||
window.document.documentElement.classList.remove('_themeChanging_');
|
||||
this.updateAttributes();
|
||||
this.emit('themeChanged');
|
||||
}
|
||||
} else {
|
||||
this.updateAttributes();
|
||||
this.emit('themeChanged');
|
||||
}
|
||||
|
||||
if (!this.isPreviewMode) {
|
||||
this.emit('requestUpdateThemeCache', this.currentTheme, this.currentCompiledTheme);
|
||||
}
|
||||
}
|
||||
|
||||
private updateAttributes() {
|
||||
if (!this.currentTheme || !this.currentCompiledTheme) return;
|
||||
|
||||
const colorScheme = this.currentTheme.base === 'dark' ? 'dark' : 'light';
|
||||
window.document.documentElement.dataset.colorScheme = colorScheme;
|
||||
|
||||
for (const tag of window.document.head.children) {
|
||||
if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
|
||||
tag.setAttribute('content', this.currentCompiledTheme['htmlThemeColor']);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
for (const key of themeProps) {
|
||||
const value = this.currentCompiledTheme[key];
|
||||
if (value) {
|
||||
window.document.documentElement.style.setProperty(`--MI_THEME-${key}`, value.toString());
|
||||
} else {
|
||||
window.document.documentElement.style.removeProperty(`--MI_THEME-${key}`);
|
||||
}
|
||||
}
|
||||
|
||||
window.document.documentElement.style.setProperty('color-scheme', colorScheme);
|
||||
|
||||
this.emit('themeChanging');
|
||||
}
|
||||
}
|
||||
|
||||
export function getThemesRef(): Ref<Theme[]> {
|
||||
return prefer.r.themes;
|
||||
}
|
||||
export const themeManager = new ThemeManager();
|
||||
export const isPreviewMode = ref(false);
|
||||
|
||||
themeManager.on('requestUpdateThemeCache', (theme, props) => {
|
||||
miLocalStorage.setItem('theme', JSON.stringify(props));
|
||||
miLocalStorage.setItem('themeId', theme.id);
|
||||
miLocalStorage.setItem('themeCachedVersion', version);
|
||||
});
|
||||
|
||||
themeManager.on('previewStateChanged', (preview) => {
|
||||
isPreviewMode.value = preview;
|
||||
});
|
||||
|
||||
export async function addTheme(theme: Theme): Promise<void> {
|
||||
if ($i == null) return;
|
||||
@@ -93,163 +203,6 @@ export async function removeTheme(theme: Theme): Promise<void> {
|
||||
prefer.commit('themes', themes);
|
||||
}
|
||||
|
||||
function applyThemeInternal(theme: Theme, persist: boolean) {
|
||||
const colorScheme = theme.base === 'dark' ? 'dark' : 'light';
|
||||
|
||||
window.document.documentElement.dataset.colorScheme = colorScheme;
|
||||
|
||||
// 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 window.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)) {
|
||||
window.document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
|
||||
}
|
||||
|
||||
window.document.documentElement.style.setProperty('color-scheme', colorScheme);
|
||||
|
||||
if (persist) {
|
||||
miLocalStorage.setItem('theme', JSON.stringify(props));
|
||||
miLocalStorage.setItem('themeId', theme.id);
|
||||
miLocalStorage.setItem('themeCachedVersion', version);
|
||||
miLocalStorage.setItem('colorScheme', colorScheme);
|
||||
}
|
||||
|
||||
// 色計算など再度行えるようにクライアント全体に通知
|
||||
globalEvents.emit('themeChanging');
|
||||
}
|
||||
|
||||
let timeout: number | null = null;
|
||||
let currentThemeId = miLocalStorage.getItem('themeId');
|
||||
|
||||
export function applyTheme(theme: Theme, persist = true) {
|
||||
if (timeout) {
|
||||
window.clearTimeout(timeout);
|
||||
timeout = null;
|
||||
}
|
||||
|
||||
if (theme.id === currentThemeId && miLocalStorage.getItem('themeCachedVersion') === version) return;
|
||||
currentThemeId = theme.id;
|
||||
|
||||
// visibilityStateがhiddenな状態でstartViewTransitionするとブラウザによってはエラーになる
|
||||
// 通常hiddenな時に呼ばれることはないが、iOSのPWAだとアプリ切り替え時に(何故か)hiddenな状態で(何故か)一瞬デバイスのダークモード判定が変わりapplyThemeが呼ばれる場合がある
|
||||
if (window.document.startViewTransition != null && window.document.visibilityState === 'visible') {
|
||||
window.document.documentElement.classList.add('_themeChanging_');
|
||||
try {
|
||||
window.document.startViewTransition(async () => {
|
||||
applyThemeInternal(theme, persist);
|
||||
await nextTick();
|
||||
}).finished.then(() => {
|
||||
window.document.documentElement.classList.remove('_themeChanging_');
|
||||
globalEvents.emit('themeChanged');
|
||||
});
|
||||
} catch (err) {
|
||||
// 様々な理由により startViewTransition は失敗することがある
|
||||
// ref. https://github.com/misskey-dev/misskey/issues/16562
|
||||
|
||||
// FIXME: viewTransitonエラーはtry~catch貫通してそうな気配がする
|
||||
|
||||
console.error(err);
|
||||
|
||||
window.document.documentElement.classList.remove('_themeChanging_');
|
||||
applyThemeInternal(theme, persist);
|
||||
globalEvents.emit('themeChanged');
|
||||
}
|
||||
} else {
|
||||
applyThemeInternal(theme, persist);
|
||||
globalEvents.emit('themeChanged');
|
||||
}
|
||||
}
|
||||
|
||||
export function compile(theme: Theme): Record<string, string> {
|
||||
function getColor(val: string): tinycolor.Instance {
|
||||
if (val[0] === '@') { // ref (prop)
|
||||
return getColor(theme.props[val.substring(1)]);
|
||||
} else if (val[0] === '$') { // ref (const)
|
||||
return getColor(theme.props[val]);
|
||||
} else if (val[0] === ':') { // func
|
||||
const parts = val.split('<');
|
||||
const funcTxt = parts.shift();
|
||||
const argTxt = parts.shift();
|
||||
|
||||
if (funcTxt && argTxt) {
|
||||
const func = funcTxt.substring(1);
|
||||
const arg = parseFloat(argTxt);
|
||||
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 = {} as Record<string, string>;
|
||||
|
||||
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<string, any>): 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;
|
||||
}
|
||||
|
||||
export function parseThemeCode(code: string): Theme {
|
||||
let theme;
|
||||
|
||||
try {
|
||||
theme = JSON5.parse(code);
|
||||
} catch (_) {
|
||||
throw new Error('Failed to parse theme json');
|
||||
}
|
||||
if (!validateTheme(theme)) {
|
||||
throw new Error('This theme is invaild');
|
||||
}
|
||||
if (prefer.s.themes.some(t => t.id === theme.id)) {
|
||||
throw new Error('This theme is already installed');
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
export function previewTheme(code: string): void {
|
||||
const theme = parseThemeCode(code);
|
||||
if (theme != null) applyTheme(theme, false);
|
||||
}
|
||||
|
||||
export async function installTheme(code: string): Promise<void> {
|
||||
const theme = parseThemeCode(code);
|
||||
if (theme == null) return;
|
||||
@@ -261,3 +214,26 @@ export function clearAppliedThemeCache() {
|
||||
miLocalStorage.removeItem('themeId');
|
||||
miLocalStorage.removeItem('themeCachedVersion');
|
||||
}
|
||||
|
||||
export function handleThemeInstallError(err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
let message = '';
|
||||
switch (err.message.toLowerCase()) {
|
||||
case 'this theme is already installed':
|
||||
case 'already exists':
|
||||
case 'builtin theme':
|
||||
message = i18n.ts._theme.alreadyInstalled;
|
||||
break;
|
||||
default:
|
||||
message = i18n.ts._theme.invalid;
|
||||
break;
|
||||
}
|
||||
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: message,
|
||||
});
|
||||
}
|
||||
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user