feat: Custom color-mode className

vue-a11y · May 18, 2020 · 30a43b5 · 30a43b5
1 parent 13ec095
commit 30a43b5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 15 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -31,6 +31,7 @@ module.exports = {
             collapsable: false,
             children: [
               '/guide/',
+              '/guide/class-naming.md',
               '/guide/modes.md',
               '/guide/storage.md',
               '/guide/meta-theme-color.md',

diff --git a/docs/guide/class-naming.md b/docs/guide/class-naming.md
@@ -0,0 +1,45 @@
+# Class naming
+
+The class by default for deciding the color mode is inserted in the HTML tag. `${color}-mode`
+
+e.g.
+
+```html
+<!DOCTYPE html>
+<html lang="en" class="light-mode">
+<head>
+  <meta charset="UTF-8">
+...
+```
+
+## Custom
+
+You can also customize the class name.
+
+| prop           | Type      | default
+| -------------- | --------- | ----------------------------------------------------
+| `className`    | String    | `%cm-mode`
+
+::: tip
+**`%cm`**: We use this placeholder to color mode that will be implemented
+:::
+
+**e.g.**
+
+```vue
+<VueDarkMode className="%cm-theme">
+  <template v-slot="{ mode }">
+    Color mode: {{ mode }}
+  </template>
+</VueDarkMode>
+```
+
+**Output:**
+
+```html
+<!DOCTYPE html>
+<html lang="en" class="light-theme">
+<head>
+  <meta charset="UTF-8">
+...
+```
diff --git a/docs/howto/tailwind.md b/docs/howto/tailwind.md
@@ -1,19 +1,23 @@
 # TailwindCSS Dark Mode
 
 By default, [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) uses the `.mode-dark` selector for dark mode.  
-You can see more in the documentation section: [Changing the Selector](https://github.com/ChanceArthur/tailwindcss-dark-mode#changing-the-selector).
 
-The example below shows how you can modify the plugin selector to correctly serve the dark class generated by @vue-a11y/dark-mode.
+It is possible to [changing the Selector](https://github.com/ChanceArthur/tailwindcss-dark-mode#changing-the-selector) in "tailwindcss-dark-mode" plug-in, however, you can also adjust the class using the [className](/guide/class-naming.html) prop to generate the class compatible with the plugin.
 
-```javascript
-// tailwind.config.js
-module.exports = {
-  theme: {
-    darkSelector: '.dark-mode'
-  },
-  plugins: [
-    require('tailwindcss-dark-mode')()
-  ]
-  ...
-}
-```
+e.g.
+
+```vue
+<VueDarkMode className="mode-%cm">
+  <template v-slot="{ mode }">
+    Color mode: {{ mode }}
+  </template>
+</VueDarkMode>
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en" class="mode-dark">
+<head>
+  <meta charset="UTF-8">
+...
+```
diff --git a/src/vue-dark-mode.vue b/src/vue-dark-mode.vue
@@ -29,6 +29,10 @@ export default {
         return ['light', 'dark', 'system']
       }
     },
+    className: {
+      type: String,
+      default: '%cm-mode'
+    },
     storage: {
       type: String,
       default: 'localStorage'
@@ -131,7 +135,7 @@ export default {
     },
 
     handleColorModeClass (action) {
-      return document.documentElement.classList[action](`${this.currentMode}-mode`)
+      return document.documentElement.classList[action](`${this.className.replace(/%cm/g, this.currentMode)}`)
     },
 
     handlePreferColorScheme (e) {