テーマエディターの実装 (#6482)

* テーマ機能の実装

* resolve #6478

* 定数を削除できるように

* 変更を破棄するか確認ダイアログを表示するように

* fix code

* Update theme.ts

* ✌️

* fix path

* wip

* wip

* wip

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

src/client/scripts/theme-editor.ts

@@ -0,0 +1,74 @@
+import { v4 as uuid} from 'uuid';
+
+import { themeProps, Theme } from './theme';
+
+export type Default = null;
+export type Color = string;
+export type FuncName = 'alpha' | 'darken' | 'lighten';
+export type Func = { type: 'func', name: FuncName, arg: number, value: string  };
+export type RefProp = { type: 'refProp', key: string  };
+export type RefConst = { type: 'refConst', key: string  };
+
+export type ThemeValue = Color | Func | RefProp | RefConst | Default;
+
+export type ThemeViewModel = [ string, ThemeValue ][];
+
+export const fromThemeString = (str?: string) : ThemeValue => {
+	if (!str) return null;
+	if (str.startsWith(':')) {
+		const parts = str.slice(1).split('<');
+		const name = parts[0] as FuncName;
+		const arg = parseFloat(parts[1]);
+		const value = parts[2].startsWith('@') ? parts[2].slice(1) : '';
+		return { type: 'func', name, arg, value };
+	} else if (str.startsWith('@')) {
+		return {
+			type: 'refProp',
+			key: str.slice(1),
+		};
+	} else if (str.startsWith('$')) {
+		return {
+			type: 'refConst',
+			key: str.slice(1),
+		};
+	} else {
+		return str;
+	}
+};
+
+export const toThemeString = (value: Color | Func | RefProp | RefConst) => {
+	if (typeof value === 'string') return value;
+	switch (value.type) {
+		case 'func': return `:${value.name}<${value.arg}<@${value.value}`;
+		case 'refProp': return `@${value.key}`;
+		case 'refConst': return `$${value.key}`;
+	}
+};
+
+export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: string, author: string, base: 'dark' | 'light'): Theme => {
+	const props = { } as { [key: string]: string };
+	for (const [ key, value ] of vm) {
+		if (value === null) continue;
+		props[key] = toThemeString(value);
+	}
+
+	return {
+		id: uuid(),
+		name, desc, author, props, base
+	};
+};
+
+export const convertToViewModel = (theme: Theme): ThemeViewModel => {
+	const vm: ThemeViewModel = [];
+	// プロパティの登録
+	vm.push(...themeProps.map(key => [ key, fromThemeString(theme.props[key])] as [ string, ThemeValue ]));
+
+	// 定数の登録
+	const consts = Object
+		.keys(theme.props)
+		.filter(k => k.startsWith('$'))
+		.map(k => [ k, fromThemeString(theme.props[k]) ] as [ string, ThemeValue ]);
+
+		vm.push(...consts);
+	return vm;
+};

src/client/scripts/theme.ts

@@ -12,6 +12,8 @@ export type Theme = {
 export const lightTheme: Theme = require('../themes/_light.json5');
 export const darkTheme: Theme = require('../themes/_dark.json5');
 
+export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
+
 export const builtinThemes = [
 	require('../themes/white.json5'),
 	require('../themes/black.json5'),