新增动态主题“道法自然”

publish/changeLog.md

@@ -3,6 +3,7 @@
 - 新增对播放详情页歌词大小、是否缩放、对齐方式的设置，可以去设置-播放详情页设置查看
 - 新增播放详情页通过歌词调整播放进度，默认关闭，需要到设置-播放详情页设置开启，开启后在播放详情页拖动歌词时将会出现跳转当前行歌词播放的按钮
 - 新增全屏状态，按F11可以进入、退出全屏状态，由于全屏时会隐藏控制栏按钮，所以需要使用鼠标右键双击（详情页的任意地方都可以）来关闭播放详情页
+- 新增动态主题“道法自然”，你可以预先设置一个亮色主题及暗色主题，此后将自动根据系统的亮、暗主题色自动切换为你预先设置的相应主题。注：鼠标 右击 此主题项即可打开亮、暗色主题设置窗口。
 
 ### 优化
 

src/common/config.js

@@ -106,7 +106,7 @@ module.exports = {
     },
     {
       id: 13,
-      name: '黑纸白字',
+      name: '黑灯瞎火',
       className: 'black',
     },
     {
@@ -125,4 +125,6 @@ module.exports = {
       className: 'happy_new_year',
     },
   ],
+  themeLights: [0, 1, 2, 3, 4, 10, 5, 6, 11, 12, 7, 8, 9],
+  themeDarks: [13, 7],
 }

src/common/defaultSetting.js

@@ -2,7 +2,7 @@ const path = require('path')
 const os = require('os')
 
 const defaultSetting = {
-  version: '1.0.53',
+  version: '1.0.54',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -105,7 +105,11 @@ const defaultSetting = {
     port: '23332',
   },
   windowSizeId: 2,
-  themeId: 0,
+  theme: {
+    id: 0,
+    lightId: 0,
+    darkId: 13,
+  },
   langId: null,
   sourceId: 'kw',
   apiSource: 'temp',
@@ -124,7 +128,7 @@ const overwriteSetting = {
 
 // 使用新年皮肤
 if (new Date().getMonth() < 2) {
-  defaultSetting.themeId = 9
+  defaultSetting.theme.id = 9
   defaultSetting.desktopLyric.theme = 3
 }
 

src/common/ipcNames.js

@@ -16,6 +16,7 @@ const names = {
     interval_callback: 'interval_callback',
     interval_cancel: 'interval_cancel',
     open_dev_tools: 'open_dev_tools',
+    system_theme_change: 'system_theme_change',
 
     set_music_meta: 'set_music_meta',
     progress: 'progress',

src/common/utils.js

@@ -162,6 +162,12 @@ exports.initSetting = isShowErrorAlert => {
       setting.player.isShowLyricTranslation = setting.player.isShowLyricTransition
       delete setting.player.isShowLyricTransition
     }
+
+    // 迁移v1.19.0之前的主题设置
+    if (setting.themeId) {
+      setting.theme.id = setting.themeId
+      delete setting.themeId
+    }
   }
 
   // 从我的列表分离下载列表 v1.7.0 后

src/lang/en-us.json

@@ -228,6 +228,7 @@
   "setting__basic_sourcename_real": "Original",
   "setting__basic_sourcename_title": "Select the name of music source",
   "setting__basic_theme": "Theme",
+  "setting__basic_theme_auto_tip": "This is a dynamic theme, you can preset a light theme and a dark theme, and then it will automatically switch to the corresponding theme you preset according to the system's light and dark theme colors.\nNote: Right-click this theme item to open the light and dark theme settings window.",
   "setting__basic_to_tray": "Do not exit the software when closing the software and minimize it to the system tray",
   "setting__basic_window_size": "Window size",
   "setting__basic_window_size_big": "Large",
@@ -410,6 +411,8 @@
   "sync__title": "Choose how to synchronize the list with {name}",
   "tag__high_quality": "HQ",
   "tag__lossless": "SQ",
+  "theme_auto": "Auto",
+  "theme_auto_tip": "Right-click to open the light and dark theme settings window",
   "theme_black": "Black",
   "theme_blue": "Blue",
   "theme_blue2": "Purple Blue",
@@ -423,6 +426,9 @@
   "theme_pink": "Pink",
   "theme_purple": "Purple",
   "theme_red": "Red",
+  "theme_selector_modal__dark_title": "dark theme",
+  "theme_selector_modal__light_title": "Bright theme",
+  "theme_selector_modal__title": "Follow system theme settings",
   "theme_yellow": "Yellow",
   "user_api__allow_show_update_alert": "Allow update popup to show",
   "user_api__btn_export": "Export",

src/lang/zh-cn.json

@@ -228,6 +228,7 @@
   "setting__basic_sourcename_real": "原名",
   "setting__basic_sourcename_title": "选择音源名字类型",
   "setting__basic_theme": "主题颜色",
+  "setting__basic_theme_auto_tip": "此乃动态主题，你可以预先设置一个亮色主题及暗色主题，此后将自动根据系统的亮、暗主题色自动切换为你预先设置的相应主题。\n注：鼠标 右击 此主题项即可打开亮、暗色主题设置窗口。",
   "setting__basic_to_tray": "关闭软件时不退出软件将其最小化到系统托盘",
   "setting__basic_window_size": "窗口尺寸",
   "setting__basic_window_size_big": "大",
@@ -410,6 +411,8 @@
   "sync__title": "选择与 {name} 的列表同步方式",
   "tag__high_quality": "HQ",
   "tag__lossless": "SQ",
+  "theme_auto": "道法自然",
+  "theme_auto_tip": "鼠标 右击 可打开亮、暗主题设置窗口",
   "theme_black": "黑灯瞎火",
   "theme_blue": "蓝田生玉",
   "theme_blue2": "清热版蓝",
@@ -423,6 +426,9 @@
   "theme_pink": "粉装玉琢",
   "theme_purple": "重斤球紫",
   "theme_red": "热情似火",
+  "theme_selector_modal__dark_title": "暗色主题",
+  "theme_selector_modal__light_title": "亮色主题",
+  "theme_selector_modal__title": "跟随系统主题设置",
   "theme_yellow": "信口雌黄",
   "user_api__allow_show_update_alert": "允许显示更新弹窗",
   "user_api__btn_export": "导出",

src/lang/zh-tw.json

@@ -228,6 +228,7 @@
   "setting__basic_sourcename_real": "原名",
   "setting__basic_sourcename_title": "選擇音源名字類型",
   "setting__basic_theme": "主題顏色",
+  "setting__basic_theme_auto_tip": "此乃動態主題，你可以預先設置一個亮色主題及暗色主題，此後將自動根據系統的亮、暗主題色自動切換為你預先設置的相應主題。\n注：鼠標 右擊 此主題項即可打開亮、暗色主題設置窗口。",
   "setting__basic_to_tray": "關閉軟件時不退出軟件將其最小化到系統托盤",
   "setting__basic_window_size": "窗口尺寸",
   "setting__basic_window_size_big": "大",
@@ -410,6 +411,8 @@
   "sync__title": "選擇與 {name} 的列表同步方式",
   "tag__high_quality": "HQ",
   "tag__lossless": "SQ",
+  "theme_auto": "道法自然",
+  "theme_auto_tip": "鼠標 右擊 可打開亮、暗主題設置窗口",
   "theme_black": "黑燈瞎火",
   "theme_blue": "藍田生玉",
   "theme_blue2": "清熱版藍",
@@ -423,6 +426,9 @@
   "theme_pink": "粉裝玉琢",
   "theme_purple": "重斤球紫",
   "theme_red": "熱情似火",
+  "theme_selector_modal__dark_title": "暗色主題",
+  "theme_selector_modal__light_title": "亮色主題",
+  "theme_selector_modal__title": "跟隨系統主題設置",
   "theme_yellow": "信口雌黃",
   "user_api__allow_show_update_alert": "允許顯示更新彈窗",
   "user_api__btn_export": "導出",

src/main/index.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell, nativeTheme } = require('electron')
 const path = require('path')
 
 const urlSchemeRxp = /^lxmusic:\/\//
@@ -180,7 +180,14 @@ function createWindow() {
     },
   })
 
-  global.modules.mainWindow.loadURL(winURL + `?dt=${!!global.envParams.cmdParams.dt}&theme=${themes.find(t => t.id == global.appSetting.themeId)?.className ?? themes[0].className}`)
+  const shouldUseDarkColors = nativeTheme.shouldUseDarkColors
+  const themeId = global.appSetting.theme.id == 'auto'
+    ? shouldUseDarkColors
+      ? global.appSetting.theme.darkId
+      : global.appSetting.theme.lightId
+    : global.appSetting.theme.id
+  const themeClass = themes.find(t => t.id == themeId)?.className ?? themes[0].className
+  global.modules.mainWindow.loadURL(winURL + `?dt=${!!global.envParams.cmdParams.dt}&dark=${shouldUseDarkColors}&theme=${themeClass}`)
 
   winEvent(global.modules.mainWindow)
   // global.modules.mainWindow.webContents.openDevTools()

src/main/rendererEvents/index.js

@@ -22,6 +22,7 @@ require('./musicUrl')
 require('./systemFonts')
 require('./wait')
 require('./openDevtools')
+require('./nativeTheme')
 
 if (isWin) require('./taskbar')
 

src/main/rendererEvents/nativeTheme.js

@@ -0,0 +1,11 @@
+const { nativeTheme } = require('electron')
+
+const { NAMES: { mainWindow: ipcMainWindowNames }, mainSend } = require('@common/ipc')
+
+nativeTheme.addListener('updated', (event) => {
+  // console.log(event.sender.shouldUseDarkColors)
+  if (!global.modules.mainWindow) return
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.system_theme_change, event.sender.shouldUseDarkColors)
+  // console.log(nativeTheme.themeSource)
+})
+

src/renderer/App.vue

@@ -38,8 +38,6 @@ export default {
 
     watch(theme, (val) => {
       dom_root.className = val
-    }, {
-      immediate: true,
     })
     watch(font, (val) => {
       document.documentElement.style.fontFamily = val

src/renderer/core/share/index.js

@@ -1,5 +1,5 @@
 import { ref, reactive, shallowRef, markRaw } from '@renderer/utils/vueTools'
-import { windowSizeList as configWindowSizeList, themes as configThemes } from '@common/config'
+import { windowSizeList as configWindowSizeList, themes as configThemes, themeLights as themeLightIds, themeDarks as themeDarkIds } from '@common/config'
 import { version } from '../../../../package.json'
 process.versions.app = version
 
@@ -40,6 +40,10 @@ export const isFullscreen = ref(false)
 
 export const windowSizeList = markRaw(configWindowSizeList)
 export const themes = markRaw(configThemes)
+export const themeLights = markRaw(configThemes.filter(t => themeLightIds.includes(t.id)))
+export const themeDarks = markRaw(configThemes.filter(t => themeDarkIds.includes(t.id)))
+export const themeShouldUseDarkColors = ref(window.shouldUseDarkColors)
+delete window.shouldUseDarkColors
 
 export const qualityList = shallowRef({})
 export const setQualityList = _qualityList => {

src/renderer/core/useApp/useEventListener.js

@@ -1,7 +1,7 @@
 import { openUrl } from '@renderer/utils'
 import { base as eventBaseName } from '@renderer/event/names'
-import { onSetConfig } from '@renderer/utils/tools'
+import { onSetConfig, onSystemThemeChange } from '@renderer/utils/tools'
-import { isFullscreen } from '@renderer/core/share'
+import { isFullscreen, themeShouldUseDarkColors } from '@renderer/core/share'
 import { rendererSend, NAMES, rendererInvoke } from '@common/ipc'
 
 import {
@@ -66,6 +66,11 @@ export default ({
     window.eventHub.emit(eventBaseName.set_config, config)
   })
 
+  const rSystemThemeChange = onSystemThemeChange((event, isDark) => {
+    // console.log(isDark)
+    themeShouldUseDarkColors.value = isDark
+  })
+
   window.eventHub.emit(eventBaseName.bindKey)
   window.eventHub.on('key_escape_down', handle_key_esc_down)
   window.eventHub.on('key_mod+f12_down', handle_open_devtools)
@@ -87,6 +92,7 @@ export default ({
     document.body.removeEventListener('click', handleBodyClick)
     window.eventHub.emit(eventBaseName.unbindKey)
     rSetConfig()
+    rSystemThemeChange()
 
     if (isProd && !window.dt && !isLinux) {
       document.body.removeEventListener('mouseenter', enableIgnoreMouseEvents)

src/renderer/index.html

@@ -6,12 +6,6 @@
   <title>洛雪音乐助手</title>
 </head>
 <body>
-  <script>
-    if (/theme=(\w+)/.test(window.location.href)) document.body.classList.add(RegExp.$1)
-    ;/dt=(\w+)/.exec(window.location.href)
-    window.dt = RegExp.$1 == 'true'
-    document.body.classList.add(window.dt ? 'disableTransparent' : 'transparent')
-  </script>
   <!-- <div id="waiting-mask">
     <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="50%" viewbox="0 0 447.942 447.943">
       <path id="logo-path-1" d="M203.806.482c-19.668-3.346-35.76 11.139-35.76 31.086v206.166c-11.642-4.271-24.165-6.725-37.281-6.725-59.905 0-108.469 48.566-108.469 108.473 0 59.903 48.564 108.461 108.469 108.461 34.141 0 64.54-15.82 84.406-40.482l-49.658-49.664c-15.116-15.112-11.708-28.901-9.542-34.14 2.166-5.233 9.514-17.4 30.883-17.4h18.082v-56.885c0-21.132 14.617-38.862 34.266-43.745.032-44.373.032-81.808.032-81.808 140.147 0 131.724 83.974 115.325 132.196-6.42 18.884-2.601 22.05 10.893 7.354C536.473 77.106 298.38 16.566 203.806.482z"/>
@@ -20,5 +14,11 @@
   </div> -->
   <div id="root" style="display: none;">
   </div>
+  <script>
+    if (/theme=(\w+)/.test(window.location.href)) document.getElementById('root').classList.add(RegExp.$1)
+    window.shouldUseDarkColors = /dark=true/.test(window.location.href)
+    window.dt = /dt=true/.test(window.location.href)
+    document.body.classList.add(window.dt ? 'disableTransparent' : 'transparent')
+  </script>
 </body>
 </html>

src/renderer/store/getters.js

@@ -1,17 +1,24 @@
 import music from '../utils/music'
-import { themes, windowSizeList } from '@renderer/core/share'
+import { themes, windowSizeList, themeShouldUseDarkColors } from '@renderer/core/share'
 
 export default {
   theme(state) {
-    let theme = themes.find(theme => theme.id == state.setting.themeId)
+    const themeId = state.setting.theme.id == 'auto'
-    return (theme && theme.className) || ''
+      ? themeShouldUseDarkColors.value
+        ? state.setting.theme.darkId
+        : state.setting.theme.lightId
+      : state.setting.theme.id
+    let theme = themes.find(theme => theme.id == themeId) ?? themes[0]
+    return theme.className
   },
   font(state) {
     return state.setting.font
   },
   themes(state) {
     return {
-      active: state.setting.themeId,
+      active: state.setting.theme.id,
+      lightId: state.setting.theme.lightId,
+      darkId: state.setting.theme.darkId,
       list: themes,
     }
   },

src/renderer/store/mutations.js

@@ -1,6 +1,6 @@
 export default {
   setTheme(state, val) {
-    state.setting.themeId = val
+    state.setting.theme.id = val
   },
   setSearchSource(state, { searchSource, tempSearchSource }) {
     console.log(searchSource, tempSearchSource)

src/renderer/utils/tools.js

@@ -323,3 +323,10 @@ export const setTaskbarThumbnailClip = (clip) => {
 export const setTaskbarThumbarButtons = (buttons) => {
   rendererSend(NAMES.mainWindow.taskbar_set_thumbar_buttons, buttons)
 }
+
+export const onSystemThemeChange = callback => {
+  rendererOn(NAMES.mainWindow.system_theme_change, callback)
+  return () => {
+    rendererOff(callback)
+  }
+}

src/renderer/views/setting/components/SettingBasic.vue

@@ -4,9 +4,15 @@ dd
   h3#basic_theme {{$t('setting__basic_theme')}}
   div
     ul(:class="$style.theme")
-      li(v-for="theme in themes.list" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.themeId = theme.id" :class="[theme.className, {[$style.active]: themes.active == theme.id}]")
+      li(v-for="theme in themes.list" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.id = theme.id" :class="[theme.className, {[$style.active]: themes.active == theme.id}]")
-        span
+        div(:class="$style.bg")
         label {{$t('theme_' + theme.className)}}
+      li(:tips="$t('theme_auto_tip')" @click="handleSetThemeAuto" @contextmenu="isShowThemeSelectorModal = true" :class="[$style.auto, themeClassName, {[$style.active]: themes.active == 'auto'}]")
+        div(:class="$style.bg")
+          div(:class="$style.bgContent")
+            div(:class="[$style.light, themes.lightTheme.className]")
+            div(:class="[$style.dark, themes.darkTheme.className]")
+        label {{$t('theme_auto')}}
 
 dd
   div
@@ -55,12 +61,13 @@ dd
   div
     base-selection.gap-teft(:list="fontList" v-model="currentStting.font" item-key="id" item-name="label")
 
+ThemeSelectorModal(v-model="isShowThemeSelectorModal")
 play-timeout-modal(v-model="isShowPlayTimeoutModal")
 user-api-modal(v-model="isShowUserApiModal")
 </template>
 
 <script>
-import { computed, ref, useI18n, watch } from '@renderer/utils/vueTools'
+import { computed, ref, useI18n, watch, useRefGetter } from '@renderer/utils/vueTools'
 import { themes as themeList, windowSizeList, apiSource, userApi, isFullscreen } from '@renderer/core/share'
 import { langList } from '@/lang'
 import { currentStting } from '../setting'
@@ -68,7 +75,9 @@ import { setWindowSize } from '@renderer/utils'
 import apiSourceInfo from '@renderer/utils/music/api-source-info'
 import { useTimeout } from '@renderer/utils/timeoutStop'
 import { getSystemFonts } from '@renderer/utils/tools'
+import { dialog } from '@renderer/plugins/Dialog'
 
+import ThemeSelectorModal from './ThemeSelectorModal'
 import PlayTimeoutModal from './PlayTimeoutModal'
 import UserApiModal from './UserApiModal'
 
@@ -76,19 +85,34 @@ import UserApiModal from './UserApiModal'
 export default {
   name: 'SettingBasic',
   components: {
+    ThemeSelectorModal,
     PlayTimeoutModal,
     UserApiModal,
   },
   setup() {
     const { t, locale } = useI18n()
 
-
+    const themeClassName = useRefGetter('theme')
     const themes = computed(() => {
       return {
-        active: currentStting.value.themeId,
+        active: currentStting.value.theme.id,
+        lightTheme: themeList.find(t => t.id == currentStting.value.theme.lightId) ?? themeList[0],
+        darkTheme: themeList.find(t => t.id == currentStting.value.theme.darkId) ?? themeList[0],
         list: themeList,
       }
     })
+    const isShowThemeSelectorModal = ref(false)
+    const handleSetThemeAuto = () => {
+      if (currentStting.value.theme.id == 'auto') return
+      currentStting.value.theme.id = 'auto'
+      if (window.localStorage.getItem('theme-auto-tip') != 'true') {
+        window.localStorage.setItem('theme-auto-tip', 'true')
+        dialog({
+          message: t('setting__basic_theme_auto_tip'),
+          confirmButtonText: t('ok'),
+        })
+      }
+    }
 
     watch(() => currentStting.value.apiSource, visible => {
       apiSource.value = visible
@@ -161,6 +185,9 @@ export default {
     return {
       currentStting,
       themes,
+      themeClassName,
+      isShowThemeSelectorModal,
+      handleSetThemeAuto,
       isShowPlayTimeoutModal,
       timeLabel,
       apiSources,
@@ -200,7 +227,7 @@ export default {
       margin-right: 0;
     }
 
-    span {
+    .bg {
       display: block;
       width: 36px;
       height: 36px;
@@ -230,7 +257,7 @@ export default {
 
     each(@themes, {
       &:global(.@{value}) {
-        span {
+        .bg {
           &:after {
             background-color: ~'@{color-@{value}-theme}';
             background-image: ~'@{color-@{value}-theme-bgimg}';
@@ -238,6 +265,68 @@ export default {
         }
       }
     })
+
+    &.auto {
+      >.bg {
+        &:after {
+          content: none;
+        }
+      }
+      .bgContent {
+        position: relative;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 5px;
+      }
+      .light, .dark {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        &:after {
+          display: block;
+          content: ' ';
+          width: 100%;
+          height: 100%;
+          background-position: center;
+          background-size: cover;
+          background-repeat: no-repeat;
+        }
+      }
+      .light {
+        &:after {
+          clip-path: polygon(0 0, 100% 0, 0 100%);
+        }
+        each(@themes, {
+          &:global(.@{value}) {
+            svg {
+              fill: ~'@{color-@{value}-theme}';
+            }
+            &:after {
+              background-color: ~'@{color-@{value}-theme}';
+              background-image: ~'@{color-@{value}-theme-bgimg}';
+            }
+          }
+        })
+      }
+      .dark {
+        &:after {
+          clip-path: polygon(0 100%, 100% 0, 100% 100%);
+        }
+        each(@themes, {
+          &:global(.@{value}) {
+            svg {
+              fill: ~'@{color-@{value}-theme}';
+            }
+            &:after {
+              background-color: ~'@{color-@{value}-theme}';
+              background-image: ~'@{color-@{value}-theme-bgimg}';
+            }
+          }
+        })
+      }
+    }
   }
 }
 
@@ -248,7 +337,7 @@ each(@themes, {
         &.active {
           &:global(.@{value}) {
             color: ~'@{color-@{value}-theme}';
-            span {
+            .bg {
               border-color: ~'@{color-@{value}-theme}';
             }
           }

src/renderer/views/setting/components/ThemeSelectorModal.vue

@@ -0,0 +1,160 @@
+<template lang="pug">
+material-modal(:show="modelValue" bg-close @close="$emit('update:modelValue', false)" teleport="#view")
+  main(:class="$style.main")
+    h2 {{$t('theme_selector_modal__title')}}
+    div.scroll(:class="$style.content")
+      div
+        h3 {{$t('theme_selector_modal__light_title')}}
+        ul(:class="$style.theme")
+          li(v-for="theme in themeLights" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.lightId = theme.id" :class="[theme.className, {[$style.active]: lightId == theme.id}]")
+            span
+            label {{$t('theme_' + theme.className)}}
+      div
+        h3 {{$t('theme_selector_modal__dark_title')}}
+        ul(:class="$style.theme")
+          li(v-for="theme in themeDarks" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.darkId = theme.id" :class="[theme.className, {[$style.active]: darkId == theme.id}]")
+            span
+            label {{$t('theme_' + theme.className)}}
+</template>
+
+<script>
+import { computed } from '@renderer/utils/vueTools'
+import { themeLights, themeDarks } from '@renderer/core/share'
+import { currentStting } from '../setting'
+
+export default {
+  name: 'ThemeSelectorModal',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const lightId = computed(() => {
+      return currentStting.value.theme.lightId
+    })
+    const darkId = computed(() => {
+      return currentStting.value.theme.darkId
+    })
+    return {
+      currentStting,
+      themeLights,
+      themeDarks,
+      lightId,
+      darkId,
+    }
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+.main {
+  // padding: 15px;
+  // max-width: 400px;
+  min-width: 300px;
+  min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+  h2 {
+    flex: none;
+    font-size: 16px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    text-align: center;
+    padding: 15px;
+  }
+  h3 {
+    font-size: 16px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    padding-bottom: 15px;
+    font-size: 15px;
+  }
+}
+.content {
+  flex: auto;
+  padding: 15px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 15px;
+}
+.theme {
+  display: flex;
+  flex-flow: row wrap;
+  // padding: 0 15px;
+
+  li {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    cursor: pointer;
+    // color: @color-theme;
+    margin-right: 30px;
+    transition: color .3s ease;
+    margin-bottom: 15px;
+    width: 56px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    span {
+      display: block;
+      width: 36px;
+      height: 36px;
+      margin-bottom: 5px;
+      border: 2px solid transparent;
+      padding: 2px;
+      transition: border-color .3s ease;
+      border-radius: 5px;
+      &:after {
+        display: block;
+        content: ' ';
+        width: 100%;
+        height: 100%;
+        border-radius: @radius-border;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+    }
+
+    label {
+      width: 100%;
+      text-align: center;
+      height: 1.2em;
+      font-size: 14px;
+      .mixin-ellipsis-1;
+    }
+
+    each(@themes, {
+      &:global(.@{value}) {
+        span {
+          &:after {
+            background-color: ~'@{color-@{value}-theme}';
+            background-image: ~'@{color-@{value}-theme-bgimg}';
+          }
+        }
+      }
+    })
+  }
+}
+
+each(@themes, {
+  .theme {
+    li {
+      &:global(.@{value}) {
+        &.active {
+          color: ~'@{color-@{value}-theme}';
+          span {
+            border-color: ~'@{color-@{value}-theme}';
+          }
+        }
+      }
+    }
+  }
+})
+
+</style>

src/renderer/views/setting/setting.js

@@ -86,7 +86,11 @@ export const currentStting = ref({
   },
   windowSizeId: 1,
   langId: 'cns',
-  themeId: 0,
+  theme: {
+    id: 0,
+    lightId: 0,
+    darkId: 13,
+  },
   sourceId: 0,
   font: '',
   isShowAnimation: true,

src/renderer/views/songList/SongList.vue

@@ -158,7 +158,7 @@ export default {
         this.sortId = this.sorts[0] && this.sorts[0].id
       }
     },
-    'setting.themeId'() {
+    'setting.theme.id'() {
       this.setTagListWidth()
     },
   },