From ad13ff14deec94b2ce8bee9f025bfb8aab397ea7 Mon Sep 17 00:00:00 2001
From: qii404 <shiboqi123@gmail.com>
Date: Wed, 25 Dec 2024 14:45:36 +0800
Subject: [PATCH] Auto dark mode (#1299)

* change to dark mode automatically
fix #1291
---
 index.html                                    |  58 +++++++++++++-----
 pack/electron/electron-main.js                |  23 +++++--
 src/components/Setting.vue                    |  24 ++++++--
 .../{chalk => light}/fonts/element-icons.ttf  | Bin
 .../{chalk => light}/fonts/element-icons.woff | Bin
 static/theme/{chalk => light}/index.css       |   0
 6 files changed, 82 insertions(+), 23 deletions(-)
 rename static/theme/{chalk => light}/fonts/element-icons.ttf (100%)
 rename static/theme/{chalk => light}/fonts/element-icons.woff (100%)
 rename static/theme/{chalk => light}/index.css (100%)

diff --git a/index.html b/index.html
index 55fd99f..b0883d8 100644
--- a/index.html
+++ b/index.html
@@ -11,23 +11,53 @@
     <script type="text/javascript">
       const ipcRenderer = require('electron').ipcRenderer;
 
-      function globalChangeTheme(theme) {
-        theme  && (localStorage.theme = theme);
-        !theme && (theme = localStorage.theme);
-
-        const themeName =  (theme  == 'dark' ? 'dark' : 'chalk');
-        const themeHref = 'static/theme/' + themeName + '/index.css';
-
+      function changeCSS(theme = 'light') {
+        const themeHref = `static/theme/${theme}/index.css`;
         document.getElementById('theme-link').href = themeHref;
-        themeName == 'dark' ? document.body.classList.add('dark-mode') :
-                              document.body.classList.remove('dark-mode');
-
-        // change native theme
-        ipcRenderer.invoke('changeTheme', themeName);
+        theme == 'dark' ? document.body.classList.add('dark-mode') :
+                          document.body.classList.remove('dark-mode');
       }
 
-      // theme init start
-      globalChangeTheme();
+      function globalChangeTheme(theme) {
+        ipcRenderer.invoke('changeTheme', theme).then(shouldUseDarkColors => {
+          // delay to avoid stuck
+          setTimeout(() => {
+            changeCSS(shouldUseDarkColors ? 'dark' : 'light');
+          }, 100);
+        });
+      }
+
+      // triggered by OS theme changed
+      ipcRenderer.on('os-theme-updated', (event, arg) => {
+        // auto change only when theme set to 'system'
+        if (arg.themeSource != 'system') {
+          return;
+        }
+
+        setTimeout(() => {
+          changeCSS(arg.shouldUseDarkColors ? 'dark' : 'light');
+        }, 100);
+      });
+
+      // theme init at startup
+      (() => {
+        let theme = localStorage.theme;
+
+        if (!['system', 'light', 'dark'].includes(theme)) {
+          theme = 'system';
+        }
+
+        // follow system OS
+        if (theme == 'system') {
+          const dark = (new URL(window.location.href)).searchParams.get('dark');
+          changeCSS(dark === 'true' ? 'dark' : 'light');
+        }
+        // setted light or dark
+        else {
+          changeCSS(theme);
+          ipcRenderer.invoke('changeTheme', theme);
+        }
+      })();
     </script>
 
     <div id="app"></div>
diff --git a/pack/electron/electron-main.js b/pack/electron/electron-main.js
index d4eb95f..3d9510a 100644
--- a/pack/electron/electron-main.js
+++ b/pack/electron/electron-main.js
@@ -7,7 +7,6 @@ const path = require('path');
 const fontManager = require('./font-manager');
 const winState = require('./win-state');
 
-
 // disable GPU for some white screen issues
 // app.disableHardwareAcceleration();
 // app.commandLine.appendSwitch('disable-gpu');
@@ -71,12 +70,15 @@ function createWindow() {
     // mainWindow.loadFile('index.html');
     mainWindow.loadURL(url.format({
       protocol: 'file',
-      slashes: true,
       pathname: path.join(__dirname, 'index.html'),
-      query: { version: app.getVersion() },
+      query: {version: app.getVersion(), dark: nativeTheme.shouldUseDarkColors},
     }));
   } else {
-    mainWindow.loadURL(`http://localhost:9988/?version=${app.getVersion()}`);
+    mainWindow.loadURL(url.format({
+      protocol: 'http',
+      host: 'localhost:9988',
+      query: {version: app.getVersion(), dark: nativeTheme.shouldUseDarkColors},
+    }));
   }
 
   // Open the DevTools.
@@ -144,10 +146,21 @@ ipcMain.handle('getMainArgs', (event, arg) => ({
 }));
 
 ipcMain.handle('changeTheme', (event, theme) => {
-  nativeTheme.themeSource = (theme === 'dark' ? 'dark' : 'light');
+  nativeTheme.themeSource = theme;
   return nativeTheme.shouldUseDarkColors;
 });
 
+// OS theme changed
+nativeTheme.on('updated', () => {
+  // delay send to prevent webcontent stuck
+  setTimeout(() => {
+    mainWindow.webContents.send('os-theme-updated', {
+      shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+      themeSource: nativeTheme.themeSource
+    });
+  }, 50);
+});
+
 ipcMain.handle('getTempPath', (event, arg) => app.getPath('temp'));
 
 // for mac copy paset shortcut
diff --git a/src/components/Setting.vue b/src/components/Setting.vue
index 5a77d3a..71add1e 100644
--- a/src/components/Setting.vue
+++ b/src/components/Setting.vue
@@ -8,7 +8,14 @@
           <el-col :sm="12" :lg="5">
             <!-- theme select-->
             <el-form-item :label="$t('message.dark_mode')">
-              <el-switch v-model='darkMode' @change="changeTheme"></el-switch>
+              <el-select v-model='themeMode' @change="changeTheme">
+                <el-option
+                  v-for="(label, theme) in themeList"
+                  :key="theme"
+                  :value="theme"
+                  :label="label">
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :sm="12" :lg="7">
@@ -169,7 +176,8 @@ export default {
       // electronVersion: process.versions.electron,
       allFonts: [],
       loadingFonts: false,
-      darkMode: localStorage.theme == 'dark',
+      themeMode: 'system',
+      themeList: {system: 'System', light: 'Light', dark: 'Dark'},
     };
   },
   components: { LanguageSelector },
@@ -180,6 +188,14 @@ export default {
     restoreSettings() {
       const settings = storage.getSetting();
       this.form = { ...this.form, ...settings };
+
+      // theme
+      let theme = localStorage.theme;
+      if (!Object.keys(this.themeList).includes(theme)) {
+        theme = 'system';
+      }
+
+      this.themeMode = theme;
     },
     saveSettings() {
       storage.saveSettings(this.form);
@@ -188,8 +204,8 @@ export default {
       this.$bus.$emit('reloadSettings', Object.assign({}, this.form));
     },
     changeTheme() {
-      const themeName = this.darkMode ? 'dark' : 'chalk';
-      globalChangeTheme(themeName);
+      localStorage.theme = this.themeMode;
+      globalChangeTheme(this.themeMode);
     },
     changeZoom() {
       const { webFrame } = require('electron');
diff --git a/static/theme/chalk/fonts/element-icons.ttf b/static/theme/light/fonts/element-icons.ttf
similarity index 100%
rename from static/theme/chalk/fonts/element-icons.ttf
rename to static/theme/light/fonts/element-icons.ttf
diff --git a/static/theme/chalk/fonts/element-icons.woff b/static/theme/light/fonts/element-icons.woff
similarity index 100%
rename from static/theme/chalk/fonts/element-icons.woff
rename to static/theme/light/fonts/element-icons.woff
diff --git a/static/theme/chalk/index.css b/static/theme/light/index.css
similarity index 100%
rename from static/theme/chalk/index.css
rename to static/theme/light/index.css