wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Use tuple syntax for customizing darkMode class name

Browse source
This commit is contained in:
Adam Wathan 2022-02-25 20:03:07 -05:00
parent 77156de519
commit ec962f09dd
2 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/corePlugins.js
View file

@ -171,7 +171,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', [
@ -182,7 +183,7 @@ export let variantPlugins = {
}
if (mode === 'class') {
addVariant('dark', '.dark &')
addVariant('dark', `${className} &`)
} else if (mode === 'media') {
addVariant('dark', '@media (prefers-color-scheme: dark)')
}

8
tests/dark-mode.test.js
View file

@ -23,10 +23,9 @@ it('should be possible to use the darkMode "class" mode', () => {
})
})
it('should be possible to change default class with darkMode "class" mode', () => {
it('should be possible to change the class name', () => {
let config = {
darkMode: 'class',
darkModeClassName: '.test-dark',
darkMode: ['class', '.test-dark'],
content: [{ raw: html`<div class="dark:font-bold"></div>` }],
corePlugins: { preflight: false },
}
@ -39,7 +38,8 @@ it('should be possible to change default class with darkMode "class" mode', () =
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.test-dark .dark\\:font-bold {
${defaults}
.test-dark .dark\:font-bold {
font-weight: 700;
}
`)