From 773139b737fa5c7a597c78abbb39675964343075 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 27 Aug 2022 00:39:59 +0900 Subject: [PATCH] enhance(client): add html color-schema support --- packages/backend/src/server/web/boot.js | 4 ++++ packages/client/src/scripts/theme.ts | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index b0d529ec3..2aef689d3 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -92,6 +92,10 @@ } } } + const colorSchema = localStorage.getItem('colorSchema'); + if (colorSchema) { + document.documentElement.style.setProperty('color-schema', colorSchema); + } //#endregion const fontSize = localStorage.getItem('fontSize'); diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts index 02ac77b59..3f55d9ae8 100644 --- a/packages/client/src/scripts/theme.ts +++ b/packages/client/src/scripts/theme.ts @@ -57,6 +57,8 @@ 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)); @@ -78,8 +80,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); } // 色計算など再度行えるようにクライアント全体に通知