Tailwindcss prefers dark mode
Tailwind CSS plugin that adds variants for @media (prefers-color-scheme: dark). It can also generate dark variants with an activator CSS class on the html
, body
or any parent
tag making the dark classes active allowing easily switch between light and dark theme.
Installation
npm install tailwindcss-prefers-dark-mode --save-dev
Add the plugin to the plugins
array in your tailwind.config.js
file.
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-prefers-dark-mode')({
type: 'mediaQuery', // 'mediaQuery' or 'class'
className: '.dark-mode', // Activator css class if type === 'class'
prefix: 'dark' // Class name prefix for naming dark variants
})
]
};
Plugin params
You can customize how dark variants are generated depending on the params passed to the plugin. The old behaviour was passing no params or just an empty string. You can continue using the old config but passing an object is prefered. These are the different posibilities:
- No params. If no param is supplied, variants will be under
@media (prefers-color-scheme: dark)
and the default prefix for classes will bedark
.
require('tailwindcss-prefers-dark-mode')();
- Passing an string. In this case variants will be generated under
@media (prefers-color-scheme: dark)
but the prefix for classes will be the string passed. For example, withprefers-dark
:
require('tailwindcss-prefers-dark-mode')('prefers-dark');
- Passing an object allows you to choose between generate variants with
@media (prefers-color-scheme: dark)
or generate with an activator CSS class. Object properties:type
:mediaQuery
if you want the option with@media (prefers-color-scheme: dark)
orclass
if you prefer an activator CSS class. This field is required.className
: The activator CSS class if type isclass
. If noclassName
is provided,.dark-mode
class will be used as default.prefix
: Prefix for naming dark variants. If no prefix is provided,dark
will be used as default.
require('tailwindcss-prefers-dark-mode')({
type: 'class', // 'mediaQuery'
className: '.dark-mode',
prefix: 'dark'
});
Variants generated
dark
dark:hover
dark:focus
dark:active
dark:disabled
dark:odd
dark:even
dark:group-hover
dark:focus-within
dark:placeholder
<div class="bg-gray-100 dark:bg-gray-800 border-t-4 border-green-500">
<nav class="flex flex-wrap justify-end items-center p-4">
<a class="text-gray-700 hover:bg-gray-300 dark:hover:bg-transparent dark:focus:text-green-500" href="#">Text</a>
</nav>
</div>
Dark variants must be enabled on each utility in your tailwind.config.js
file.
variants: {
backgroundColor: [
"responsive",
"hover",
"focus",
"dark",
"dark:hover",
"dark:focus"
],
borderColor: [
"responsive",
"hover",
"focus",
"dark",
"dark:hover",
"dark:focus"
],
textColor: [
"responsive",
"hover",
"focus",
"group-hover",
"dark",
"dark:hover",
"dark:focus",
"dark:group-hover",
"focus-within",
"dark:focus-within",
"dark:odd",
"dark:even",
"dark:active",
"dark:disabled"
],
borderStyle: ["responsive", "dark"],
placeholderColor: ['responsive', 'focus', 'dark:placeholder']
}
You can check the full list of default variants in Tailwind default config file.
Use @apply to inline any existing utility classes in dark mode
With @media (prefers-color-scheme: dark)
Just use prefers-color-scheme
CSS media feature and apply Tailwind classes.
.btn {
@apply font-bold py-2 px-4 rounded bg-red-500;
}
@media (prefers-color-scheme: dark) {
.btn {
@apply bg-gray-500;
}
}
With activator CSS class
Just add the activator CSS class at the beggining of the selector and apply Tailwind classes.
.btn {
@apply font-bold py-2 px-4 rounded bg-red-500;
}
.dark-mode .btn {
@apply bg-gray-500;
}
Customize class name prefix for variants
dark
is used as default prefix for variants generated. It´s possible to change dark
for whatever you want, just pass any string as param or use prefix key if you pass an object as param to the plugin. For example, with prefers-dark
:
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-prefers-dark-mode')('prefers-dark')
]
};
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-prefers-dark-mode')({
type: 'class', // 'mediaQuery'
className: '.dark-mode',
prefix: 'prefers-dark'
})
]
};
And variants must be named with the new prefix:
variants: {
textColor: [
'responsive',
'hover',
'focus',
'group-hover',
'prefers-dark',
'prefers-dark:hover',
'prefers-dark:focus',
'prefers-dark:group-hover',
'focus-within',
'prefers-dark:focus-within'
];
}
Alternatives
If you're looking for a more complex approach, a different kind of configuration, or just want to know the alternatives, here is a list that you may find useful:
tailwindcss-theme-variants
— A complete variant-based theming plugin.tailwindcss-multi-theme
— A simple, yet good alternative if you want to stick to variants.tailwindcss-dark-mode
- Another variant alternative.tailwindcss-darkmode
- Another variant alternative.tailwindcss-theme-swapper
- Similar totailwindcss-theming
, but lower-level, and without the variant functionality.- Manually, by adding a
screens
media query in Tailwind's configuration.
A more complete comparison of the different theming plugins can be found here.
Not possible to override custom colors with built in color
When extending the tailwind colors and using one the the custom colors, it is not possible to override with a built in color. For example the following does not work.
The workaround is to remove 'dark:border-my-custom-color', but I would expect it to be possible to override both built in and extended colors with either built in or extended colors.
Adding Activators and Updating Readme
This adds the ability to customize the activator class on the body. By default it is 'dark-mode' , but some people may like the option to change this.
First Param is the prefix to
dark:mode
or whatever you want it to be.cats:hover
Second Param is the activator on thehtml
orbody
tag.dark-mode
or to stick with my above examplecats
Default
require(tailwindcss-darkmode)('dark', 'dark-mode')
Customrequire(tailwindcss-darkmode)('dark', 'cats')
Bump browserslist from 4.12.0 to 4.16.6
Bumps browserslist from 4.12.0 to 4.16.6.
Changelog
Sourced from browserslist's changelog.
... (truncated)
Commits
6fe3614
Release 4.16.6 version33ebac9
Update dependencies2128170
Add support for npm-shrinkwrap files alongside package-lock (#595)7cc2aed
Release 4.16.5 version27e4afd
Update dependencies1013a18
Fix version RegExpb879a1a
Use Node.js 16 on CIbd1e9e0
Fix ReDoS (#593)209adf9
Release 4.16.4 version3e2ae3b
Fix typesDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump postcss from 7.0.23 to 8.2.10
Bumps postcss from 7.0.23 to 8.2.10.
Release notes
Sourced from postcss's releases.
... (truncated)
Changelog
Sourced from postcss's changelog.
... (truncated)
Commits
8395d9f
Release 8.2.10 versionf2baaa7
Update ESLint configb6f3e4d
Fix unsafe regexp in getAnnotationURL() too4bcd727
Merge pull request #1553 from barak007/patch-27c2e97a
Add covrage ignore on error paths8c58434
Apply suggestions from code reviewff2fd57
add error for sourcePath8f02bdc
disable url based featuresa54d020
Fix browser bundling with webpack 58682b1e
Fix unsafe regexpDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump lodash from 4.17.19 to 4.17.21
Bumps lodash from 4.17.19 to 4.17.21.
Commits
f299b52
Bump to v4.17.21c4847eb
Improve performance oftoNumber
,trim
andtrimEnd
on large input strings3469357
Prevent command injection through_.template
'svariable
optionded9bc6
Bump to v4.17.20.63150ef
Documentation fixes.00f0f62
test.js: Remove trailing comma.846e434
Temporarily use a custom fork oflodash-cli
.5d046f3
Re-enable Travis tests on4.17
branch.aa816b3
Remove/npm-package
.Maintainer changes
This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump path-parse from 1.0.6 to 1.0.7
Bumps path-parse from 1.0.6 to 1.0.7.
Commits
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump lodash from 4.17.15 to 4.17.19
Bumps lodash from 4.17.15 to 4.17.19.
Release notes
Sourced from lodash's releases.
Commits
d7fbc52
Bump to v4.17.192e1c0f2
Add npm-package1b6c282
Bump to v4.17.18a370ac8
Bump to v4.17.171144918
Rebuild lodash and docs3a3b0fd
Bump to v4.17.16c84fe82
fix(zipObjectDeep): prototype pollution (#4759)e7b28ea
Sanitize sourceURL so it cannot affect evaled code (#4518)0cec225
Fix lodash.isEqual for circular references (#4320) (#4515)94c3a81
Document matches* shorthands for over* methods (#4510) (#4514)Maintainer changes
This version was pushed to npm by mathias, a new releaser for lodash since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
7efb22a
1.2.6ef88b93
security notice for additional prototype pollution issuec2b9819
isConstructorOrProto adapted from PRbc8ecee
test from prototype pollution PRDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump postcss from 7.0.23 to 7.0.36
Bumps postcss from 7.0.23 to 7.0.36.
Release notes
Sourced from postcss's releases.
Changelog
Sourced from postcss's changelog.
Commits
67e3d7b
Release 7.0.36 version54cbf3c
Backport ReDoS vulnerabilities from PostCSS 812832f3
Release 7.0.35 version4455ef6
Use OpenCollective in fundinge867c79
Add migration guide to PostCSS 8 error32a22a9
Release 7.0.34 version2293982
Lock build targets2c3a111
Release 7.0.33 version4105f21
Use yaspeller instead of yaspeller-cic8d02a0
Revert yaspeller-ci removalDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.