feat: add classPrefix and classSuffix

nuxt-modules · Sep 15, 2020 · 0f2141c · 0f2141c
1 parent 9a729c8
commit 0f2141c
Show file tree

Hide file tree

Showing 5 changed files with 359 additions and 295 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
 - Sync between tabs 🔄
 - Supports IE9+ 👴
 
-ℹ️ This module is using a cookie to support server-side rendering, if your visitors are located in Europe, make sure to follow the [EU cookie directive](https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive)
+ℹ️ &nbsp;This module is using a cookie to support server-side rendering, if your visitors are located in Europe, make sure to follow the [EU cookie directive](https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive)
 
 ## Setup
 
@@ -100,6 +100,8 @@ colorMode: {
   hid: 'nuxt-color-mode-script',
   globalName: '__NUXT_COLOR_MODE__',
   componentName: 'ColorScheme',
+  classPrefix: '',
+  classSufix: '-mode',
   cookie: {
     key: 'nuxt-color-mode',
     options: {
@@ -137,6 +139,34 @@ Props:
 
 ## TailwindCSS Dark Mode
 
+### Tailwind v1.8+
+
+Tailwind v1.8 introduced [dark mode support](https://github.com/tailwindlabs/tailwindcss/pull/2279), in order to work with @nuxtjs/color-mode, you need to set `dark: 'class'` in your `tailwind.config.js`:
+
+```js
+// tailwind.config.js
+module.exports = {
+  experimental: {
+    darkModeVariant: true
+  },
+  dark: 'class'
+}
+```
+
+Then in your `nuxt.config.js`, set the `classSuffix` option to an empty string:
+
+```js
+// nuxt.config.js
+export default {
+  // ...
+  colorMode: {
+    classSuffix: ''
+  }
+}
+```
+
+### Tailwindcss Dark Mode Plugin
+
 You can easily integrate this module with [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) by just setting `darkSelector: '.dark-mode'`, see [changing the selector documentation](https://github.com/ChanceArthur/tailwindcss-dark-mode#changing-the-selector).
 
 ```js

diff --git a/lib/module.js b/lib/module.js
@@ -11,6 +11,8 @@ export default async function (moduleOptions) {
     hid: 'nuxt-color-mode-script',
     globalName: '__NUXT_COLOR_MODE__',
     componentName: 'ColorScheme',
+    classPrefix: '',
+    classSuffix: '-mode',
     cookie: {
       key: 'nuxt-color-mode',
       options: {

diff --git a/lib/script.js b/lib/script.js
@@ -37,7 +37,7 @@ function getCookie (name) {
 }
 
 function addClass (value) {
-  const className = value + '-mode'
+  const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
   if (de.classList) {
     de.classList.add(className)
   } else {
@@ -46,7 +46,7 @@ function addClass (value) {
 }
 
 function removeClass (value) {
-  const className = value + '-mode'
+  const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
   if (de.classList) {
     de.classList.remove(className)
   } else {

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "eslint": "^7.9.0",
     "husky": "latest",
     "jest": "^26.4.2",
-    "nuxt-edge": "^2.14.1-26608350.3204f301",
+    "nuxt": "^2.14.5",
     "rollup": "^2.26.11",
     "rollup-plugin-babel": "latest",
     "rollup-plugin-terser": "^6.1.0",