Add ability to customize selector (#12)

tbetous · ChanceArthur · commit 8e8ee5ebce87 · 2020-01-21T13:40:03.000-05:00
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ plugins: [
 
 ## Usage
 
-Styles generated by this plugin are only used if the `mode-dark` class is applied to the `<html>` element. How you do that is up to you. `prefers-dark.js` is provided as an option, which is a simple script that enables dark mode based on the user's system theme.
+Styles generated by this plugin are only used if the selector is applied to the `<html>` element. How you do that is up to you. `prefers-dark.js` is provided as an option, which is a simple script that enables dark mode based on the user's system theme.
 
 ### Available Variants
 
@@ -55,21 +55,34 @@ variants: {
 }
 ```
 
+### Changing the Selector
+
+By default, `.mode-dark` is used as the selector for dark mode. You can change this by adding the `darkSelector` key to the `theme` section in your Tailwind configuration.
+
+```javascript
+  theme: {
+    darkSelector: '.mode-dark'
+  }
+```
+
+Don't forget to also change the selector in `prefers-dark.js` if you are using it.
+
 ## PurgeCSS
 
-If you are using PurgeCSS, you should either add `mode-dark` to the `whitelist` array...
+If you are using PurgeCSS, you should either add the selector to the `whitelist` array...
 
 ```javascript
 whitelist: ['mode-dark']
 ```
 
-... or add `dark-mode.js` to the `content` array.
+... or add `prefers-dark.js` to the `content` array.
 
 ```javascript
 content: [
   '**/*.js',
-  './node_modules/tailwindcss-dark-mode/dark-mode.js'
+  './node_modules/tailwindcss-dark-mode/prefers-dark.js',
+  './or/your/own/prefers-dark.js'
 ]
 ```
 
-Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the `mode-dark` class is only applied when the page is loaded.
+Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the selector is only applied when the page is loaded.
diff --git a/index.js b/index.js
@@ -1,38 +1,39 @@
 module.exports = function() {
-  return function({addVariant, e}) {
+  return function({addVariant, theme, e}) {
+    const darkSelector = theme('darkSelector', '.mode-dark');
     addVariant('dark', ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `.mode-dark .${e(`dark${separator}${className}`)}`;
+        return `${darkSelector} .${e(`dark${separator}${className}`)}`;
       });
     });
 
     addVariant('dark-hover', ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `.mode-dark .${e(`dark-hover${separator}${className}`)}:hover`;
+        return `${darkSelector} .${e(`dark-hover${separator}${className}`)}:hover`;
       });
     });
 
     addVariant('dark-focus', ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `.mode-dark .${e(`dark-focus${separator}${className}`)}:focus`;
+        return `${darkSelector} .${e(`dark-focus${separator}${className}`)}:focus`;
       });
     });
 
     addVariant('dark-active', ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `.mode-dark .${e(`dark-active${separator}${className}`)}:active`;
+        return `${darkSelector} .${e(`dark-active${separator}${className}`)}:active`;
       });
     });
 
     addVariant('dark-group-hover', ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `.mode-dark .group:hover .${e(`dark-group-hover${separator}${className}`)}`;
+        return `${darkSelector} .group:hover .${e(`dark-group-hover${separator}${className}`)}`;
       });
     });
 
     addVariant('dark-focus-within', ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `.mode-dark .${e(`dark-focus-within${separator}${className}`)}:focus-within`;
+        return `${darkSelector} .${e(`dark-focus-within${separator}${className}`)}:focus-within`;
       });
     });
   };
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tailwindcss-dark-mode",
   "description": "A Tailwind CSS plugin that adds variants for dark mode",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "author": "Chance Arthur",
   "license": "MIT",
   "copyright": "Chance Arthur",

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "tailwindcss-dark-mode",`
`3`	`3`	`"description": "A Tailwind CSS plugin that adds variants for dark mode",`
`4`		`- "version": "1.1.1",`
	`4`	`+ "version": "1.1.2",`
`5`	`5`	`"author": "Chance Arthur",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"copyright": "Chance Arthur",`