wip

* 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

.gitignore

@@ -81,3 +81,6 @@ vite.config.local-dev.ts.timestamp-*
 
 # VSCode addon
 .favorites.json
+
+# Affinity
+*.af~lock~

CHANGELOG.md

@@ -19,6 +19,10 @@
 ### Client
 - Enhance: ノートの詳細表示での公開範囲の表示を改善  
   (Cherry-picked from https://github.com/kokonect-link/cherrypick/commit/ecc75563f4e428b66adccc379bf317b5b21ed8e6)
+- Enhance: テーマのプレビュー時、リロードせずにもとのテーマに戻せるように
+- Fix: テーマエディター使用時に、最初の変更のみ適用される問題を修正
+- Fix: テーマのプレビュー時、既存のテーマとIDが被っている場合にプレビューできない問題を修正
+- Fix: テーマのインストールエラーの表示を改善
 - Fix: ロール設定画面でロールをアサイン/アサイン解除した際、リロードしなくても画面に反映されるよう修正
 
 ### Server

locales/ja-JP.yml

@@ -1409,6 +1409,8 @@ presets: "プリセット"
 zeroPadding: "ゼロ埋め"
 nothingToConfigure: "設定項目はありません"
 viewRenotedChannel: "リノート先のチャンネルを見る"
+previewingTheme: "テーマのプレビュー中"
+previewingThemeRestore: "元に戻す"
 
 _imageEditing:
   _vars:
@@ -3554,3 +3556,17 @@ _qr:
   scanFile: "端末の画像をスキャン"
   raw: "テキスト"
   mfm: "MFM"
+
+_room:
+  snapToGrid: "グリッドにスナップ"
+  gridScale: "グリッドサイズ"
+  thereAreUnsavedChanges: "未保存の変更があります"
+  revertAllChangesConfirmation: "全ての変更を取り消し、部屋を最後に保存した状態まで戻しますか？"
+  graphicsQuality: "グラフィックの品質"
+  frameRate: "フレームレート"
+  resolution: "解像度"
+  yourDeviceNotSupported_title: "お使いのデバイスはMisskeyRoomをサポートしていません。"
+  yourDeviceNotSupported_description: "MisskeyRoomを動作させるには、WebGPUをサポートするデバイスが必要です。"
+  failedToInitialize: "初期化に失敗しました"
+  crushed_description: "バグ、またはデバイスのリソース不足の可能性が考えられます。"
+  antialiasing: "アンチエイリアス"

packages/frontend-embed/src/boot.ts

@@ -28,7 +28,7 @@ import { postMessageToParentWindow, setIframeId } from '@/post-message.js';
 import { serverContext } from '@/server-context.js';
 import { i18n } from '@/i18n.js';
 
-import type { Theme } from '@/theme.js';
+import type { Theme } from '@@/js/theme.js';
 
 console.log('Misskey Embed');
 

packages/frontend-embed/src/theme.ts

@@ -5,26 +5,10 @@
 
 // TODO: (可能な部分を)sharedに抽出して frontend と共通化
 
-import tinycolor from 'tinycolor2';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
-import type { BundledTheme } from 'shiki/themes';
-
-export type Theme = {
-	id: string;
-	name: string;
-	author: string;
-	desc?: string;
-	base?: 'dark' | 'light';
-	props: Record<string, string>;
-	codeHighlighter?: {
-		base: BundledTheme;
-		overrides?: Record<string, any>;
-	} | {
-		base: '_none_';
-		overrides: Record<string, any>;
-	};
-};
+import { compile } from '@@/js/theme.js';
+import type { Theme } from '@@/js/theme.js';
 
 let timeout: number | null = null;
 
@@ -32,7 +16,7 @@ export function assertIsTheme(theme: Record<string, unknown>): theme is Theme {
 	return typeof theme === 'object' && theme !== null && 'id' in theme && 'name' in theme && 'author' in theme && 'props' in theme;
 }
 
-export function applyTheme(theme: Theme, persist = true) {
+export function applyTheme(theme: Theme) {
 	if (timeout) window.clearTimeout(timeout);
 
 	window.document.documentElement.classList.add('_themeChanging_');
@@ -68,48 +52,3 @@ export function applyTheme(theme: Theme, persist = true) {
 
 	// iframeを正常に透過させるために、cssのcolor-schemeは `light dark;` 固定にしてある。style.scss参照
 }
-
-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 = {};
-
-	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();
-}

packages/frontend-shared/@types/theme.d.ts

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+declare module '@@/themes/*.json5' {
+	import { Theme } from '@@/js/theme.js';
+
+	const theme: Theme;
+
+	// eslint-disable-next-line import/no-default-export
+	export default theme;
+}

packages/frontend-shared/build.js

@@ -1,109 +0,0 @@
-import fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import * as esbuild from 'esbuild';
-import { build } from 'esbuild';
-import { execa } from 'execa';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-const _package = JSON.parse(fs.readFileSync(_dirname + '/package.json', 'utf-8'));
-
-const entryPoints = fs.globSync('./js/**/**.{ts,tsx}');
-
-/** @type {import('esbuild').BuildOptions} */
-const options = {
-	entryPoints,
-	minify: process.env.NODE_ENV === 'production',
-	outdir: './js-built',
-	target: 'es2022',
-	platform: 'browser',
-	format: 'esm',
-	sourcemap: 'linked',
-};
-
-const args = process.argv.slice(2).map(arg => arg.toLowerCase());
-
-// js-built配下をすべて削除する
-if (!args.includes('--no-clean')) {
-	fs.rmSync('./js-built', { recursive: true, force: true });
-}
-
-if (args.includes('--watch')) {
-	await watchSrc();
-} else {
-	await buildSrc();
-}
-
-async function buildSrc() {
-	console.log(`[${_package.name}] start building...`);
-
-	await build(options)
-		.then(() => {
-			console.log(`[${_package.name}] build succeeded.`);
-		})
-		.catch((err) => {
-			process.stderr.write(err.stderr);
-			process.exit(1);
-		});
-
-	if (process.env.NODE_ENV === 'production') {
-		console.log(`[${_package.name}] skip building d.ts because NODE_ENV is production.`);
-	} else {
-		await buildDts();
-	}
-
-	fs.copyFileSync('./js/emojilist.json', './js-built/emojilist.json');
-
-	console.log(`[${_package.name}] finish building.`);
-}
-
-function buildDts() {
-	return execa(
-		'tsgo',
-		[
-			'--project', 'tsconfig.json',
-			'--outDir', 'js-built',
-			'--declaration', 'true',
-			'--emitDeclarationOnly', 'true',
-		],
-		{
-			stdout: process.stdout,
-			stderr: process.stderr,
-		},
-	);
-}
-
-async function watchSrc() {
-	const plugins = [{
-		name: 'gen-dts',
-		setup(build) {
-			build.onStart(() => {
-				console.log(`[${_package.name}] detect changed...`);
-			});
-			build.onEnd(async result => {
-				if (result.errors.length > 0) {
-					console.error(`[${_package.name}] watch build failed:`, result);
-					return;
-				}
-				await buildDts();
-			});
-		},
-	}];
-
-	console.log(`[${_package.name}] start watching...`);
-
-	const context = await esbuild.context({ ...options, plugins });
-	await context.watch();
-
-	await new Promise((resolve, reject) => {
-		process.on('SIGHUP', resolve);
-		process.on('SIGINT', resolve);
-		process.on('SIGTERM', resolve);
-		process.on('uncaughtException', reject);
-		process.on('exit', resolve);
-	}).finally(async () => {
-		await context.dispose();
-		console.log(`[${_package.name}] finish watching.`);
-	});
-}

packages/frontend-shared/js/theme.ts

@@ -0,0 +1,126 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import tinycolor from 'tinycolor2';
+import JSON5 from 'json5';
+import lightTheme from '@@/themes/_light.json5';
+import type { BundledTheme } from 'shiki/themes';
+
+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;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		overrides?: Record<string, any>;
+	} | {
+		base: '_none_';
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		overrides: Record<string, any>;
+	};
+};
+
+export type CompiledTheme = Record<string, string>;
+
+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)),
+);
+
+export function compile(theme: Theme): CompiledTheme {
+	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 CompiledTheme;
+
+	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();
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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');
+	}
+
+	return theme;
+}

packages/frontend-shared/package.json

@@ -1,32 +1,18 @@
 {
 	"name": "frontend-shared",
 	"type": "module",
-	"main": "./js-built/index.js",
-	"types": "./js-built/index.d.ts",
-	"exports": {
-		".": {
-			"import": "./js-built/index.js",
-			"types": "./js-built/index.d.ts"
-		},
-		"./*": {
-			"import": "./js-built/*",
-			"types": "./js-built/*"
-		}
-	},
+	"private": true,
 	"scripts": {
-		"build": "node ./build.js",
-		"watch": "nodemon -w package.json -e json --exec \"node ./build.js --watch\"",
 		"eslint": "eslint './**/*.{js,jsx,ts,tsx}'",
 		"typecheck": "tsgo --noEmit",
 		"lint": "pnpm typecheck && pnpm eslint"
 	},
 	"devDependencies": {
 		"@types/node": "24.12.2",
+		"@types/tinycolor2": "1.4.6",
 		"@typescript-eslint/eslint-plugin": "8.59.0",
 		"@typescript-eslint/parser": "8.59.0",
-		"esbuild": "0.28.0",
 		"eslint-plugin-vue": "10.9.0",
-		"nodemon": "3.1.14",
 		"vue-eslint-parser": "10.4.0"
 	},
 	"files": [
@@ -34,7 +20,10 @@
 	],
 	"dependencies": {
 		"i18n": "workspace:*",
+		"json5": "2.2.3",
 		"misskey-js": "workspace:*",
+		"shiki": "4.0.2",
+		"tinycolor2": "1.6.0",
 		"vue": "3.5.33"
 	}
 }

packages/frontend/.storybook/preview.ts

@@ -20,13 +20,13 @@ let moduleInitialized = false;
 let unobserve = () => {};
 let misskeyOS = null;
 
-function loadTheme(applyTheme: typeof import('../src/theme')['applyTheme']) {
+function loadTheme(themeMaganer: typeof import('../src/theme')['themeManager']) {
 	unobserve();
 	const theme = themes[window.document.documentElement.dataset.misskeyTheme];
 	if (theme) {
-		applyTheme(themes[window.document.documentElement.dataset.misskeyTheme]);
+		themeMaganer.updateTheme(themes[window.document.documentElement.dataset.misskeyTheme]);
 	} else {
-		applyTheme(themes['l-light']);
+		themeMaganer.updateTheme(themes['l-light']);
 	}
 	const observer = new MutationObserver((entries) => {
 		for (const entry of entries) {
@@ -34,7 +34,7 @@ function loadTheme(applyTheme: typeof import('../src/theme')['applyTheme']) {
 				const target = entry.target as HTMLElement;
 				const theme = themes[target.dataset.misskeyTheme];
 				if (theme) {
-					applyTheme(themes[target.dataset.misskeyTheme]);
+					themeMaganer.updateTheme(themes[target.dataset.misskeyTheme]);
 				} else {
 					target.removeAttribute('style');
 				}

packages/frontend/assets/room/object-thumbs/README.md

@@ -0,0 +1 @@
+これらのサムネイルはdev buildでRoomのカタログダイアログを表示し家具を選択した状態でブラウザのコンソールで`takeScreenshot();`を叩くと生成・ダウンロードできます