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

Commit f3ddb45

Browse files
tolkingtolking
authored
Merge pull request #19 from tolking/dev
refactor: defaultTheme
2 parents 168b684 + eda3253 commit f3ddb45

File tree

8 files changed

+96
-59
lines changed

8 files changed

+96
-59
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

‎README.md‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,11 @@ module.exports = {
5555
defaultTheme: { dark: [18, 6] },
5656
// or
5757
defaultTheme: { light: [6, 18], dark: [18, 6] },
58-
},
59-
// When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js
60-
postcss: {
61-
plugins: [
62-
require('css-prefers-color-scheme/postcss'),
63-
require('autoprefixer')
64-
]
6558
}
6659
}
6760
```
6861

69-
[Theme Config](https://v1.vuepress.vuejs.org/theme/default-theme-config.html)
62+
[Theme Config](https://vuepress.vuejs.org/theme/default-theme-config.html)
7063

7164
## Styling
7265

@@ -77,7 +70,3 @@ To apply simple color overrides to the styling of the [default preset](https://g
7770
## License
7871

7972
[MIT](http://opensource.org/licenses/MIT)
80-
81-
## Keywords
82-
83-
vue vuepress documentation prefers-color-scheme default-theme light-theme dark-theme

‎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
}

‎docs/README.md‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
## Introduction
22

3-
vuepress-theme-default-prefers-color-scheme is a theme that adds `light` and `dark` themes to the [default theme](https://v1.vuepress.vuejs.org/zh/theme/default-theme-config.html) of vuepress
3+
vuepress-theme-default-prefers-color-scheme is a theme that adds `light` and `dark` themes to the [default theme](https://vuepress.vuejs.org/zh/theme/default-theme-config.html) of vuepress
44

55
## How It Works
66

7-
base on [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) and [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
7+
base on prefers-color-scheme and CSS Variables
88

99
#### View Support Browsers
1010

@@ -45,7 +45,7 @@ module.exports = {
4545
- Required: `false`
4646

4747
::: tip
48-
By default, light or dark themes are displayed by [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), You can change it by `defaultTheme`. base on [css-prefers-color-scheme](https://github.com/csstools/css-prefers-color-scheme)
48+
By default, light or dark themes are displayed by [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), You can change it by `defaultTheme`.
4949
:::
5050

5151
support `light`, `dark` or `{ theme: [begin hours, end hours] }`
@@ -59,18 +59,11 @@ module.exports = {
5959
defaultTheme: { dark: [18, 6] },
6060
// or
6161
defaultTheme: { light: [6, 18], dark: [18, 6] },
62-
},
63-
// When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js
64-
postcss: {
65-
plugins: [
66-
require('css-prefers-color-scheme/postcss'),
67-
require('autoprefixer')
68-
]
6962
}
7063
}
7164
```
7265

73-
[Theme Config](https://v1.vuepress.vuejs.org/theme/default-theme-config.html)
66+
[Theme Config](https://vuepress.vuejs.org/theme/default-theme-config.html)
7467

7568
## Styling
7669

‎docs/zh/README.md‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
## 介绍
22

3-
vuepress-theme-default-prefers-color-scheme 是一款为 [vuepress 默认主题](https://v1.vuepress.vuejs.org/zh/theme/default-theme-config.html) 增加 `浅色` 与 `深色` 主题的一款主题
3+
vuepress-theme-default-prefers-color-scheme 是一款为 [vuepress 默认主题](https://vuepress.vuejs.org/zh/theme/default-theme-config.html) 增加 `浅色` 与 `深色` 主题的一款主题
44

55
## 原理
66

7-
主要是基于下一代 css 技术中的 [prefers-color-scheme](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) 与 [CSS Variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*) 实现。
7+
主要是基于下一代 css 技术中的 prefers-color-scheme 与 CSS Variables 实现。
88

99
#### 查看支持浏览器
1010

@@ -45,7 +45,7 @@ module.exports = {
4545
- 可省略
4646

4747
::: tip
48-
默认情况下，要显示浅色或深色主题由 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 决定, 你可以通过设置 `defaultTheme` 来指定显示的主题颜色。基于 [css-prefers-color-scheme](https://github.com/csstools/css-prefers-color-scheme)
48+
默认情况下，要显示浅色或深色主题由 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 决定, 你可以通过设置 `defaultTheme` 来指定显示的主题颜色
4949
:::
5050

5151
支持 `light`, `dark` 或者 `{ theme: [begin hours, end hours] }`
@@ -59,18 +59,11 @@ module.exports = {
5959
defaultTheme: { dark: [18, 6] },
6060
// or
6161
defaultTheme: { light: [6, 18], dark: [18, 6] },
62-
},
63-
// 当你指定了显示主题的颜色时，你需要增加如下的 postcss 插件
64-
postcss: {
65-
plugins: [
66-
require('css-prefers-color-scheme/postcss'),
67-
require('autoprefixer')
68-
]
6962
}
7063
}
7164
```
7265

73-
其它配置与 [官方主题配置](https://v1.vuepress.vuejs.org/theme/default-theme-config.html) 相同
66+
其它配置与 [官方主题配置](https://vuepress.vuejs.org/theme/default-theme-config.html) 相同
7467

7568
## 样式
7669

‎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
}

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuepress-theme-default-prefers-color-scheme",
3-
"version": "1.0.9",
3+
"version": "1.1.0",
44
"main": "index.js",
55
"description": "add prefers-color-scheme for vuepress default theme",
66
"author": "tolking <[email protected]>",
@@ -17,11 +17,10 @@
1717
"build": "vuepress build docs"
1818
},
1919
"keywords": [
20-
"vue",
2120
"vuepress",
21+
"vuepress-theme",
2222
"documentation",
2323
"prefers-color-scheme",
24-
"default-theme",
2524
"light-theme",
2625
"dark-theme"
2726
],

‎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)