Skip to content
This repository was archived by the owner on Oct 1, 2023. It is now read-only.

Commit a81b291

Browse files
tolkingtolking
committed
refactor: defaultTheme
1 parent 2300403 commit a81b291

File tree

4 files changed

+85
-22
lines changed

4 files changed

+85
-22
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
[README](README.md) | [CHANGELOG](CHANGELOG.md)
44

5+
## 1.1.0
6+
7+
- remove `css-prefers-color-scheme`
8+
- refactor `defaultTheme`
9+
10+
```
11+
defaultTheme: 'light' -> <html theme="light">
12+
defaultTheme: 'dark' -> <html theme="dark">
13+
```
14+
515
## 1.0.9
616

717
- fix styles

‎docs/.vuepress/config.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,4 @@ module.exports = {
5858
}
5959
}
6060
}
61-
// postcss: {
62-
// plugins: [
63-
// require('css-prefers-color-scheme/postcss'),
64-
// require('autoprefixer')
65-
// ]
66-
// }
6761
}

‎layouts/Layout.vue‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@ export default {
99
components: {
1010
ParentLayout
1111
},
12-
data() {
13-
return {
14-
colorScheme: {}
15-
}
16-
},
1712
computed: {
1813
defaultTheme() {
1914
const _defaultTheme = this.$themeConfig.defaultTheme
@@ -42,16 +37,7 @@ export default {
4237
},
4338
beforeMount() {
4439
if (this.defaultTheme) {
45-
const prefersColorScheme = require('css-prefers-color-scheme').default
46-
this.colorScheme = prefersColorScheme(this.defaultTheme)
47-
}
48-
},
49-
mounted() {
50-
// Prevent styles in index.styl not work
51-
if (this.defaultTheme) {
52-
window.onload = function() {
53-
this.colorScheme.scheme = this.defaultTheme
54-
}.bind(this)
40+
document.getElementsByTagName('html')[0].setAttribute('theme', this.defaultTheme)
5541
}
5642
}
5743
}

‎styles/index.styl‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
--highlightedBgColor $highlightedBgLightColor
4444
--languageTextColor $languageTextLightColor
4545
--lineNumbersColor $lineNumbersLightColor
46-
--lighten20TextColor lighten($textColor, 20%)
4746

4847
@media (prefers-color-scheme dark)
4948
--accentColor $accentDarkColor
@@ -77,6 +76,80 @@
7776
--darken10BgColor lighten($bgDarkColor, 5%)
7877
--darken10BorderColor darken($borderDarkColor, 10%)
7978

79+
html[theme='light']
80+
--accentColor $accentColor
81+
--textColor $textColor
82+
--borderColor $borderColor
83+
--codeBgColor $codeBgLightColor
84+
--arrowBgColor $arrowBgColor
85+
--badgeTipColor $badgeTipColor
86+
--badgeWarningColor $badgeWarningColor
87+
--badgeErrorColor $badgeErrorColor
88+
--bgColor $bgColor
89+
--kbdBgColor $kbdBgColor
90+
--blockquoteTextColor $blockquoteTextColor
91+
--blockquoteBorderColor $blockquoteBorderColor
92+
--tableBorderColor $tableBorderColor
93+
--tableStripeBgColor $tableStripeBgColor
94+
--preTextColor $preTextLightColor
95+
--highlightedBgColor $highlightedBgLightColor
96+
--languageTextColor $languageTextLightColor
97+
--lineNumbersColor $lineNumbersLightColor
98+
--tipColor $tipColor
99+
--tipBgColor $tipBgColor
100+
--warningColor $warningColor
101+
--warningBgColor $warningBgColor
102+
--dangerColor $dangerColor
103+
--dangerBgColor $dangerBgColor
104+
--miniCodeBgColor $miniCodeBgColor
105+
--searchBorderColor $searchBorderColor
106+
--lighten10AccentColor lighten($accentColor, 10%)
107+
--lighten10TextColor lighten($textColor, 10%)
108+
--lighten20TextColor lighten($textColor, 20%)
109+
--lighten25TextColor lighten($textColor, 25%)
110+
--lighten35TextColor lighten($textColor, 35%)
111+
--lighten40TextColor lighten($textColor, 40%)
112+
--darken10AccentColor darken($accentColor, 10%)
113+
--darken10BgColor darken($bgColor, 5%)
114+
--darken10BorderColor darken($borderColor, 10%)
115+
116+
html[theme='dark']
117+
--accentColor $accentDarkColor
118+
--textColor $textDarkColor
119+
--borderColor $borderDarkColor
120+
--codeBgColor $codeBgColor
121+
--arrowBgColor $arrowBgDarkColor
122+
--badgeTipColor $badgeTipDarkColor
123+
--badgeWarningColor $badgeWarningDarkColor
124+
--badgeErrorColor $badgeErrorDarkColor
125+
--bgColor $bgDarkColor
126+
--kbdBgColor $kbdBgDarkColor
127+
--blockquoteTextColor $blockquoteTextDarkColor
128+
--blockquoteBorderColor $blockquoteBorderDarkColor
129+
--tableBorderColor $tableBorderDarkColor
130+
--tableStripeBgColor $tableStripeBgDarkColor
131+
--preTextColor $preTextColor
132+
--highlightedBgColor $highlightedBgColor
133+
--languageTextColor $languageTextColor
134+
--lineNumbersColor $lineNumbersColor
135+
--tipColor $tipDarkColor
136+
--tipBgColor $tipBgDarkColor
137+
--warningColor $warningDarkColor
138+
--warningBgColor $warningBgDarkColor
139+
--dangerColor $dangerDarkColor
140+
--dangerBgColor $dangerBgDarkColor
141+
--miniCodeBgColor $miniCodeBgDarkColor
142+
--searchBorderColor $searchBorderDarkColor
143+
--lighten10AccentColor lighten($accentDarkColor, 10%)
144+
--lighten10TextColor lighten($textDarkColor, 10%)
145+
--lighten20TextColor lighten($textDarkColor, 20%)
146+
--lighten25TextColor lighten($textDarkColor, 25%)
147+
--lighten35TextColor lighten($textDarkColor, 35%)
148+
--lighten40TextColor lighten($textDarkColor, 40%)
149+
--darken10AccentColor darken($accentDarkColor, 10%)
150+
--darken10BgColor darken($bgDarkColor, 5%)
151+
--darken10BorderColor darken($borderDarkColor, 10%)
152+
80153
html
81154
body
82155
.navbar

0 commit comments

Comments
 (0)