diff --git a/src/corePlugins.js b/src/corePlugins.js index 913f4226524c..8926ddd0f9d1 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -134,7 +134,8 @@ export let variantPlugins = { }, darkVariants: ({ config, addVariant }) => { - let mode = config('darkMode', 'media') + let [mode, className = '.dark'] = [].concat(config('darkMode', 'media')) + if (mode === false) { mode = 'media' log.warn('darkmode-false', [ @@ -144,7 +145,7 @@ export let variantPlugins = { } if (mode === 'class') { - addVariant('dark', '.dark &') + addVariant('dark', `${className} &`) } else if (mode === 'media') { addVariant('dark', '@media (prefers-color-scheme: dark)') } diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index 940339152ab9..5ccf0ed9cb89 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -22,6 +22,28 @@ it('should be possible to use the darkMode "class" mode', () => { }) }) +it('should be possible to change the class name', () => { + let config = { + darkMode: ['class', '.test-dark'], + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .test-dark .dark\:font-bold { + font-weight: 700; + } + `) + }) +}) + it('should be possible to use the darkMode "media" mode', () => { let config = { darkMode: 'media',