Skip to content

Commit

Permalink
Support disabling dark mode globally (#2530)
Browse files Browse the repository at this point in the history
* Support disabling dark mode globally

* Update changelog
  • Loading branch information
adamwathan authored Oct 9, 2020
1 parent b4259b1 commit 0feb064
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Make `outline` configurable, `outline-none` more accessible by default, and add `outline-black` and `outline-white` ([#2460](https://github.com/tailwindlabs/tailwindcss/pull/2460))
- Add additional small `rotate` and `skew` values ([#2528](https://github.com/tailwindlabs/tailwindcss/pull/2528))
- Add `xl`, `2xl`, and `3xl` border radius values ([#2529](https://github.com/tailwindlabs/tailwindcss/pull/2529))
- Support disabling dark mode variants globally ([#2530](https://github.com/tailwindlabs/tailwindcss/pull/2530))

## [1.8.12] - 2020-10-07

Expand Down
23 changes: 23 additions & 0 deletions __tests__/darkMode.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,29 @@ test('dark mode variants can be generated using the class strategy', () => {
})
})

test('dark mode variants can be disabled', () => {
const input = `
@variants dark {
.text-red {
color: red;
}
}
`

const expected = `
.text-red {
color: red;
}
`

expect.assertions(2)

return run(input, { dark: false }).then(result => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
})

test('dark mode variants stack with other variants', () => {
const input = `
@variants responsive, dark, hover, focus {
Expand Down
4 changes: 4 additions & 0 deletions src/flagged/darkModeVariantPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ export default function({ addVariant, config, postcss, prefix }) {
addVariant(
'dark',
({ container, separator, modifySelectors }) => {
if (config('dark') === false) {
return postcss.root()
}

if (config('dark') === 'media') {
const modified = modifySelectors(({ selector }) => {
return buildSelectorVariant(selector, 'dark', separator, message => {
Expand Down

0 comments on commit 0feb064

Please sign in to comment.