Merge branch 'develop' into pizzax-indexeddb

1 files changed, 13 insertions, 5 deletions

diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
index dec9fb355c..62a2b9459a 100644
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue';
-import { globalEvents } from '@/events';
 import tinycolor from 'tinycolor2';
+import { globalEvents } from '@/events';
 
 export type Theme = {
 	id: string;
@@ -13,6 +13,7 @@ export type Theme = {
 
 import lightTheme from '@/themes/_light.json5';
 import darkTheme from '@/themes/_dark.json5';
+import { deepClone } from './clone';
 
 export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
 
@@ -25,17 +26,19 @@ export const getBuiltinThemes = () => Promise.all(
 		'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-pumpkin',
-		'd-black',
-	].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default))
+		'd-u0',
+	].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
 );
 
 export const getBuiltinThemesRef = () => {
@@ -55,8 +58,10 @@ export function applyTheme(theme: Theme, persist = true) {
 		document.documentElement.classList.remove('_themeChanging_');
 	}, 1000);
 
+	const colorSchema = theme.base === 'dark' ? 'dark' : 'light';
+
 	// Deep copy
-	const _theme = JSON.parse(JSON.stringify(theme));
+	const _theme = deepClone(theme);
 
 	if (_theme.base) {
 		const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
@@ -76,8 +81,11 @@ export function applyTheme(theme: Theme, persist = true) {
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	}
 
+	document.documentElement.style.setProperty('color-schema', colorSchema);
+
 	if (persist) {
 		localStorage.setItem('theme', JSON.stringify(props));
+		localStorage.setItem('colorSchema', colorSchema);
 	}
 
 	// 色計算など再度行えるようにクライアント全体に通知