系统主题

electron/ipc/example.js

@@ -9,7 +9,7 @@
  * @param arg 接收到的消息
  */
 
-const {app, dialog, BrowserWindow, BrowserView, Notification, powerMonitor, screen} = require('electron');
+const {app, dialog, BrowserWindow, BrowserView, Notification, powerMonitor, screen, nativeTheme} = require('electron');
 const path = require('path');
 const _ = require('lodash');
 
@@ -278,4 +278,30 @@ exports.getScreen = function (event, channel, arg) {
   ]
 
   return data;
+}
+
+/**
+ * 获取系统主题
+ */
+exports.getTheme = function (event, channel, arg) {
+  let theme = 'system';
+  if (nativeTheme.shouldUseHighContrastColors) {
+    theme = 'light';
+  } else if (nativeTheme.shouldUseInvertedColorScheme) {
+    theme = 'dark';
+  }
+  console.log('[electron] [ipc] [example] [getTheme] theme:', theme);
+
+  return theme;
+}
+
+/**
+ * 设置系统主题
+ */
+exports.setTheme = function (event, channel, arg) {
+
+  console.log('[electron] [ipc] [example] [setTheme] theme:', arg);
+  nativeTheme.themeSource = arg;
+
+  return arg;
 }

frontend/src/config/router.config.js

@@ -52,7 +52,12 @@ export const constantRouterMap = [
             path: '/demo/screen/index',
             name: 'DemoScreenIndex',
             component: () => import('@/views/demo/screen/Index')
-          },                       
+          },
+          {
+            path: '/demo/theme/index',
+            name: 'DemoThemeIndex',
+            component: () => import('@/views/demo/theme/Index')
+          },                               
           {
             path: '/demo/shortcut/index',
             name: 'DemoShortcutIndex',

frontend/src/layouts/DemoMenu.vue

@@ -65,7 +65,13 @@ export default {
           title: '屏幕信息',
           pageName: 'DemoScreenIndex',
           params: {}
-        },      
+        },
+        'menu_405' : {
+          icon: 'profile',
+          title: '系统主题',
+          pageName: 'DemoThemeIndex',
+          params: {}
+        },       
         'menu_500' : {
           icon: 'profile',
           title: '软件调用',

frontend/src/views/demo/theme/Index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="app-demo-screen">
+    <div class="one-block-1">
+      <span>
+        1. 系统主题模式
+      </span>
+    </div>
+    <div class="one-block-2">
+      <a-space>
+        <a-button @click="getTheme()">获取模式</a-button>
+      </a-space>
+      <span>
+        结果：{{ currentThemeMode }}
+      </span>
+    </div>
+    <div class="one-block-1">
+      2. 设置主题模式（请自行实现前端UI）
+    </div>  
+    <div class="one-block-2">
+      <a-radio-group v-model="currentThemeMode" @change="setTheme">
+        <a-radio :value="themeList[0]">
+          {{ themeList[0] }}
+        </a-radio>
+        <a-radio :value="themeList[1]">
+          {{ themeList[1] }}
+        </a-radio>
+        <a-radio :value="themeList[2]">
+          {{ themeList[2] }}
+        </a-radio>
+      </a-radio-group>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      currentThemeMode: '',
+      themeList: [
+        'system',
+        'light',
+        'dark'
+      ]
+    };
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      const self = this;
+      this.$ipc.on('example.setTheme', (event, result) => {
+        console.log('result:', result)
+        self.currentThemeMode = result;
+      })
+
+      this.$ipc.on('example.getTheme', (event, result) => {
+        console.log('result:', result)
+        self.currentThemeMode = result;
+      })
+    },
+    setTheme (e) {
+      this.currentThemeMode = e.target.value;
+      console.log('setTheme currentThemeMode:', this.currentThemeMode)
+      this.$ipc.send('example.setTheme', this.currentThemeMode);
+    },
+    getTheme () {
+      this.$ipc.send('example.getTheme', '');
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-demo-screen {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>