Merge pull request #26 from spawnia/overrideTheme

rename `defaultTheme` to `overrideTheme` and clarify it overrules and ignores prefers-color-scheme

Author: tolking

CHANGELOG.md

@@ -1,6 +1,8 @@
-# Change Log
+# Changelog
 
-[README](README.md) | [CHANGELOG](CHANGELOG.md)
+## 2.0.0
+
+- 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)
 
 ## 1.1.2
 

README.md

@@ -1,15 +1,9 @@
 # vuepress-theme-default-prefers-color-scheme
 
-> add prefers-color-scheme for vuepress default theme
-
-[README](README.md) | [CHANGELOG](CHANGELOG.md)
-
-**This theme for Vuepress 1.x**
+This plugin adds support for *prefers-color-scheme* to the Vuepress 1.x default theme.
 
 [Live Demo and Documentation](https://tolking.github.io/vuepress-theme-default-prefers-color-scheme)
 
----
-
 ## Installation
 
 ``` sh
@@ -29,23 +23,24 @@ module.exports = {
 
 ## Options
 
-### defaultTheme
-- Type: `string`, `object`
-- Required: `false`
+### overrideTheme (optional)
+
+Force users into a specific theme, ignoring [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+
+Allowed values:
 
-**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 break it by set `defaultTheme`.**
+- `'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 
 
-support `light`, `dark` or `{ theme: [begin hours, end hours] }`
+For example:
 
 ``` 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] },
   }
 }
 ```
@@ -54,10 +49,17 @@ module.exports = {
 
 ## Styling
 
-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. or set CSS Variables in your `.vuepress/styles/index.styl` file.
+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.
+
+Alternatively, set CSS Variables in your `.vuepress/styles/index.styl` file.
 
 **`$accentColor` and `$accentDarkColor` are best changed together**
 
+## Changelog
+
+This project uses semantic versioning and tracks changes in [CHANGELOG](CHANGELOG.md)
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)

docs/.vuepress/config.js

@@ -21,7 +21,6 @@ module.exports = {
     }
   },
   themeConfig: {
-    // defaultTheme: { dark: [19, 6] },
     repo: 'tolking/vuepress-theme-default-prefers-color-scheme',
     docsDir: 'docs',
     editLinks: true,

docs/README.md

@@ -40,31 +40,30 @@ module.exports = {
 
 ## Options
 
-### defaultTheme
-- Type: `string`, `object`
-- Required: `false`
+### overrideTheme (optional)
 
-::: warning
-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 break it by set `defaultTheme`.
-:::
+Force users into a specific theme, ignoring [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+
+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 
 
-support `light`, `dark` or `{ theme: [begin hours, end hours] }`
+For example:
 
-``` js {4,6,8}
+``` js
 module.exports = {
   theme: 'default-prefers-color-scheme',
   themeConfig: {
-    defaultTheme: 'dark',
-    // or
-    defaultTheme: { dark: [18, 6] },
+    overrideTheme: 'dark',
     // or
-    defaultTheme: { light: [6, 18], dark: [18, 6] },
+    overrideTheme: { light: [6, 18], dark: [18, 6] },
   }
 }
 ```
 
 ::: danger
-After `v1.1.0`, it is no longer necessary to add a postcss plugIn to set `defaulttheme`. It is recommended to remove the relevant content. In the near future, `css-prefers-color-scheme` will be remove from `package.json`
+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`
 
 ``` js
 module.exports = {

layouts/Layout.vue

@@ -10,13 +10,13 @@ export default {
     ParentLayout
   },
   computed: {
-    defaultTheme() {
-      const _defaultTheme = this.$themeConfig.defaultTheme
-      if (typeof _defaultTheme === 'object') {
+    overrideTheme() {
+      const _overrideTheme = this.$themeConfig.overrideTheme
+      if (typeof _overrideTheme === 'object') {
         const hours = new Date().getHours()
         let _key = false
-        for (const key in _defaultTheme) {
-          const value = _defaultTheme[key]
+        for (const key in _overrideTheme) {
+          const value = _overrideTheme[key]
           if (value[0] <= value[1]) {
             if (value[0] <= hours && hours < value[1]) {
               _key = key
@@ -31,13 +31,13 @@ export default {
         }
         return _key
       } else {
-        return _defaultTheme || false
+        return _overrideTheme || false
       }
     }
   },
   beforeMount() {
-    if (this.defaultTheme) {
-      document.getElementsByTagName('html')[0].setAttribute('theme', this.defaultTheme)
+    if (this.overrideTheme) {
+      document.getElementsByTagName('html')[0].setAttribute('theme', this.overrideTheme)
     }
   }
 }