Skip to content
This repository was archived by the owner on May 27, 2021. It is now read-only.

Commit 6f072b4

Browse files
ChanceArthurChanceArthur
committed
Initial commit
0 parents  commit 6f072b4

9 files changed

+1157
-0
lines changed

Diff for: ‎.eslintrc.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true
5+
},
6+
"extends": "google",
7+
"globals": {
8+
"Atomics": "readonly",
9+
"SharedArrayBuffer": "readonly"
10+
},
11+
"parserOptions": {
12+
"ecmaVersion": 2018
13+
},
14+
"rules": {
15+
"max-len": 0,
16+
"quote-props": 0,
17+
"require-jsdoc": 0
18+
}
19+
}

Diff for: ‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
* text=auto
2+
* text eol=lf

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_Store
2+
node_modules

Diff for: ‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Chance Arthur
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Tailwind CSS Dark Mode
2+
3+
## Installation
4+
5+
```
6+
yarn add tailwindcss-dark-mode --dev
7+
```
8+
9+
Add the plugin to the `plugins` array in your Tailwind configuration.
10+
11+
```javascript
12+
plugins: [
13+
require('tailwindcss-dark-mode')()
14+
]
15+
```
16+
17+
If you'd like to switch between light and dark modes depending on the time of day, `dark-mode.js` is provided, which is a simple script that adds the `.mode-dark` class to the `<html>` element from 6 PM to 6 AM in the user's timezone.
18+
19+
## Usage
20+
21+
Dark mode must be enabled in your Tailwind configuration for any utilities that need it.
22+
23+
```javascript
24+
variants: {
25+
backgroundColor: ['responsive', 'hover', 'focus', 'dark'],
26+
borderColor: ['responsive', 'hover', 'focus', 'dark'],
27+
textColor: ['responsive', 'hover', 'focus', 'dark']
28+
}
29+
```
30+
31+
Styles specific to dark mode are applied as a variant (the same as responsive, hover, focus, etc).
32+
33+
```html
34+
<div class="bg-white dark:bg-black">
35+
<p class="text-black dark:text-white">
36+
My eyes are grateful.
37+
</p>
38+
</div>
39+
```
40+
41+
The markup above would show a white background with black text by default. If `.mode-dark` was applied to the `<html>` element, the background would be black with white text.
42+
43+
## PurgeCSS
44+
45+
If you are using PurgeCSS, you should either add `mode-dark` to the `whitelist` array...
46+
47+
```javascript
48+
whitelist: ['mode-dark']
49+
```
50+
51+
... Or add `dark-mode.js` to the `content` array.
52+
53+
```javascript
54+
content: [
55+
'**/*.js',
56+
'dark-mode.js'
57+
]
58+
```
59+
60+
Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the `.mode-dark` class is only applied when the page is loaded.

Diff for: ‎dark-mode.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
function setTheme() {
2+
const root = document.documentElement;
3+
const currentTime = new Date().getHours();
4+
5+
if (currentTime > 17 || currentTime < 6) {
6+
root.classList.add('mode-dark');
7+
}
8+
}
9+
setTheme();

Diff for: ‎index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = function() {
2+
return function({addVariant, e}) {
3+
addVariant('dark', ({modifySelectors, separator}) => {
4+
modifySelectors(({className}) => {
5+
return `.mode-dark .${e(`dark${separator}${className}`)}`;
6+
});
7+
});
8+
};
9+
};

Diff for: ‎package.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "tailwindcss-dark-mode",
3+
"description": "A Tailwind CSS plugin that adds a variant for dark mode",
4+
"version": "1.0.2",
5+
"author": "Chance Arthur",
6+
"license": "MIT",
7+
"copyright": "Chance Arthur",
8+
"main": "index.js",
9+
"homepage": "https://github.com/ChanceArthur/tailwindcss-dark-mode",
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/ChanceArthur/tailwindcss-dark-mode.git"
13+
},
14+
"bugs": "https://github.com/ChanceArthur/tailwindcss-dark-mode/issues",
15+
"keywords": [
16+
"tailwind",
17+
"tailwindcss",
18+
"tailwindcss-plugin",
19+
"dark-theme",
20+
"dark-mode",
21+
"postcss",
22+
"css",
23+
"javascript"
24+
],
25+
"dependencies": {
26+
"tailwindcss": "^1.0.0-beta.5"
27+
},
28+
"devDependencies": {
29+
"eslint": "^5.16.0",
30+
"eslint-config-google": "^0.12.0"
31+
}
32+
}

0 commit comments

Comments
 (0)