feat: follow system theme (#403)
parent
6a5edf44bc
commit
82089563e4
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import createMenus from '@/view/router/menu'
|
import createMenus from '@/view/router/menu'
|
||||||
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
||||||
|
import { colorTheme } from './composables/theme'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
@ -16,12 +17,20 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
themeClass () {
|
themeClass () {
|
||||||
return `theme-${this.config.app.theme}`
|
return `theme-${colorTheme.value}`
|
||||||
},
|
},
|
||||||
theme () {
|
theme () {
|
||||||
return this.config.app.theme
|
return colorTheme.value
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
mounted () {
|
||||||
|
let theme = this.config.app.theme
|
||||||
|
if (this.config.app.theme === 'system') {
|
||||||
|
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||||
|
}
|
||||||
|
|
||||||
|
colorTheme.value = theme
|
||||||
|
},
|
||||||
created () {
|
created () {
|
||||||
this.menus = createMenus(this)
|
this.menus = createMenus(this)
|
||||||
this.config = this.$global.config
|
this.config = this.$global.config
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export const colorTheme = ref('dark')
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { ipcRenderer } from 'electron'
|
import { ipcRenderer } from 'electron'
|
||||||
import Plugin from '../mixins/plugin'
|
import Plugin from '../mixins/plugin'
|
||||||
|
import { colorTheme } from '../composables/theme'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Setting',
|
name: 'Setting',
|
||||||
|
@ -10,19 +11,12 @@ export default {
|
||||||
key: 'app',
|
key: 'app',
|
||||||
removeUserConfigLoading: false,
|
removeUserConfigLoading: false,
|
||||||
reloadLoading: false,
|
reloadLoading: false,
|
||||||
themeBackup: null,
|
|
||||||
urlBackup: null,
|
urlBackup: null,
|
||||||
personalUrlBackup: null,
|
personalUrlBackup: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
ready (config) {
|
ready (config) {
|
||||||
this.themeBackup = config.app.theme
|
|
||||||
this.urlBackup = config.app.remoteConfig.url
|
this.urlBackup = config.app.remoteConfig.url
|
||||||
this.personalUrlBackup = config.app.remoteConfig.personalUrl
|
this.personalUrlBackup = config.app.remoteConfig.personalUrl
|
||||||
},
|
},
|
||||||
|
@ -187,15 +181,17 @@ export default {
|
||||||
async applyAfter () {
|
async applyAfter () {
|
||||||
let reloadLazy = 10
|
let reloadLazy = 10
|
||||||
|
|
||||||
|
let theme = this.config.app.theme
|
||||||
|
if (theme === 'system') {
|
||||||
|
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||||
|
}
|
||||||
|
colorTheme.value = theme
|
||||||
|
|
||||||
// 判断远程配置地址是否变更过,如果是则重载远程配置并重启服务
|
// 判断远程配置地址是否变更过,如果是则重载远程配置并重启服务
|
||||||
if (this.config.app.remoteConfig.url !== this.urlBackup || this.config.app.remoteConfig.personalUrl !== this.personalUrlBackup) {
|
if (this.config.app.remoteConfig.url !== this.urlBackup || this.config.app.remoteConfig.personalUrl !== this.personalUrlBackup) {
|
||||||
await this.$api.config.downloadRemoteConfig()
|
await this.$api.config.downloadRemoteConfig()
|
||||||
await this.reloadConfigAndRestart()
|
await this.reloadConfigAndRestart()
|
||||||
reloadLazy = 300
|
reloadLazy = 300
|
||||||
}
|
|
||||||
|
|
||||||
// 判断是否切换了主题,如果是,则刷新页面
|
|
||||||
if (this.config.app.theme !== this.themeBackup) {
|
|
||||||
setTimeout(() => window.location.reload(), reloadLazy)
|
setTimeout(() => window.location.reload(), reloadLazy)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -264,7 +260,7 @@ export default {
|
||||||
this.$confirm({
|
this.$confirm({
|
||||||
title: '确定要恢复出厂设置吗?',
|
title: '确定要恢复出厂设置吗?',
|
||||||
width: 610,
|
width: 610,
|
||||||
content: (h) => (
|
content: h => (
|
||||||
<div class="restore-factory-settings">
|
<div class="restore-factory-settings">
|
||||||
<hr />
|
<hr />
|
||||||
<p>
|
<p>
|
||||||
|
@ -376,6 +372,9 @@ export default {
|
||||||
<a-radio-button value="dark" title="dark">
|
<a-radio-button value="dark" title="dark">
|
||||||
暗色
|
暗色
|
||||||
</a-radio-button>
|
</a-radio-button>
|
||||||
|
<a-radio-button value="system" title="system">
|
||||||
|
跟随系统
|
||||||
|
</a-radio-button>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="首页提示" :label-col="labelCol" :wrapper-col="wrapperCol">
|
<a-form-item label="首页提示" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
|
Loading…
Reference in New Issue