Merge pull request #27 from tolking/next

up to v2.0.0

Author: tolking

CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## 2.0.0
 
+[Migration for v1](https://tolking.github.io/vuepress-theme-default-prefers-color-scheme/migration.html)
+
 - rename `defaultTheme` to `overrideTheme` and clarify it overrules and ignores [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+- add `prefersTheme` to specify the theme when the browser does not support prefers-color-scheme
+- remove `css-prefers-color-scheme` from `package.json`
 
 ## 1.1.2
 

README.md

@@ -30,7 +30,7 @@ Force users into a specific theme, ignoring [prefers-color-scheme](https://devel
 Allowed values:
 
 - `'light' | 'dark'`: Always use the given theme
-- `{ light: [beginHours: number, endHours: number], dark: [beginHours: number, endHours: number] }`: Control the time of the day when each theme is used 
+- `{ light: [beginHours: number, endHours: number], dark: [beginHours: number, endHours: number] }`: Control the time of the day when each theme is used
 
 For example:
 
@@ -45,6 +45,25 @@ module.exports = {
 }
 ```
 
+### prefersTheme (optional)
+
+Use the given theme when the browser does not support prefers-color-scheme but supports CSS Variables
+
+Allowed values:
+
+- `'light' | 'dark'`
+
+For example:
+
+``` js
+module.exports = {
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+    prefersTheme: 'dark',
+  }
+}
+```
+
 [Theme Config](https://vuepress.vuejs.org/theme/default-theme-config.html)
 
 ## Styling

docs/.vuepress/config.js

@@ -37,7 +37,8 @@ module.exports = {
           }
         },
         sidebar: [
-          '/'
+          '/',
+          '/migration'
         ]
       },
       '/zh/': {
@@ -52,7 +53,8 @@ module.exports = {
           }
         },
         sidebar: [
-          '/zh/'
+          '/zh/',
+          '/zh/migration'
         ]
       }
     }

docs/README.md

@@ -47,7 +47,7 @@ Force users into a specific theme, ignoring [prefers-color-scheme](https://devel
 Allowed values:
 
 - `'light' | 'dark'`: Always use the given theme
-- `{ light: [beginHours: number, endHours: number], dark: [beginHours: number, endHours: number] }`: Control the time of the day when each theme is used 
+- `{ light: [beginHours: number, endHours: number], dark: [beginHours: number, endHours: number] }`: Control the time of the day when each theme is used
 
 For example:
 
@@ -62,20 +62,24 @@ module.exports = {
 }
 ```
 
-::: danger
-After `v1.1.0`, it is no longer necessary to add a postcss plugIn to set `overrideTheme`. It is recommended to remove the relevant content. In the near future, `css-prefers-color-scheme` will be remove from `package.json`
+### prefersTheme (optional)
+
+Use the given theme when the browser does not support prefers-color-scheme but supports CSS Variables
+
+Allowed values:
+
+- `'light' | 'dark'`
+
+For example:
 
 ``` js
 module.exports = {
-- postcss: {
--   plugins: [
--     require('css-prefers-color-scheme/postcss'),
--     require('autoprefixer')
--   ]
-- }
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+    prefersTheme: 'dark',
+  }
 }
 ```
-:::
 
 [Theme Config](https://vuepress.vuejs.org/theme/default-theme-config.html)
 

docs/migration.md

@@ -0,0 +1,25 @@
+---
+title: Migration
+---
+
+## Migration from v1
+
+::: tip
+If and only if you have configured `defaultTheme` in the `v1` version, you need to know this
+:::
+
+``` js
+module.exports = {
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+-   defaultTheme: 'dark',
++   overrideTheme: 'dark',
+  },
+- postcss: {
+-   plugins: [
+-     require('css-prefers-color-scheme/postcss'),
+-     require('autoprefixer')
+-   ]
+- }
+}
+```

docs/zh/README.md

@@ -40,43 +40,46 @@ module.exports = {
 
 ## 配置
 
-### defaultTheme
-- 类型: `string`, `object`
-- 可省略
+### overrideTheme (可选)
 
-::: warning
-默认情况下，要显示浅色或深色主题由 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 决定。 你可以通过设置 `defaultTheme` 指定显示的主题颜色，但会破坏主题颜色的自动切换。
-:::
+强迫用户进入特定主题，忽略 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 值
 
-支持 `light`, `dark` 或者 `{ theme: [begin hours, end hours] }`
+允许值:
 
-``` js {4,6,8}
+- `'light' | 'dark'`: 始终显示当前值
+- `{ light: [beginHours: number, endHours: number], dark: [beginHours: number, endHours: number] }`: 通过一天中的不同时间来控制显示的值
+
+例如:
+
+``` js
 module.exports = {
   theme: 'default-prefers-color-scheme',
   themeConfig: {
-    defaultTheme: 'dark',
+    overrideTheme: 'dark',
     // or
-    defaultTheme: { dark: [18, 6] },
-    // or
-    defaultTheme: { light: [6, 18], dark: [18, 6] },
+    overrideTheme: { light: [6, 18], dark: [18, 6] },
   }
 }
 ```
 
-::: danger
-从 `v1.1.0` 以后设置 `defaultTheme` 不在需要增加postcss插件，建议移除相关内容。在不久的未来将会把 `package.json` 中的 `css-prefers-color-scheme` 移除
+### prefersTheme (可选)
+
+指定浏览器在不支持 prefers-color-scheme 但支持 CSS Variables 时，显示的主题
+
+允许值:
+
+- `'light' | 'dark'`
+
+例如:
 
 ``` js
 module.exports = {
-- postcss: {
--   plugins: [
--     require('css-prefers-color-scheme/postcss'),
--     require('autoprefixer')
--   ]
-- }
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+    prefersTheme: 'dark',
+  }
 }
 ```
-:::
 
 其它配置与 [官方主题配置](https://vuepress.vuejs.org/theme/default-theme-config.html) 相同
 

docs/zh/migration.md

@@ -0,0 +1,25 @@
+---
+title: 迁移
+---
+
+## 从 v1 迁移
+
+::: tip
+当且仅当你在 `v1` 版本中配置了 `defaultTheme` 时，需要了解以下内容
+:::
+
+``` js
+module.exports = {
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+-   defaultTheme: 'dark',
++   overrideTheme: 'dark',
+  },
+- postcss: {
+-   plugins: [
+-     require('css-prefers-color-scheme/postcss'),
+-     require('autoprefixer')
+-   ]
+- }
+}
+```

layouts/Layout.vue

@@ -10,8 +10,13 @@ export default {
     ParentLayout
   },
   computed: {
-    overrideTheme() {
+    defaultTheme() {
       const _overrideTheme = this.$themeConfig.overrideTheme
+      const _prefersTheme = this.$themeConfig.prefersTheme
+      const _noPreference =
+        !window.matchMedia('(prefers-color-scheme: light)').matches &&
+        !window.matchMedia('(prefers-color-scheme: dark)').matches
+
       if (typeof _overrideTheme === 'object') {
         const hours = new Date().getHours()
         let _key = false
@@ -30,17 +35,23 @@ export default {
           }
         }
         return _key
+      } else if (typeof _overrideTheme === 'string') {
+        return _overrideTheme
+      } else if (_prefersTheme && _noPreference) {
+        return _prefersTheme
       } else {
-        return _overrideTheme || false
+        return false
       }
     }
   },
   beforeMount() {
-    if (this.overrideTheme) {
-      document.getElementsByTagName('html')[0].setAttribute('theme', this.overrideTheme)
+    if (this.defaultTheme) {
+      document.getElementsByTagName('html')[0].setAttribute('theme', this.defaultTheme)
     }
   }
 }
+
+
 </script>
 
 <style lang="stylus">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-default-prefers-color-scheme",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "main": "index.js",
   "description": "add prefers-color-scheme for vuepress default theme",
   "author": "tolking <qw13131wang@gmail.com>",
@@ -24,9 +24,6 @@
     "light-theme",
     "dark-theme"
   ],
-  "dependencies": {
-    "css-prefers-color-scheme": "^3.1.1"
-  },
   "devDependencies": {
     "vuepress": "^1.0.0"
   }