feat: auto light/dark color

lideming · Jun 12, 2023 · b7ae902 · b7ae902 · vercel · Jun 12, 2023
1 parent 910c675
commit b7ae902
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 26 deletions.
diff --git a/src/I18n/i18n-data.json b/src/I18n/i18n-data.json
@@ -171,6 +171,7 @@
         ["msgbox_cancel", "Cancel", "取消", "キャンセル"],
         ["colortheme_light", "light", "亮色", "ライト"],
         ["colortheme_dark", "dark", "暗色", "ダーク"],
+        ["colortheme_auto", "auto", "自动", "auto"],
         ["styletheme_", "classic", "经典", "クラシック"],
         ["styletheme_-rounded", "rounded", "圆角", "角丸"],
         ["visibility_0", "Private", "私有", "非公開"],
@@ -182,7 +183,7 @@
         ["make_{0}_visibility_0", "Make {0} items private", "转换 {0} 个项目为私有", "{0} 個アイテムを非公開に変更する"],
         ["make_{0}_visibility_1", "Make {0} items public", "转换 {0} 个项目为公开", "{0} 個アイテムを公開に変更する"],
         ["social-link-error_already-linked", "The account has been already linked.", "该账户已经被关联。", "そのアカウントはすでにリンクされています。"],
-        ["language_auto", "(auto)", "(自动)", "(auto)"],
+        ["language_auto", "auto", "自动", "auto"],
         ["bitrate_original", "original", "原始", "オリジナル"]
     ]
 ]
diff --git a/src/Infra/UI.ts b/src/Infra/UI.ts
@@ -72,6 +72,7 @@ export const ui = new (class {
   init() {
     this.addErrorListener();
     this.lang.init();
+    this.theme.init();
     this.sidebar.init();
     this.contentBg.init();
     bottomBar.bindPlayer(playerCore);
@@ -155,38 +156,66 @@ export const ui = new (class {
     bottomBar.updateAll();
   }
   theme = new (class {
-    all = ["light", "dark", "dark-rounded", "light-rounded"] as const;
-    current: this["all"][number] = "light";
+    colors = ['light', 'dark', 'auto'] as const;
+    styles = ['', '-rounded'] as const;
+    current: `${typeof this.colors[number]}${typeof this.styles[number]}` = "light";
     timer = new Timer(() =>
       toggleClass(document.body, "changing-theme", false)
     );
-    private rendered = false;
     siTheme = new SettingItem<this["current"]>(
       "mcloud-theme",
       "str",
       "light-rounded"
-    ).render((theme) => {
-      if (this.current !== theme) {
-        this.current = theme;
-        if (this.rendered) toggleClass(document.body, "changing-theme", true);
-        const [color, rounded] = theme.split("-");
-        toggleClass(document.body, "dark", color === "dark");
-        toggleClass(document.body, "rounded", rounded === "rounded");
-        var meta = document.getElementById(
-          "meta-theme-color"
-        ) as HTMLMetaElement;
-        if (meta) {
-          meta.content = color === "dark" ? "black" : "";
-        } else {
-          console.warn('[UI] Failed to get the "meta-theme-color" element');
+    );
+
+    init() {
+      this.siTheme.render(this.render);
+    }
+
+    private rendered = false;
+    render = () => {
+      const theme = this.siTheme.data;
+      this.current = theme;
+      if (this.rendered) toggleClass(document.body, "changing-theme", true);
+      const [color, rounded] = theme.split("-");
+      let computedColor = color;
+      if (computedColor === 'auto') {
+        if ('matchMedia' in window) {
+          this._toggleColorSchemeWatcher(true);
+          computedColor = this._watchingColorSchema?.matches ? 'dark' : 'light';
         }
-        if (this.rendered) this.timer.timeout(500);
+      } else {
+        this._toggleColorSchemeWatcher(false);
       }
+      toggleClass(document.body, "dark", computedColor === "dark");
+      toggleClass(document.body, "rounded", rounded === "rounded");
+      var meta = document.getElementById(
+        "meta-theme-color"
+      ) as HTMLMetaElement;
+      if (meta) {
+        meta.content = computedColor === "dark" ? "black" : "";
+      } else {
+        console.warn('[UI] Failed to get the "meta-theme-color" element');
+      }
+      if (this.rendered) this.timer.timeout(500);
       this.rendered = true;
-    });
+    };
+
     set(theme: this["current"]) {
       this.siTheme.set(theme);
     }
+
+    private _watchingColorSchema: MediaQueryList | null = null;
+    private _toggleColorSchemeWatcher(enable: boolean) {
+      if (!!this._watchingColorSchema === enable || !('matchMedia' in window)) return;
+      if (enable) {
+        this._watchingColorSchema = window.matchMedia('(prefers-color-scheme: dark)');
+        this._watchingColorSchema.addEventListener('change', this.render);
+      } else {
+        this._watchingColorSchema!.removeEventListener('change', this.render);
+        this._watchingColorSchema = null;
+      }
+    }
   })();
   lang = new (class {
     availableLangs = ["en", "zh", "ja"];

diff --git a/src/Settings/SettingsUI.tsx b/src/Settings/SettingsUI.tsx
@@ -28,8 +28,6 @@ export const settingsUI = new (class {
   }
 })();
 
-const themes = ["light", "dark"];
-const styles = ["", "-rounded"];
 const bitrates = [128, 256, 0];
 
 function getThemeAndStyle() {
@@ -126,7 +124,7 @@ class SettingsDialog extends Dialog {
             setThemeAndStyle({ theme: option.value });
           }}
         >
-          {themes.map((option) => (
+          {ui.theme.colors.map((option) => (
             <RadioOption value={option}>
               {() => i18n.get("colortheme_" + option)}
             </RadioOption>
@@ -143,7 +141,7 @@ class SettingsDialog extends Dialog {
             setThemeAndStyle({ style: option.value });
           }}
         >
-          {styles.map((option) => (
+          {ui.theme.styles.map((option) => (
             <RadioOption value={option}>
               {() => i18n.get("styletheme_" + option)}
             </RadioOption>
@@ -160,7 +158,7 @@ class SettingsDialog extends Dialog {
             ui.lang.siLang.set(option.value);
           }}
         >
-          {["", ...ui.lang.availableLangs].map((option) => (
+          {[...ui.lang.availableLangs, ""].map((option) => (
             <RadioOption value={option}>
               {() =>
                 option ? i18n.get2("English", [], option) : I`language_auto`
@@ -197,7 +195,7 @@ class SettingsDialog extends Dialog {
             ui.notification.setEnable(option.value);
           }}
         >
-          {[true, false].map((option) => (
+          {[false, true].map((option) => (
             <RadioOption value={option}>
               {() => (option ? I`enabled` : I`disabled`)}
             </RadioOption>