Use Tailwind native way to customize selector: https://tailwindcss.com/docs/dark-mode#customizing-the-class-name

Author: nlemoine

__tests__/dark-mode.test.js

@@ -80,7 +80,7 @@ test('only dark variables with default options and `media` mode', async () => {
  `)
 })
 
-test('if the `darkMode` is set to `media`, the `darkSelector` and `darkToRoot` options should not work', async () => {
+test('if the `darkMode` is set to `media`, `darkToRoot` options should not work', async () => {
  expect(
  await utils.diffOnly({
  content: [utils.content()],
@@ -103,7 +103,6 @@ test('if the `darkMode` is set to `media`, the `darkSelector` and `darkToRoot` o
 
  plugins: [
  tailwindcssVariables({
- darkSelector: '.custom-dark-selector',
  darkToRoot: true,
  }),
  ],
@@ -171,7 +170,7 @@ test('only dark variables with custom options and `class` mode', async () => {
  expect(
  await utils.diffOnly({
  content: [utils.content('dark-mode-to-root')],
- darkMode: 'class',
+ darkMode: ['class', '.custom-dark-selector'],
  theme: {
  darkVariables: {
  DEFAULT: {
@@ -191,7 +190,6 @@ test('only dark variables with custom options and `class` mode', async () => {
  plugins: [
  tailwindcssVariables({
  variablePrefix: 'my-prefix',
- darkSelector: '.custom-dark-selector',
  darkToRoot: true,
  }),
  ],
@@ -373,11 +371,11 @@ test('variables and dark variables with default options and `media` mode', async
  `)
 })
 
-test('variables and dark variables with custom darkSelector and `class` mode', async () => {
+test('variables and dark variables with custom selector and `class` mode', async () => {
  expect(
  await utils.diffOnly({
  content: [utils.content()],
- darkMode: 'class',
+ darkMode: ['class', '.custom-dark-selector'],
  theme: {
  variables: {
  DEFAULT: {
@@ -408,11 +406,7 @@ test('variables and dark variables with custom darkSelector and `class` mode', a
  },
  },
 
- plugins: [
- tailwindcssVariables({
- darkSelector: '.custom-dark-selector',
- }),
- ],
+ plugins: [tailwindcssVariables()],
  })
  ).toMatchInlineSnapshot(`
  "
@@ -501,7 +495,7 @@ test('variables and dark variables with custom options and `class` mode', async
  expect(
  await utils.diffOnly({
  content: [utils.content('dark-mode-to-root')],
- darkMode: 'class',
+ darkMode: ['class', '.custom-dark-selector'],
  theme: {
  variables: {
  DEFAULT: {
@@ -535,7 +529,6 @@ test('variables and dark variables with custom options and `class` mode', async
  plugins: [
  tailwindcssVariables({
  variablePrefix: 'my-prefix',
- darkSelector: '.custom-dark-selector',
  darkToRoot: true,
  }),
  ],

__tests__/issues.test.js

@@ -59,7 +59,7 @@ test('issue 25', async () => {
  expect(
  await utils.diffOnly({
  content: [utils.content()],
- darkMode: 'class',
+ darkMode: ['class', '[data-mode="dark"]'],
  theme: {
  variables: {
  DEFAULT: {
@@ -77,7 +77,6 @@ test('issue 25', async () => {
  plugins: [
  tailwindcssVariables({
  darkToRoot: true,
- darkSelector: '[data-mode="dark"]',
  colorVariables: true,
  }),
  ],

__tests__/readme.test.js

@@ -127,7 +127,7 @@ test('dark mode with `class` and custom options', async () => {
  expect(
  await utils.diffOnly({
  content: [utils.content()],
- darkMode: 'class',
+ darkMode: ['class', '.custom-dark-selector'],
  theme: {
  variables: {
  DEFAULT: {
@@ -173,7 +173,6 @@ test('dark mode with `class` and custom options', async () => {
  plugins: [
  tailwindcssVariables({
  darkToRoot: false,
- darkSelector: '.custom-dark-selector',
  }),
  ],
  })

examples/api-examples/advanced/index.js

@@ -15,7 +15,6 @@ module.exports = plugin.withOptions(
  let pluginOptions = merge(
  {
  variablePrefix: '--prefix1',
- darkSelector: null, // default: .dark
  darkToRoot: false, // default: true ( :root.dark or .dark )
  },
  theme('myPlugin.variableOptions', {}),

examples/api-examples/simple/index.js

@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
  let pluginOptions = merge(
  {
  variablePrefix: '--prefix1',
- darkSelector: null, // default: .dark
  darkToRoot: false, // default: true ( :root.dark or .dark )
  },
  theme('myPlugin.variableOptions', {}),

examples/api-examples/with-components-null-selector/index.js

@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
  let pluginOptions = merge(
  {
  variablePrefix: '--prefix1',
- darkSelector: null, // default: .dark
  darkToRoot: false, // default: true ( :root.dark or .dark )
  },
  theme('myPlugin.variableOptions', {}),

examples/api-examples/with-components/index.js

@@ -30,7 +30,6 @@ module.exports = plugin.withOptions(
  let pluginOptions = merge(
  {
  variablePrefix: '--prefix1',
- darkSelector: null, // default: .dark
  darkToRoot: false, // default: true ( :root.dark or .dark )
  },
  theme('myPlugin.variableOptions', {}),

examples/api-examples/with-themes/index.js

@@ -14,7 +14,6 @@ module.exports = plugin.withOptions(
  let pluginOptions = merge(
  {
  variablePrefix: '--prefix1',
- darkSelector: null, // default: .dark
  darkToRoot: false, // default: true ( :root.dark or .dark )
  },
  theme('myPlugin.variableOptions', {}),

examples/dark-custom-selector/tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
  content: ['./index.html'],
  corePlugins: process.env.CLEAN ? [] : {},
- darkMode: 'class',
+ darkMode: ['class', '.custom-dark-selector'],
  theme: {
  variables: (theme) => ({
  DEFAULT: {
@@ -46,7 +46,6 @@ module.exports = {
  },
  plugins: [
  require('../../src/index')({
- darkSelector: '.custom-dark-selector',
  darkToRoot: true,
  }),
  ],

src/index.js

@@ -1,5 +1,6 @@
 const plugin = require('tailwindcss/plugin')
 const isEmpty = require('lodash/isEmpty')
+const isUndefined = require('lodash/isUndefined')
 const api = require('./pluginApi')
 const has = require('lodash/has')
 const get = require('lodash/get')
@@ -13,7 +14,6 @@ const { convertColorVariables } = require('./helpers')
 module.exports = plugin.withOptions(
  function (options) {
  return function ({ addBase, addComponents, theme, config }) {
- let darkMode = config('darkMode')
  let variables = theme('variables', {})
  let darkVariables = theme('darkVariables', {})
  let toBase = get(options, 'toBase', true)
@@ -22,8 +22,15 @@ module.exports = plugin.withOptions(
  toBase ? addBase(getVariables) : addComponents(getVariables)
  }
 
- if (!isEmpty(darkVariables) && (darkMode === 'class' || darkMode === 'media')) {
- let getDarkVariables = api.darkVariables(darkVariables, options, darkMode)
+ if (isUndefined(options)) {
+ options = {}
+ }
+
+ let [mode, darkSelector = '.dark'] = [].concat(config('darkMode', 'media'))
+ options.darkSelector = darkSelector
+
+ if (!isEmpty(darkVariables) && ['class', 'media'].includes(mode)) {
+ let getDarkVariables = api.darkVariables(darkVariables, options, mode)
  toBase ? addBase(getDarkVariables) : addComponents(getDarkVariables)
  }
  }