feat: allow cssVariables option to be a function

closes #206
egoist · Mar 23, 2019 · 13a7ab0 · 13a7ab0
1 parent 7db5b1e
commit 13a7ab0
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 10 deletions.
diff --git a/src/store.js b/src/store.js
@@ -215,7 +215,9 @@ const store = new Vuex.Store({
     cssVariables(_, {config}) {
       return {
         ...(config.theme === 'dark' ? darkCssVariables : defaultCssVariables),
-        ...config.cssVariables
+        ...(typeof config.cssVariables === 'function'
+          ? config.cssVariables(config.theme)
+          : config.cssVariables)
       }
     }
   }

diff --git a/website/docs/guide/customization.md b/website/docs/guide/customization.md
@@ -122,20 +122,27 @@ By default a fresh Docute website will use system default fonts.
 
 ## Custom Style
 
-You can use `cssVariables` option to customize site style:
+You can use [`cssVariables`](../options.md#cssvariables) option to customize site style:
 
 ```js
 new Docute({
   cssVariables: {
     sidebarWidth: '300px'
   }
 })
+
+// Or using a function to get current theme
+new Docute({
+  cssVariables(theme) {
+    return theme === 'dark' ? {} : {}
+  }
+})
 ```
 
-Available properties with their default values:
+The `cssVariables` used by the the <code>{{ $store.getters.config.theme }}</code> theme:
 
 <ul>
-<li v-for="(value, key) in defaultCssVariables" :key="key">
+<li v-for="(value, key) in $store.getters.cssVariables" :key="key">
 <strong>{{key}}</strong>: <color-box :color="value" v-if="/(Color|Background)/.test(key)" />
 <code>{{value}}</code>
 </li>

diff --git a/website/docs/options.md b/website/docs/options.md
@@ -160,6 +160,12 @@ interface Versions {
 }
 ```
 
+## cssVariables
+
+- Type: `object` `(theme: string) => object`
+
+Override CSS variables.
+
 ## overrides
 
 - Type: `{[path: string]: LocaleOptions}`

diff --git a/website/docs/zh/guide/customization.md b/website/docs/zh/guide/customization.md
@@ -116,20 +116,27 @@ By default a fresh Docute website will use system default fonts.
 
 ## 自定义样式
 
-You can use `cssVariables` option to customize site style:
+You can use [`cssVariables`](../options.md#cssvariables) option to customize site style:
 
 ```js
 new Docute({
   cssVariables: {
     sidebarWidth: '300px'
   }
 })
+
+// Or using a function to get current theme
+new Docute({
+  cssVariables(theme) {
+    return theme === 'dark' ? {} : {}
+  }
+})
 ```
 
-Available properties with their default values:
+The `cssVariables` used by the the <code>{{ $store.getters.config.theme }}</code> theme:
 
 <ul>
-<li v-for="(value, key) in defaultCssVariables" :key="key">
+<li v-for="(value, key) in $store.getters.cssVariables" :key="key">
 <strong>{{key}}</strong>: <color-box :color="value" v-if="/(Color|Background)/.test(key)" />
 <code>{{value}}</code>
 </li>

diff --git a/website/docs/zh/options.md b/website/docs/zh/options.md
@@ -161,6 +161,12 @@ interface Versions {
 }
 ```
 
+## cssVariables
+
+- Type: `object` `(theme: string) => object`
+
+Override CSS variables.
+
 ## overrides
 
 - 类型：`{[path: string]: LocaleOptions}`

diff --git a/website/index.js b/website/index.js
@@ -2,7 +2,6 @@ import html from 'html-template-tag'
 import googleAnalytics from '@leptosia/docute-google-analytics'
 import Docute from '../src'
 import prismLanguages from '../src/utils/prismLanguages'
-import { defaultCssVariables } from '../src/utils/cssVariables'
 import ColorBox from './components/ColorBox.vue'
 
 const PatreonIcon = {
@@ -56,8 +55,7 @@ new Docute({
       data() {
         return {
           builtinLanguages: prismLanguages.builtin,
-          deps: __DEPS__,
-          defaultCssVariables
+          deps: __DEPS__
         }
       },
       methods: {