caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add global night mode; 🌟

Browse Source 
新增：全局夜晚模式；
This commit is contained in:
iczer
2020-07-06 21:52:36 +08:00
parent 98e02874ed
commit 4063a4f08a
39 changed files with 480 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/config/config.js
View File

@@ -1,4 +1,5 @@
// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
module.exports = {
themeColor: '#13c2c2',
theme: 'night'
}

3
src/config/default/index.js
View File

@@ -1,4 +1,5 @@
const animates = require('./animates')
const setting = require('./setting')
const theme = require('./theme')
module.exports = {setting, animates}
module.exports = {setting, animates, theme}

64
src/config/default/theme.js Normal file
View File

@@ -0,0 +1,64 @@
// 亮色模式
const light = {
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'table-selected-row-bg': '#fafafa',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
}
// 暗色模式
const dark = {
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'table-selected-row-bg': '#fafafa',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
}
// 黑夜模式
const night = {
'layout-body-background': '#000',
'body-background': '#141414',
'component-background': '#141414',
'heading-color': 'rgba(255, 255, 255, 0.85)',
'text-color': 'rgba(255, 255, 255, 0.85)',
'text-color-inverse': '#141414',
'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
'shadow-color': 'rgba(255, 255, 255, 0.15)',
'border-color-split': '#303030',
'background-color-light': '#404040',
'table-selected-row-bg': '#404040',
'checkbox-check-color': '#141414',
'disabled-color': 'rgba(255, 255, 255, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#141414',
}
module.exports = {light, dark, night}