简单实现深色主题

package.json

 {
     "name": "c-tool",
-    "version": "1.7.8",
+    "version": "1.7.9",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",

src/helper.js

@@ -26,4 +26,10 @@ export const openUrl = (url) => {
     return window.open(url);
 };
 
-export const version = env('version').trim()
\ No newline at end of file
+export const version = env('version').trim()
+
+export const setDisplayMode = (mode) => {
+    mode = ['light', 'dark', 'auto'].includes(mode) ? mode : 'light'
+    console.log(`set display mode:${mode}`)
+    document.getElementsByTagName('html')[0].setAttribute('theme-mode', mode);
+}

src/statics/theme.less

 @import '~view-design/src/styles/index.less';
+@import './theme_dark.css';
 
 @primary-color: #1abc9c;
 @link-color: #1abc9c;

src/statics/theme_dark.css

 /* 黑暗模式简单实现 */
-html {
-    background-color: #fff;
-}
 
 /* 强制黑暗模 */
 html[theme-mode='dark'] {

src/tool.js

@@ -5,10 +5,14 @@ import router from './tool.router'
 import optionBlock from './components/optionBlock'
 import {plugin as modelPlugin} from './tool/model'
 import cache from './tool/cache'
+import setting from './tool/setting'
 import App from './tool.vue'
-import {isUtools} from './helper'
+import {isUtools,setDisplayMode} from './helper'
 
 const run = () => {
+    // 设置显示模式
+    setDisplayMode(setting.displayMode())
+
     Vue.config.productionTip = false
 
     Vue.use(ViewUI)

src/tool/setting.js

@@ -5,7 +5,7 @@ export default {
      * @param value
      * @return {boolean}
      */
-    autoSaveCopy (value = null) {
+    autoSaveCopy(value = null) {
         if (value === null) {
             return config.getSetting('auto_save_copy', true)
         }
@@ -16,7 +16,7 @@ export default {
      * @param value
      * @return {boolean}
      */
-    autoReadCopy (value = null) {
+    autoReadCopy(value = null) {
         if (value === null) {
             return config.getSetting('auto_read_copy', true)
         }
@@ -26,10 +26,20 @@ export default {
      * @param value
      * @return {boolean}
      */
-    autoReadCopyFilter (value = null) {
+    autoReadCopyFilter(value = null) {
         if (value === null) {
             return config.getSetting('auto_read_copy_filter', false)
         }
         return config.saveSetting('auto_read_copy_filter', value)
     },
-}
\ No newline at end of file
+    /**
+     * @param value
+     * @return {boolean}
+     */
+    displayMode(value = null) {
+        if (value === null) {
+            return config.getSetting('display_mode', 'light')
+        }
+        return config.saveSetting('display_mode', value)
+    },
+}

src/views/setting/block.vue

@@ -4,6 +4,11 @@
             <CellGroup @on-click="open">
                 <Cell title="常用工具设置" name="setting"/>
                 <Cell v-if="is_chromium" title="快捷键设置" name="shortcuts"/>
+                <Cell title="外观显示">
+                    <Select v-model="display_mode" slot="extra" transfer>
+                        <Option v-for="item in display_mode_list" :value="item.v" :key="item.v">{{ item.n }}</Option>
+                    </Select>
+                </Cell>
             </CellGroup>
             <CellGroup>
                 <Cell title="自动复制结果到剪贴板">
@@ -26,6 +31,7 @@
 <script>
 import {isChromium, isUtools, openUrl} from '../../helper'
 import setting from '../../tool/setting'
+import {setDisplayMode} from '../../helper'
 import settingBlock from './setting'
 
 export default {
@@ -37,20 +43,33 @@ export default {
             settingShow: false,
             auto_save_copy: true,
             auto_read_copy: true,
+            display_mode: "light",
             auto_read_copy_filter: false,
             is_chromium: isChromium,
             is_utools: isUtools,
+            display_mode_list: [
+                {n: "浅色", v: "light"},
+                {n: "深色", v: "dark"},
+                {n: "自动", v: "auto"},
+            ]
+        }
+    },
+    watch:{
+        display_mode(value){
+            setDisplayMode(value)
         }
     },
     created() {
         this.auto_save_copy = setting.autoSaveCopy()
         this.auto_read_copy = setting.autoReadCopy()
         this.auto_read_copy_filter = setting.autoReadCopyFilter()
+        this.display_mode = setting.displayMode()
     },
     beforeDestroy() {
         setting.autoSaveCopy(this.auto_save_copy)
         setting.autoReadCopy(this.auto_read_copy)
         setting.autoReadCopyFilter(this.auto_read_copy_filter)
+        setting.displayMode(this.display_mode)
     },
     methods: {
         open(name) {
@@ -65,4 +84,4 @@ export default {
         }
     },
 }
-</script>
\ No newline at end of file
+</script>