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

Commit 4148350

Browse files
tolkingtolking
committed
doc: add docs
1 parent 8ad817b commit 4148350

File tree

9 files changed

+233
-5
lines changed

9 files changed

+233
-5
lines changed

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
node_modules/
99
test/
1010
dist/
11+
docs/
1112
examples/
1213
npm-debug.log
1314
yarn-error.log

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010

1111
---
1212

13-
![light.jpg](./examples/public/img/light.jpg)
13+
![light.jpg](./docs/.vuepress/public/img/light.jpg)
1414

15-
![light.jpg](./examples/public/img/dark.jpg)
15+
![light.jpg](./docs/.vuepress/public/img/dark.jpg)
1616

1717
---
1818

‎docs/.vuepress/config.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
module.exports = {
2+
base: '/vuepress-theme-default-prefers-color-scheme/',
3+
title: 'vuepress-theme-default-prefers-color-scheme',
4+
description: 'add prefers-color-scheme for vuepress default theme',
5+
dest: 'dist/',
6+
evergreen: true,
7+
theme: require.resolve('../../'),
8+
markdown: {
9+
lineNumbers: true
10+
},
11+
locales: {
12+
'/': {
13+
lang: 'en-US',
14+
title: 'vuepress-theme-default-prefers-color-scheme',
15+
description: 'add prefers-color-scheme for vuepress default theme'
16+
},
17+
'/zh/': {
18+
lang: 'zh-CN',
19+
title: 'vuepress-theme-default-prefers-color-scheme',
20+
description: '为 vuepress 的默认主题增加 prefers-color-scheme'
21+
}
22+
},
23+
themeConfig: {
24+
defaultTheme: { dark: [19, 6] },
25+
repo: 'tolking/vuepress-theme-default-prefers-color-scheme',
26+
docsDir: 'examples',
27+
editLinks: true,
28+
locales: {
29+
'/': {
30+
selectText: 'Languages',
31+
label: 'English',
32+
editLinkText: 'Edit this page on GitHub',
33+
lastUpdated: 'Last Updated',
34+
serviceWorker: {
35+
updatePopup: {
36+
message: "New content is available.",
37+
buttonText: "Refresh"
38+
}
39+
},
40+
sidebar: [
41+
'/'
42+
]
43+
},
44+
'/zh/': {
45+
selectText: '选择语言',
46+
label: '简体中文',
47+
editLinkText: '在 GitHub 上编辑此页',
48+
lastUpdated: '最后更新时间',
49+
serviceWorker: {
50+
updatePopup: {
51+
message: "发现新内容可用.",
52+
buttonText: "刷新"
53+
}
54+
},
55+
sidebar: [
56+
'/zh/'
57+
]
58+
}
59+
}
60+
},
61+
postcss: {
62+
plugins: [
63+
require('css-prefers-color-scheme/postcss'),
64+
require('autoprefixer')
65+
]
66+
}
67+
}

‎docs/.vuepress/public/favicon.ico‎

16.6 KB
Binary file not shown.

‎docs/.vuepress/public/img/dark.jpg‎

17.9 KB
Loading

‎docs/.vuepress/public/img/light.jpg‎

16.3 KB
Loading

‎docs/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
## Introduction
2+
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
4+
5+
## How It Works
6+
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/--*)
8+
9+
#### View Support Browsers
10+
11+
- [prefers-color-scheme](https://www.caniuse.com/#search=prefers-color-scheme)
12+
- [CSS Variables](https://www.caniuse.com/#search=CSS%20Variables)
13+
14+
**`prefers-color-scheme` also needs your system support**
15+
16+
- mac Mojave ^10.14
17+
- windows 10 ^1809
18+
19+
**For unsupported browsers, the same style as the default theme will be displayed**
20+
21+
## Installation
22+
23+
``` sh
24+
yarn add vuepress-theme-default-prefers-color-scheme
25+
# or
26+
npm i vuepress-theme-default-prefers-color-scheme
27+
```
28+
29+
## Usage
30+
31+
``` js {3}
32+
// .vuepress -> config.js
33+
module.exports = {
34+
theme: 'default-prefers-color-scheme',
35+
themeConfig: {
36+
// ...
37+
}
38+
}
39+
```
40+
41+
## Options
42+
43+
### defaultTheme
44+
- Type: `string`, `object`
45+
- Default: `undefined`
46+
- Required: `false`
47+
48+
::: tip
49+
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)
50+
:::
51+
52+
support `light`, `dark` or `{ theme: [begin hours, end hours] }`
53+
54+
``` js {4,6,8}
55+
module.exports = {
56+
theme: 'default-prefers-color-scheme',
57+
themeConfig: {
58+
defaultTheme: 'dark',
59+
// or
60+
defaultTheme: { dark: [18, 6] },
61+
// or
62+
defaultTheme: { light: [6, 18], dark: [18, 6] },
63+
},
64+
// When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js
65+
postcss: {
66+
plugins: [
67+
require('css-prefers-color-scheme/postcss'),
68+
require('autoprefixer')
69+
]
70+
}
71+
}
72+
```
73+
74+
[Theme Config](https://v1.vuepress.vuejs.org/theme/default-theme-config.html)
75+
76+
## Styling
77+
78+
To apply simple color overrides to the styling of the [default preset](https://github.com/tolking/vuepress-theme-default-prefers-color-scheme/blob/master/styles/palette.styl), In your `.vuepress/styles/palette.styl` file.
79+
80+
**`$accentColor` and `$accentDarkColor` are best changed together**

‎docs/zh/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
## 介绍
2+
3+
vuepress-theme-default-prefers-color-scheme 是一款为 [vuepress 默认主题](https://v1.vuepress.vuejs.org/zh/theme/default-theme-config.html) 增加 `浅色` 与 `深色` 主题的一款主题
4+
5+
## 原理
6+
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/--*) 实现。
8+
9+
#### 查看支持浏览器
10+
11+
- [prefers-color-scheme](https://www.caniuse.com/#search=prefers-color-scheme)
12+
- [CSS Variables](https://www.caniuse.com/#search=CSS%20Variables)
13+
14+
**对于 `prefers-color-scheme` 还需要你的操作系统支持切换浅色与深色模式**
15+
16+
- mac Mojave ^10.14
17+
- windows 10 ^1809
18+
19+
**对于都不支持的浏览器将显示与默认主题几乎相同的样式**
20+
21+
## 安装
22+
23+
``` sh
24+
yarn add vuepress-theme-default-prefers-color-scheme
25+
# or
26+
npm i vuepress-theme-default-prefers-color-scheme
27+
```
28+
29+
## 使用
30+
31+
``` js {3}
32+
// .vuepress -> config.js
33+
module.exports = {
34+
theme: 'default-prefers-color-scheme',
35+
themeConfig: {
36+
// ...
37+
}
38+
}
39+
```
40+
41+
## 配置
42+
43+
### defaultTheme
44+
- Type: `string`, `object`
45+
- Default: `undefined`
46+
- Required: `false`
47+
48+
::: tip
49+
默认情况下，要显示浅色或深色主题由 [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)
50+
:::
51+
52+
支持 `light`, `dark` 或者 `{ theme: [begin hours, end hours] }`
53+
54+
``` js {4,6,8}
55+
module.exports = {
56+
theme: 'default-prefers-color-scheme',
57+
themeConfig: {
58+
defaultTheme: 'dark',
59+
// or
60+
defaultTheme: { dark: [18, 6] },
61+
// or
62+
defaultTheme: { light: [6, 18], dark: [18, 6] },
63+
},
64+
// 当你指定了显示主题的颜色时，你需要增加如下的 postcss 插件
65+
postcss: {
66+
plugins: [
67+
require('css-prefers-color-scheme/postcss'),
68+
require('autoprefixer')
69+
]
70+
}
71+
}
72+
```
73+
74+
其它配置与 [官方主题配置](https://v1.vuepress.vuejs.org/theme/default-theme-config.html) 相同
75+
76+
## 样式
77+
78+
在 `.vuepress/styles/palette.styl` 文件里你可以对 [默认预设的样式](https://github.com/tolking/vuepress-theme-default-prefers-color-scheme/blob/master/styles/palette.styl) 应用简单的颜色替换
79+
80+
**`$accentColor` 和 `$accentDarkColor` 最好被一起更改**

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"homepage": "https://github.com/tolking/vuepress-theme-default-prefers-color-scheme",
1313
"doc": "https://tolking.github.io/vuepress-theme-default-prefers-color-scheme",
1414
"scripts": {
15-
"dev": "vuepress dev examples",
16-
"serve": "vuepress dev examples",
17-
"build": "vuepress build examples"
15+
"dev": "vuepress dev docs",
16+
"serve": "vuepress dev docs",
17+
"build": "vuepress build docs"
1818
},
1919
"keywords": [
2020
"vue",

0 commit comments

Comments
 (0)