Auto dark mode (#1299)

* change to dark mode automatically
fix #1291

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>

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

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');