Skip to content

Commit 0847c88

Browse files
sheepzhsheepzh
committed
Support dark mode from element-plus (#77)
1 parent 2ec5a05 commit 0847c88

File tree

10 files changed

+132
-107
lines changed

10 files changed

+132
-107
lines changed

‎src/app/components/option/components/appearance/index.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import type { Ref } from "vue"
99

10-
import { ElDivider, ElIcon, ElMessageBox, ElOption, ElSelect, ElSwitch, ElTimePicker, ElTooltip } from "element-plus"
10+
import { ElDivider, ElIcon, ElMessageBox, ElOption, ElSelect, ElSwitch, ElTooltip } from "element-plus"
1111
import { defineComponent, h, ref } from "vue"
1212
import optionService from "@service/option-service"
1313
import { defaultAppearance } from "@util/constant/option"
@@ -17,6 +17,7 @@ import { renderOptionItem, tagText } from "../../common"
1717
import localeMessages from "@util/i18n/components/locale"
1818
import { InfoFilled } from "@element-plus/icons-vue"
1919
import { localeSameAsBrowser } from "@util/i18n"
20+
import { toggle } from "@util/dark-mode"
2021

2122
const displayWhitelist = (option: Ref<Timer.AppearanceOption>) => h(ElSwitch, {
2223
modelValue: option.value.displayWhitelistMenu,
@@ -100,11 +101,12 @@ const _default = defineComponent({
100101
modelValue: option.value.darkMode,
101102
startSecond: option.value.darkModeTimeStart,
102103
endSecond: option.value.darkModeTimeEnd,
103-
onChange: (darkMode, range) => {
104+
onChange: async (darkMode, range) => {
104105
option.value.darkMode = darkMode
105106
option.value.darkModeTimeStart = range?.[0]
106107
option.value.darkModeTimeEnd = range?.[1]
107-
optionService.setAppearanceOption(option.value)
108+
await optionService.setAppearanceOption(option.value)
109+
toggle(await optionService.isDarkMode())
108110
}
109111
}),
110112
info: h(ElTooltip, {}, {

‎src/app/components/option/style/index.sass‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,10 @@
3030
.el-input__wrapper
3131
height: 26px
3232
.option-label
33+
color: var(--el-text-color-primary)
3334
float: left
3435
.option-default
36+
color: var(--el-text-color-primary)
3537
float: right
3638
.el-tag
3739
height: 20px

‎src/app/components/report/table/columns/operation.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,7 @@ const _default = defineComponent({
6060
return () => h(ElTableColumn, {
6161
width: width.value,
6262
label: columnLabel,
63-
align: "center",
64-
fixed: "right"
63+
align: "center"
6564
}, {
6665
default: ({ row }: { row: DataItem }) => [
6766
// Trend

‎src/app/index.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import installRouter from "./router"
1616
import '../common/timer'
1717
import ElementPlus from 'element-plus'
1818
import { initLocale, locale as appLocale } from "@util/i18n"
19-
import processDarkMode from "./theme"
19+
import { toggle, init as initTheme } from "@util/dark-mode"
20+
import optionService from "@service/option-service"
2021

2122
const locales: { [locale in Timer.Locale]: () => Promise<{ default: Language }> } = {
2223
zh_CN: () => import('element-plus/lib/locale/lang/zh-cn'),
@@ -26,11 +27,14 @@ const locales: { [locale in Timer.Locale]: () => Promise<{ default: Language }>
2627
}
2728

2829
async function main() {
30+
// Init theme with cache first
31+
initTheme()
32+
// Calculate the latest mode
33+
optionService.isDarkMode().then(toggle)
2934
await initLocale()
3035
const app: App = createApp(Main)
3136
installRouter(app)
3237
app.mount('#app')
33-
processDarkMode()
3438

3539
locales[appLocale]?.()?.then(locale => app.use(ElementPlus, { locale: locale.default }))
3640
}

‎src/app/styles/compatible.sass‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
* https://opensource.org/licenses/MIT
66
*/
77

8-
// Compatible for element-ui
8+
// Compatible element-plus 2.x.x for element-ui
9+
910
.el-button--small
1011
min-height: 28px
1112
padding: 7px 15px

‎src/app/styles/dark-theme.sass‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
html[data-theme='dark']:root
2+
--el-color-primary: #409eff
3+
--el-color-primary-light-3: #3375b9
4+
--el-color-primary-light-5: #2a598a
5+
--el-color-primary-light-7: #213d5b
6+
--el-color-primary-light-8: #1d3043
7+
--el-color-primary-light-9: #18222c
8+
--el-color-primary-dark-2: #66b1ff
9+
--el-color-success: #67c23a
10+
--el-color-success-light-3: #4e8e2f
11+
--el-color-success-light-5: #3e6b27
12+
--el-color-success-light-7: #2d481f
13+
--el-color-success-light-8: #25371c
14+
--el-color-success-light-9: #1c2518
15+
--el-color-success-dark-2: #85ce61
16+
--el-color-warning: #e6a23c
17+
--el-color-warning-light-3: #a77730
18+
--el-color-warning-light-5: #7d5b28
19+
--el-color-warning-light-7: #533f20
20+
--el-color-warning-light-8: #3e301c
21+
--el-color-warning-light-9: #292218
22+
--el-color-warning-dark-2: #ebb563
23+
--el-color-danger: #f56c6c
24+
--el-color-danger-light-3: #b25252
25+
--el-color-danger-light-5: #854040
26+
--el-color-danger-light-7: #582e2e
27+
--el-color-danger-light-8: #412626
28+
--el-color-danger-light-9: #2b1d1d
29+
--el-color-danger-dark-2: #f78989
30+
--el-color-error: #f56c6c
31+
--el-color-error-light-3: #b25252
32+
--el-color-error-light-5: #854040
33+
--el-color-error-light-7: #582e2e
34+
--el-color-error-light-8: #412626
35+
--el-color-error-light-9: #2b1d1d
36+
--el-color-error-dark-2: #f78989
37+
--el-color-info: #909399
38+
--el-color-info-light-3: #6b6d71
39+
--el-color-info-light-5: #525457
40+
--el-color-info-light-7: #393a3c
41+
--el-color-info-light-8: #2d2d2f
42+
--el-color-info-light-9: #202121
43+
--el-color-info-dark-2: #a6a9ad
44+
--el-box-shadow: 0px 12px 32px 4px rgba(0 0 0 .36) 0px 8px 20px rgba(0 0 0 .72)
45+
--el-box-shadow-light: 0px 0px 12px rgba(0 0 0 .72)
46+
--el-box-shadow-lighter: 0px 0px 6px rgba(0 0 0 .72)
47+
--el-box-shadow-dark: 0px 16px 48px 16px rgba(0 0 0 .72) 0px 12px 32px #000000 0px 8px 16px -8px #000000
48+
--el-bg-color-page: #0a0a0a
49+
--el-bg-color: #141414
50+
--el-bg-color-overlay: #1d1e1f
51+
--el-text-color-primary: #E5EAF3
52+
--el-text-color-regular: #CFD3DC
53+
--el-text-color-secondary: #A3A6AD
54+
--el-text-color-placeholder: #8D9095
55+
--el-text-color-disabled: #6C6E72
56+
--el-border-color-darker: #636466
57+
--el-border-color-dark: #58585B
58+
--el-border-color: #4C4D4F
59+
--el-border-color-light: #414243
60+
--el-border-color-lighter: #363637
61+
--el-border-color-extra-light: #2B2B2C
62+
--el-fill-color-darker: #424243
63+
--el-fill-color-dark: #39393A
64+
--el-fill-color: #303030
65+
--el-fill-color-light: #262727
66+
--el-fill-color-lighter: #1D1D1D
67+
--el-fill-color-extra-light: #191919
68+
--el-fill-color-blank: var(--el-fill-color-darker)
69+
--el-mask-color: rgba(0 0 0 .8)
70+
--el-mask-color-extra-light: rgba(0 0 0 .3)
71+
// timer
72+
--timer-app-container-bg-color: var(--el-fill-color-dark)
73+
// element-plus
74+
.el-switch__core .el-switch__action
75+
background-color: var(--el-fill-color-darker)

‎src/app/styles/index.sass‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* https://opensource.org/licenses/MIT
66
*/
77

8+
@import "./dark-theme"
89
@import "./compatible"
910

1011
body
@@ -34,6 +35,7 @@ a
3435

3536
.app-container
3637
width: 100%
38+
background: var(--timer-app-container-bg-color)
3739
margin: auto
3840

3941
.content-container
@@ -138,3 +140,4 @@ a
138140
--el-menu-text-color: #c1c6c8
139141
--el-menu-active-color: var(--el-menu-text-color)
140142
--el-menu-hover-bg-color: #262f3e
143+
--timer-app-container-bg-color: var(--el-fill-color-blank)

‎src/app/theme/dark-theme.json‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎src/app/theme/index.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/util/dark-mode.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* Copyright (c) 2022 Hengyang Zhang
3+
*
4+
* This software is released under the MIT License.
5+
* https://opensource.org/licenses/MIT
6+
*/
7+
8+
/**
9+
* Dark mode
10+
*
11+
* @since 1.1.0
12+
*/
13+
14+
const THEME_ATTR = "data-theme"
15+
const DARK_VAL = "dark"
16+
const STORAGE_KEY = "isDark"
17+
const STORAGE_FLAG = "1"
18+
19+
function toggle0(isDarkMode: boolean) {
20+
const htmlEl = document.getElementsByTagName("html")?.[0]
21+
htmlEl.setAttribute(THEME_ATTR, isDarkMode ? DARK_VAL : "")
22+
}
23+
24+
/**
25+
* Init from local storage
26+
*/
27+
export function init() {
28+
toggle0(isDarkMode())
29+
}
30+
31+
export function toggle(isDarkMode: boolean) {
32+
toggle0(isDarkMode)
33+
localStorage.setItem(STORAGE_KEY, isDarkMode ? STORAGE_FLAG : undefined)
34+
}
35+
36+
export function isDarkMode() {
37+
return localStorage.getItem(STORAGE_KEY) === STORAGE_FLAG
38+
}

0 commit comments

Comments
 (0)