Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ChanceArthur/tailwindcss-dark-mode
🌚 A Tailwind CSS plugin that adds variants for dark mode
https://github.com/ChanceArthur/tailwindcss-dark-mode
css dark-mode dark-theme javascript postcss tailwind tailwindcss tailwindcss-plugin
Last synced: 3 months ago
JSON representation
🌚 A Tailwind CSS plugin that adds variants for dark mode
- Host: GitHub
- URL: https://github.com/ChanceArthur/tailwindcss-dark-mode
- Owner: ChanceArthur
- License: mit
- Archived: true
- Created: 2019-04-24T18:22:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-26T21:54:13.000Z (over 3 years ago)
- Last Synced: 2024-09-29T10:34:06.544Z (4 months ago)
- Topics: css, dark-mode, dark-theme, javascript, postcss, tailwind, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 181 KB
- Stars: 641
- Watchers: 7
- Forks: 17
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS Dark Mode
⚠️ [Dark mode is built in to Tailwind CSS as of v2.0](https://blog.tailwindcss.com/tailwindcss-v2). This plugin will receive no further updates.
## Installation
```
npm install tailwindcss-dark-mode --save-dev
```
Add the plugin to the `plugins` array in your Tailwind configuration.
```javascript
plugins: [
require('tailwindcss-dark-mode')()
]
```
## Usage
Styles generated by this plugin are only used if the selector is applied to the `` element. How you do that is up to you. `prefers-dark.js` is provided as an option, which is a simple script that enables dark mode based on the user's system theme.
### Available Variants
Variants for dark mode are based on [Tailwind's own variants](https://tailwindcss.com/docs/state-variants/)...
- `dark`
- `dark-hover`
- `dark-focus`
- `dark-active`
- `dark-disabled`
- `dark-group-hover`
- `dark-focus-within`
- `dark-even`
- `dark-odd`
- `dark-placeholder`
... and are used in the same way.
```html
```
### Enabling Variants
As with existing variants such as `hover` and `focus`, variants for dark mode must be enabled in your Tailwind configuration for any utilities that need them.
```javascript
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder']
}
```
**Please note:** This is only a simple demonstration for how dark variants are enabled and how they could be used. The variants provided by this plugin are **not** replacements for Tailwind's own variants, they are to be used _in addition_ to them. For example, anywhere you would enable `dark-hover`, you should also enable `hover`.
### Changing the Selector
By default, `.mode-dark` is used as the selector for dark mode. You can change this by adding the `darkSelector` key to the `theme` section in your Tailwind configuration.
```javascript
theme: {
darkSelector: '.mode-dark'
}
```
Don't forget to also change the selector in `prefers-dark.js` if you are using it.
## PurgeCSS
If you are using PurgeCSS, you should either add the selector to the `whitelist` array...
```javascript
whitelist: ['mode-dark']
```
... or add `prefers-dark.js` to the `content` array.
```javascript
content: [
'**/*.js',
'./node_modules/tailwindcss-dark-mode/prefers-dark.js',
'./or/your/own/prefers-dark.js'
]
```
Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the selector is only applied when the page is loaded.