Merge pull request #19 from tolking/dev

refactor: defaultTheme
tolking · Jul 19, 2020 · f3ddb45 · f3ddb45
2 parents 168b684 + eda3253
commit f3ddb45
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 [README](README.md) | [CHANGELOG](CHANGELOG.md)
 
+## 1.1.0
+
+- remove `css-prefers-color-scheme`
+- refactor `defaultTheme`
+
+```
+defaultTheme: 'light' -> <html theme="light">
+defaultTheme: 'dark' -> <html theme="dark">
+```
+
 ## 1.0.9
 
 - fix styles

diff --git a/README.md b/README.md
@@ -55,18 +55,11 @@ module.exports = {
     defaultTheme: { dark: [18, 6] },
     // or
     defaultTheme: { light: [6, 18], dark: [18, 6] },
-  },
-  // When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js
-  postcss: {
-    plugins: [
-      require('css-prefers-color-scheme/postcss'),
-      require('autoprefixer')
-    ]
   }
 }
 ```
 
-[Theme Config](https://v1.vuepress.vuejs.org/theme/default-theme-config.html)
+[Theme Config](https://vuepress.vuejs.org/theme/default-theme-config.html)
 
 ## Styling
 
@@ -77,7 +70,3 @@ To apply simple color overrides to the styling of the [default preset](https://g
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)
-
-## Keywords
-
-vue vuepress documentation prefers-color-scheme default-theme light-theme dark-theme
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -58,10 +58,4 @@ module.exports = {
       }
     }
   }
-  // postcss: {
-  //   plugins: [
-  //     require('css-prefers-color-scheme/postcss'),
-  //     require('autoprefixer')
-  //   ]
-  // }
 }
diff --git a/docs/README.md b/docs/README.md
@@ -1,10 +1,10 @@
 ## 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
+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
 
 ## 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/--*)
+base on prefers-color-scheme and CSS Variables
 
 #### View Support Browsers
 
@@ -45,7 +45,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`. base on [css-prefers-color-scheme](https://github.com/csstools/css-prefers-color-scheme)
+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`.
 :::
 
 support `light`, `dark` or `{ theme: [begin hours, end hours] }`
@@ -59,18 +59,11 @@ module.exports = {
     defaultTheme: { dark: [18, 6] },
     // or
     defaultTheme: { light: [6, 18], dark: [18, 6] },
-  },
-  // When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js
-  postcss: {
-    plugins: [
-      require('css-prefers-color-scheme/postcss'),
-      require('autoprefixer')
-    ]
   }
 }
 ```
 
-[Theme Config](https://v1.vuepress.vuejs.org/theme/default-theme-config.html)
+[Theme Config](https://vuepress.vuejs.org/theme/default-theme-config.html)
 
 ## Styling
 

diff --git a/docs/zh/README.md b/docs/zh/README.md
@@ -1,10 +1,10 @@
 ## 介绍
 
-vuepress-theme-default-prefers-color-scheme 是一款为 [vuepress 默认主题](https://v1.vuepress.vuejs.org/zh/theme/default-theme-config.html) 增加 `浅色` 与 `深色` 主题的一款主题
+vuepress-theme-default-prefers-color-scheme 是一款为 [vuepress 默认主题](https://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/--*) 实现。
+主要是基于下一代 css 技术中的 prefers-color-scheme 与 CSS Variables 实现。
 
 #### 查看支持浏览器
 
@@ -45,7 +45,7 @@ module.exports = {
 - 可省略
 
 ::: 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)
+默认情况下，要显示浅色或深色主题由 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 决定, 你可以通过设置 `defaultTheme` 来指定显示的主题颜色
 :::
 
 支持 `light`, `dark` 或者 `{ theme: [begin hours, end hours] }`
@@ -59,18 +59,11 @@ module.exports = {
     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) 相同
+其它配置与 [官方主题配置](https://vuepress.vuejs.org/theme/default-theme-config.html) 相同
 
 ## 样式
 

diff --git a/layouts/Layout.vue b/layouts/Layout.vue
@@ -9,11 +9,6 @@ export default {
   components: {
     ParentLayout
   },
-  data() {
-    return {
-      colorScheme: {}
-    }
-  },
   computed: {
     defaultTheme() {
       const _defaultTheme = this.$themeConfig.defaultTheme
@@ -42,16 +37,7 @@ export default {
   },
   beforeMount() {
     if (this.defaultTheme) {
-      const prefersColorScheme = require('css-prefers-color-scheme').default
-      this.colorScheme = prefersColorScheme(this.defaultTheme)
-    }
-  },
-  mounted() {
-    // Prevent styles in index.styl not work
-    if (this.defaultTheme) {
-      window.onload = function() {
-        this.colorScheme.scheme = this.defaultTheme
-      }.bind(this)
+      document.getElementsByTagName('html')[0].setAttribute('theme', this.defaultTheme)
     }
   }
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-default-prefers-color-scheme",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "main": "index.js",
   "description": "add prefers-color-scheme for vuepress default theme",
   "author": "tolking <qw13131wang@gmail.com>",
@@ -17,11 +17,10 @@
     "build": "vuepress build docs"
   },
   "keywords": [
-    "vue",
     "vuepress",
+    "vuepress-theme",
     "documentation",
     "prefers-color-scheme",
-    "default-theme",
     "light-theme",
     "dark-theme"
   ],

diff --git a/styles/index.styl b/styles/index.styl
@@ -43,7 +43,6 @@
     --highlightedBgColor $highlightedBgLightColor
     --languageTextColor $languageTextLightColor
     --lineNumbersColor $lineNumbersLightColor
-    --lighten20TextColor lighten($textColor, 20%)
 
   @media (prefers-color-scheme dark)
     --accentColor $accentDarkColor
@@ -77,6 +76,80 @@
     --darken10BgColor lighten($bgDarkColor, 5%)
     --darken10BorderColor darken($borderDarkColor, 10%)
 
+html[theme='light']
+  --accentColor $accentColor
+  --textColor $textColor
+  --borderColor $borderColor
+  --codeBgColor $codeBgLightColor
+  --arrowBgColor $arrowBgColor
+  --badgeTipColor $badgeTipColor
+  --badgeWarningColor $badgeWarningColor
+  --badgeErrorColor $badgeErrorColor
+  --bgColor $bgColor
+  --kbdBgColor $kbdBgColor
+  --blockquoteTextColor $blockquoteTextColor
+  --blockquoteBorderColor $blockquoteBorderColor
+  --tableBorderColor $tableBorderColor
+  --tableStripeBgColor $tableStripeBgColor
+  --preTextColor $preTextLightColor
+  --highlightedBgColor $highlightedBgLightColor
+  --languageTextColor $languageTextLightColor
+  --lineNumbersColor $lineNumbersLightColor
+  --tipColor $tipColor
+  --tipBgColor $tipBgColor
+  --warningColor $warningColor
+  --warningBgColor $warningBgColor
+  --dangerColor $dangerColor
+  --dangerBgColor $dangerBgColor
+  --miniCodeBgColor $miniCodeBgColor
+  --searchBorderColor $searchBorderColor
+  --lighten10AccentColor lighten($accentColor, 10%)
+  --lighten10TextColor lighten($textColor, 10%)
+  --lighten20TextColor lighten($textColor, 20%)
+  --lighten25TextColor lighten($textColor, 25%)
+  --lighten35TextColor lighten($textColor, 35%)
+  --lighten40TextColor lighten($textColor, 40%)
+  --darken10AccentColor darken($accentColor, 10%)
+  --darken10BgColor darken($bgColor, 5%)
+  --darken10BorderColor darken($borderColor, 10%)
+
+html[theme='dark']
+  --accentColor $accentDarkColor
+  --textColor $textDarkColor
+  --borderColor $borderDarkColor
+  --codeBgColor $codeBgColor
+  --arrowBgColor $arrowBgDarkColor
+  --badgeTipColor $badgeTipDarkColor
+  --badgeWarningColor $badgeWarningDarkColor
+  --badgeErrorColor $badgeErrorDarkColor
+  --bgColor $bgDarkColor
+  --kbdBgColor $kbdBgDarkColor
+  --blockquoteTextColor $blockquoteTextDarkColor
+  --blockquoteBorderColor $blockquoteBorderDarkColor
+  --tableBorderColor $tableBorderDarkColor
+  --tableStripeBgColor $tableStripeBgDarkColor
+  --preTextColor $preTextColor
+  --highlightedBgColor $highlightedBgColor
+  --languageTextColor $languageTextColor
+  --lineNumbersColor $lineNumbersColor
+  --tipColor $tipDarkColor
+  --tipBgColor $tipBgDarkColor
+  --warningColor $warningDarkColor
+  --warningBgColor $warningBgDarkColor
+  --dangerColor $dangerDarkColor
+  --dangerBgColor $dangerBgDarkColor
+  --miniCodeBgColor $miniCodeBgDarkColor
+  --searchBorderColor $searchBorderDarkColor
+  --lighten10AccentColor lighten($accentDarkColor, 10%)
+  --lighten10TextColor lighten($textDarkColor, 10%)
+  --lighten20TextColor lighten($textDarkColor, 20%)
+  --lighten25TextColor lighten($textDarkColor, 25%)
+  --lighten35TextColor lighten($textDarkColor, 35%)
+  --lighten40TextColor lighten($textDarkColor, 40%)
+  --darken10AccentColor darken($accentDarkColor, 10%)
+  --darken10BgColor darken($bgDarkColor, 5%)
+  --darken10BorderColor darken($borderDarkColor, 10%)
+
 html
 body
 .navbar