feat : Add defaultTheme to control default theme

Author: tolking

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+
+[README](README.md) | [CHANGELOG](CHANGELOG.md)
+
+## 1.0.1
+
+- Add `defaultTheme` to control default theme color

README.md

@@ -2,6 +2,8 @@
 
 > add prefers-color-scheme for vuepress default theme
 
+[README](README.md) | [CHANGELOG](CHANGELOG.md)
+
 **This theme for Vuepress 1.x, Works only on supported operating systems and browsers**
 
 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
@@ -36,6 +38,37 @@ module.exports = {
 }
 ```
 
+## Options
+
+### defaultTheme
+- Type: `string`, `object`
+- Default: `undefined`
+- Required: `false`
+
+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] }`
+
+``` js
+module.exports = {
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+    defaultTheme: 'dark',
+    // or
+    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)
 
 ## Styling

examples/.vuepress/config.js

@@ -6,8 +6,15 @@ module.exports = {
   evergreen: true,
   theme: require.resolve('../../'),
   themeConfig: {
+    defaultTheme: { dark: [18, 6] },
     sidebar: [
       '/started'
     ]
+  },
+  postcss: {
+    plugins: [
+      require('css-prefers-color-scheme/postcss'),
+      require('autoprefixer')
+    ]
   }
 }

examples/README.md

@@ -5,7 +5,7 @@ tagline: add prefers-color-scheme for vuepress default theme
 actionText: Get Started →
 actionLink: /started
 features:
-- title: Inheritance on the default theme
+- title: Inheritance default theme
   details: Seamlessly add prefers-color-scheme to the default theme
 - title: Enhanced display
   details: Works only on supported operating systems and browsers

examples/started.md

@@ -8,7 +8,7 @@ npm i vuepress-theme-default-prefers-color-scheme
 
 ## Usage
 
-``` js
+``` js {3}
 // .vuepress -> config.js
 module.exports = {
   theme: 'default-prefers-color-scheme',
@@ -18,6 +18,39 @@ module.exports = {
 }
 ```
 
+## Options
+
+### defaultTheme
+- Type: `string`, `object`
+- Default: `undefined`
+- 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`
+:::
+
+support `light`, `dark` or `{ 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] },
+  },
+  // 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)
 
 ## Styling

layouts/Layout.vue

@@ -8,6 +8,51 @@ import ParentLayout from '@parent-theme/layouts/Layout.vue'
 export default {
   components: {
     ParentLayout
+  },
+  data() {
+    return {
+      colorScheme: {}
+    }
+  },
+  computed: {
+    defaultTheme() {
+      const _defaultTheme = this.$themeConfig.defaultTheme
+      if (typeof _defaultTheme === 'object') {
+        const hours = new Date().getHours()
+        let _key = false
+        for (const key in _defaultTheme) {
+          const value = _defaultTheme[key]
+          if (value[0] <= value[1]) {
+            if (value[0] <= hours && hours < value[1]) {
+              _key = key
+              break
+            }
+          } else {
+            if ((value[0] <= hours && hours < 24) || (0 <= hours && hours < value[1])) {
+              _key = key
+              break
+            }
+          }
+        }
+        return _key
+      } else {
+        return _defaultTheme || false
+      }
+    }
+  },
+  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)
+    }
   }
 }
 </script>

package.json

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

styles/index.styl

@@ -194,26 +194,26 @@ div[class*="language-"].line-numbers-mode .line-numbers-wrapper
         border-color var(--searchBorderColor)
       .ds-suggestion
         border-bottom-color var(--borderColor)
-    .algolia-docsearch-suggestion--highlight
-      color #2c815b
+    // .algolia-docsearch-suggestion--highlight
+    //   color #2c815b
     .algolia-docsearch-suggestion
       border-color var(--borderColor)
       .algolia-docsearch-suggestion--category-header
         background var(--accentColor)
-        color #fff
-        .algolia-docsearch-suggestion--highlight
-          background rgba(255, 255, 255, 0.6)
+        // color #fff
+        // .algolia-docsearch-suggestion--highlight
+        //   background rgba(255, 255, 255, 0.6)
       .algolia-docsearch-suggestion--title
         color var(--textColor)
       .algolia-docsearch-suggestion--subcategory-column
         border-color var(--borderColor)
-        background #f1f3f5
-      .algolia-docsearch-suggestion--subcategory-column-text
-        color #555
+        // background #f1f3f5
+      // .algolia-docsearch-suggestion--subcategory-column-text
+      //   color #555
     .algolia-docsearch-footer
       border-color var(--borderColor)
     .ds-cursor .algolia-docsearch-suggestion--content
-      background-color #e7edf3 !important
+      // background-color #e7edf3 !important
       color var(--textColor)
 
 .dropdown-wrapper
@@ -235,8 +235,8 @@ div[class*="language-"].line-numbers-mode .line-numbers-wrapper
 
   .dropdown-wrapper .nav-dropdown
     background-color var(--bgColor)
-    border-color #ddd
-    border-bottom-color #ccc
+    // border-color #ddd
+    // border-bottom-color #ccc
 
 
 // home
@@ -245,7 +245,7 @@ div[class*="language-"].line-numbers-mode .line-numbers-wrapper
     .description
       color var(--lighten40TextColor)
     .action-button
-      color #fff
+      // color #fff
       background-color var(--accentColor)
       border-bottom-color var(--darken10AccentColor)
       &:hover