diff --git a/publish/changeLog.md b/publish/changeLog.md index e0e154e4..5a1bf032 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -3,6 +3,7 @@ - 新增对播放详情页歌词大小、是否缩放、对齐方式的设置，可以去设置-播放详情页设置查看 - 新增播放详情页通过歌词调整播放进度，默认关闭，需要到设置-播放详情页设置开启，开启后在播放详情页拖动歌词时将会出现跳转当前行歌词播放的按钮 - 新增全屏状态，按F11可以进入、退出全屏状态，由于全屏时会隐藏控制栏按钮，所以需要使用鼠标右键双击（详情页的任意地方都可以）来关闭播放详情页 +- 新增动态主题“道法自然”，你可以预先设置一个亮色主题及暗色主题，此后将自动根据系统的亮、暗主题色自动切换为你预先设置的相应主题。注：鼠标 右击 此主题项即可打开亮、暗色主题设置窗口。 ### 优化 diff --git a/src/common/config.js b/src/common/config.js index ad870979..a7e897c2 100644 --- a/src/common/config.js +++ b/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], } diff --git a/src/common/defaultSetting.js b/src/common/defaultSetting.js index 400c231e..6e075811 100644 --- a/src/common/defaultSetting.js +++ b/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 } diff --git a/src/common/ipcNames.js b/src/common/ipcNames.js index 1c44be15..0277fee9 100644 --- a/src/common/ipcNames.js +++ b/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', diff --git a/src/common/utils.js b/src/common/utils.js index 074e7f0c..43a5b7cd 100644 --- a/src/common/utils.js +++ b/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 后 diff --git a/src/lang/en-us.json b/src/lang/en-us.json index 09961864..c238519d 100644 --- a/src/lang/en-us.json +++ b/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", diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json index b5627c63..66595a34 100644 --- a/src/lang/zh-cn.json +++ b/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": "导出", diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json index 48d7242f..7f835678 100644 --- a/src/lang/zh-tw.json +++ b/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": "導出", diff --git a/src/main/index.js b/src/main/index.js index a4b0ec75..2bc5bff5 100644 --- a/src/main/index.js +++ b/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() diff --git a/src/main/rendererEvents/index.js b/src/main/rendererEvents/index.js index c5f870e4..76ab96a1 100644 --- a/src/main/rendererEvents/index.js +++ b/src/main/rendererEvents/index.js @@ -22,6 +22,7 @@ require('./musicUrl') require('./systemFonts') require('./wait') require('./openDevtools') +require('./nativeTheme') if (isWin) require('./taskbar') diff --git a/src/main/rendererEvents/nativeTheme.js b/src/main/rendererEvents/nativeTheme.js new file mode 100644 index 00000000..1d3880b8 --- /dev/null +++ b/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) +}) + diff --git a/src/renderer/App.vue b/src/renderer/App.vue index ee90cf3e..c8654519 100644 --- a/src/renderer/App.vue +++ b/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 diff --git a/src/renderer/core/share/index.js b/src/renderer/core/share/index.js index 1223c5b6..3ade3d11 100644 --- a/src/renderer/core/share/index.js +++ b/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 => { diff --git a/src/renderer/core/useApp/useEventListener.js b/src/renderer/core/useApp/useEventListener.js index 3d91f625..f8fa6383 100644 --- a/src/renderer/core/useApp/useEventListener.js +++ b/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 { isFullscreen } from '@renderer/core/share' +import { onSetConfig, onSystemThemeChange } from '@renderer/utils/tools' +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) diff --git a/src/renderer/index.html b/src/renderer/index.html index ab9d8531..9d0c8913 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -6,12 +6,6 @@ 洛雪音乐助手 - + diff --git a/src/renderer/store/getters.js b/src/renderer/store/getters.js index 1d322008..a3426862 100644 --- a/src/renderer/store/getters.js +++ b/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) - return (theme && theme.className) || '' + const themeId = state.setting.theme.id == 'auto' + ? 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, } }, diff --git a/src/renderer/store/mutations.js b/src/renderer/store/mutations.js index b909451e..408dc9d9 100644 --- a/src/renderer/store/mutations.js +++ b/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) diff --git a/src/renderer/utils/tools.js b/src/renderer/utils/tools.js index f7c58782..eb7dd4d3 100644 --- a/src/renderer/utils/tools.js +++ b/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) + } +} diff --git a/src/renderer/views/setting/components/SettingBasic.vue b/src/renderer/views/setting/components/SettingBasic.vue index 6eef961e..5517386f 100644 --- a/src/renderer/views/setting/components/SettingBasic.vue +++ b/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}]") - span + 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}]") + 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") + + diff --git a/src/renderer/views/setting/setting.js b/src/renderer/views/setting/setting.js index 93c6ff10..4f518198 100644 --- a/src/renderer/views/setting/setting.js +++ b/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, diff --git a/src/renderer/views/songList/SongList.vue b/src/renderer/views/songList/SongList.vue index 6b021345..cd554a33 100644 --- a/src/renderer/views/songList/SongList.vue +++ b/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() }, },