Merge pull request #6 from tolking/dev

up to 1.0.2

Author: tolking

.npmignore

@@ -8,6 +8,7 @@
 node_modules/
 test/
 dist/
+docs/
 examples/
 npm-debug.log
 yarn-error.log

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 [README](README.md) | [CHANGELOG](CHANGELOG.md)
 
+## 1.0.2
+
+- fix styles
+
 ## 1.0.1
 
 - Add `defaultTheme` to control default theme color

README.md

@@ -10,9 +10,9 @@
 
 ---
 
-![light.jpg](./examples/public/img/light.jpg)
+![light.jpg](./docs/.vuepress/public/img/light.jpg)
 
-![light.jpg](./examples/public/img/dark.jpg)
+![light.jpg](./docs/.vuepress/public/img/dark.jpg)
 
 ---
 

docs/.vuepress/config.js

@@ -0,0 +1,67 @@
+module.exports = {
+  base: '/vuepress-theme-default-prefers-color-scheme/',
+  title: 'vuepress-theme-default-prefers-color-scheme',
+  description: 'add prefers-color-scheme for vuepress default theme',
+  dest: 'dist/',
+  evergreen: true,
+  theme: require.resolve('../../'),
+  markdown: {
+    lineNumbers: true
+  },
+  locales: {
+    '/': {
+      lang: 'en-US',
+      title: 'vuepress-theme-default-prefers-color-scheme',
+      description: 'add prefers-color-scheme for vuepress default theme'
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+      title: 'vuepress-theme-default-prefers-color-scheme',
+      description: '为 vuepress 的默认主题增加 prefers-color-scheme'
+    }
+  },
+  themeConfig: {
+    defaultTheme: { dark: [19, 6] },
+    repo: 'tolking/vuepress-theme-default-prefers-color-scheme',
+    docsDir: 'examples',
+    editLinks: true,
+    locales: {
+      '/': {
+        selectText: 'Languages',
+        label: 'English',
+        editLinkText: 'Edit this page on GitHub',
+        lastUpdated: 'Last Updated',
+        serviceWorker: {
+          updatePopup: {
+            message: "New content is available.",
+            buttonText: "Refresh"
+          }
+        },
+        sidebar: [
+          '/'
+        ]
+      },
+      '/zh/': {
+        selectText: '选择语言',
+        label: '简体中文',
+        editLinkText: '在 GitHub 上编辑此页',
+        lastUpdated: '最后更新时间',
+        serviceWorker: {
+          updatePopup: {
+            message: "发现新内容可用.",
+            buttonText: "刷新"
+          }
+        },
+        sidebar: [
+          '/zh/'
+        ]
+      }
+    }
+  },
+  postcss: {
+    plugins: [
+      require('css-prefers-color-scheme/postcss'),
+      require('autoprefixer')
+    ]
+  }
+}

examples/public/favicon.ico renamed to docs/.vuepress/public/favicon.ico

@@ -1,3 +1,23 @@
+## Introduction
+
+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
+
+## How It Works
+
+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/--*)
+
+#### View Support Browsers
+
+- [prefers-color-scheme](https://www.caniuse.com/#search=prefers-color-scheme)
+- [CSS Variables](https://www.caniuse.com/#search=CSS%20Variables)
+
+**`prefers-color-scheme` also needs your system support**
+
+- mac Mojave ^10.14
+- windows 10 ^1809
+
+**For unsupported browsers, the same style as the default theme will be displayed**
+
 ## Installation
 
 ``` sh
@@ -26,7 +46,7 @@ module.exports = {
 - Required: `false`
 
 ::: tip
-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`
+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)
 :::
 
 support `light`, `dark` or `{ theme: [begin hours, end hours] }`

examples/public/img/dark.jpg renamed to docs/.vuepress/public/img/dark.jpg

@@ -0,0 +1,80 @@
+## 介绍
+
+vuepress-theme-default-prefers-color-scheme 是一款为 [vuepress 默认主题](https://v1.vuepress.vuejs.org/zh/theme/default-theme-config.html) 增加 `浅色` 与 `深色` 主题的一款主题
+
+## 原理
+
+主要是基于下一代 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/--*) 实现。
+
+#### 查看支持浏览器
+
+- [prefers-color-scheme](https://www.caniuse.com/#search=prefers-color-scheme)
+- [CSS Variables](https://www.caniuse.com/#search=CSS%20Variables)
+
+**对于 `prefers-color-scheme` 还需要你的操作系统支持切换浅色与深色模式**
+
+- mac Mojave ^10.14
+- windows 10 ^1809
+
+**对于都不支持的浏览器将显示与默认主题几乎相同的样式**
+
+## 安装
+
+``` sh
+yarn add vuepress-theme-default-prefers-color-scheme
+# or
+npm i vuepress-theme-default-prefers-color-scheme
+```
+
+## 使用
+
+``` js {3}
+// .vuepress -> config.js
+module.exports = {
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+    // ...
+  }
+}
+```
+
+## 配置
+
+### defaultTheme
+- Type: `string`, `object`
+- Default: `undefined`
+- Required: `false`
+
+::: tip
+默认情况下，要显示浅色或深色主题由 [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)
+:::
+
+支持 `light`, `dark` 或者 `{ theme: [begin hours, end hours] }`
+
+``` js {4,6,8}
+module.exports = {
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+    defaultTheme: 'dark',
+    // or
+    defaultTheme: { dark: [18, 6] },
+    // or
+    defaultTheme: { light: [6, 18], dark: [18, 6] },
+  },
+  // 当你指定了显示主题的颜色时，你需要增加如下的 postcss 插件
+  postcss: {
+    plugins: [
+      require('css-prefers-color-scheme/postcss'),
+      require('autoprefixer')
+    ]
+  }
+}
+```
+
+其它配置与 [官方主题配置](https://v1.vuepress.vuejs.org/theme/default-theme-config.html) 相同
+
+## 样式
+
+在 `.vuepress/styles/palette.styl`  文件里你可以对 [默认预设的样式](https://github.com/tolking/vuepress-theme-default-prefers-color-scheme/blob/master/styles/palette.styl) 应用简单的颜色替换
+
+**`$accentColor` 和 `$accentDarkColor` 最好被一起更改**