Skip to content

Commit 02385b0

Browse files
upupmingupupming
committed
feat: support override shades and customized palette keys
1 parent 4065dde commit 02385b0

File tree

19 files changed

+472
-112
lines changed

19 files changed

+472
-112
lines changed

‎.github/workflows/ci.yml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ jobs:
2525
run: |
2626
pnpm i
2727
pnpm run build
28-
(cd examples/tailwind && pnpm run build && cp -r dist/ ../../dist/tailwind && cp -r dist/ ../../dist)
29-
(cd examples/windi && pnpm run build && cp -r dist/ ../../dist/windi)
28+
for d in examples/* ; do
29+
(cd "$d" && pnpm run build && cp -r dist/ ../../dist/"${d:9}" && cp -r dist/ ../../dist)
30+
done
3031
3132
- name: Deploy 🚀
3233
uses: JamesIves/[email protected]

‎.vscode/settings.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
"less.validate": false,
1111
"stylelint.enable": true,
1212
"stylelint.validate": ["css", "less", "html", "vue"],
13+
"editor.detectIndentation": false,
14+
"[markdown]": {
15+
"editor.formatOnSave": true,
16+
"editor.tabSize": 4,
17+
"editor.defaultFormatter": "yzhang.markdown-all-in-one"
18+
},
1319
// Use prettier to format files
1420
"editor.formatOnSave": true,
1521
// Since we use eslint to format js/ts files, so we have to disable prettier to avoid confilcts

‎README.md

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
# tailwindcss-themeable
22

3-
Adds multiple themes support for Tailwind CSS and Windi CSS.
4-
5-
You can just develop your app with one theme and it will work with multiple themes palette colors, all you need is just to specify your default (for shade `500`) color values for your theme pallette. We will generate all shades from `50` to `900` for you, following the built-in shade name convention of the [default color values](https://tailwindcss.com/docs/customizing-colors).
3+
- [tailwindcss-themeable](#tailwindcss-themeable)
4+
- [Demos](#demos)
5+
- [Installation](#installation)
6+
- [Usage](#usage)
7+
- [Override auto-generated shade values](#override-auto-generated-shade-values)
8+
- [Customized palette keys](#customized-palette-keys)
9+
- [Full configurations](#full-configurations)
10+
- [Reference](#reference)
611

7-
|Dracula (default theme)|Material|
8-
|-------|--------|
9-
|![dracula](img/dracula.png)|![material](img/material.png)|
12+
Adds multiple themes support for Tailwind CSS and Windi CSS.
1013

11-
Demo Link:
14+
You can just develop your app with one theme and it will work with multiple themes color palettes, all you need is just to specify your default (for shade `500`) color values for your theme pallette. We will generate all shades from `50` to `900` for you, following the built-in shade name convention of the [default color values](https://tailwindcss.com/docs/customizing-colors).
1215

13-
- Windi CSS: https://upupming.site/tailwindcss-themeable/windi/
14-
- Tailwind CSS: https://upupming.site/tailwindcss-themeable/tailwind/
16+
| Dracula (default theme) | Material |
17+
| --------------------------- | ----------------------------- |
18+
| ![dracula](img/dracula.png) | ![material](img/material.png) |
1519

16-
Demo source code:
20+
## Demos
1721

18-
- [Windi CSS](examples/windi/index.html)
19-
- [Tailwind CSS](examples/tailwind/index.html)
22+
| Demo | Demo Link | Source Code |
23+
| ----------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------ |
24+
| Tailwind CSS | https://upupming.site/tailwindcss-themeable/tailwind/ | [examples/tailwind](examples/tailwind) |
25+
| Windi CSS | https://upupming.site/tailwindcss-themeable/windi/ | [examples/windi](examples/windi) |
26+
| Override shades | https://upupming.site/tailwindcss-themeable/override-shades/ | [examples/override-shades](examples/override-shades) |
27+
| Customized palette keys | https://upupming.site/tailwindcss-themeable/customized-palette-keys/ | [examples/override-shades](examples/customized-palette-keys) |
2028

2129
## Installation
2230

@@ -26,7 +34,7 @@ npm i -D tailwindcss-themeable
2634

2735
## Usage
2836

29-
We define the color names following [the dracula contribute color palette](https://draculatheme.com/contribute).
37+
We define the color palette keys following [the dracula contribute color palette](https://draculatheme.com/contribute).
3038

3139
CSS variables are generated from build time, and added to the corresponding scope for usage.
3240

@@ -43,6 +51,7 @@ plugins: [
4351
{
4452
name: 'example-theme',
4553
palette: {
54+
// color palette key: hex code
4655
background: '#282A36',
4756
foreground: '#F8F8F2',
4857
selection: '#44475A',
@@ -227,9 +236,13 @@ Compiled CSS:
227236
}
228237
```
229238

230-
<hr>
239+
## Override auto-generated shade values
231240

232-
You can specify all the shades of a color if you want:
241+
As the [tailwindcss docs says](https://tailwindcss.com/docs/customizing-colors#generating-colors):
242+
243+
> Bad news, color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating these sorts of color palettes. We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.
244+
245+
You can specify all (or just a part of) the shades of a color if you want, this will overwrite the auto-generated shade value. It will be super useful if you find the auto-generated not satisfying. Below is an example configuration, you can explore more on the [`override-shades`](examples/override-shades) example:
233246

234247
```js
235248
themeable({
@@ -257,7 +270,35 @@ themeable({
257270
})
258271
```
259272
260-
Extra configurations:
273+
## Customized palette keys
274+
275+
You may find the dracula theme's palette key is not satisfying, and you may like some name convention such as `primary`, `secondary`, etc., just like [the material ui does](https://mui.com/customization/palette/). No problem, you can pass any key you want, but be cautious that you must define the `primary` key for all your themes to avoid the problem of missing a color when switching themes. The plugin will log a warning message if you forget some keys in a theme. Below is an example configuration, you can explore more on the [`customized-palette-keys`](examples/customized-palette-keys) example:
276+
277+
```js
278+
themeable({
279+
themes: [
280+
{
281+
name: 'theme-1',
282+
palette: {
283+
primary: '#42a5f5'
284+
//...
285+
}
286+
},
287+
{
288+
name: 'theme-2',
289+
palette: {
290+
// make sure all your themes have your customized keys to avoid problems when switching themes
291+
primary: '#fcba03'
292+
//...
293+
}
294+
}
295+
]
296+
})
297+
```
298+
299+
## Full configurations
300+
301+
This is the type definition of this plugin, you can dive into the source code to see more, all the type definitions are well documented for your convenience. If you have any questions, please fell free to open an issue.
261302
262303
```ts
263304
interface ThemeableOptions {

‎examples/customized-palette-keys/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>customized-palette-keys example</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
<script async type="module" src="./main.ts"></script>
10+
</head>
11+
<body>
12+
<div
13+
class="
14+
themeable-override
15+
text-themeable-foreground
16+
flex flex-col
17+
container
18+
mx-auto
19+
my-10
20+
text-center
21+
items-center
22+
relative
23+
"
24+
id="container"
25+
>
26+
<div class="color-block bg-themeable-primary-300 themeable-theme1">
27+
theme1: bg-themeable-primary-300
28+
</div>
29+
<div class="color-block bg-themeable-primary-500 themeable-theme1">
30+
theme1: bg-themeable-primary-500
31+
</div>
32+
<div class="color-block bg-themeable-primary-300 themeable-theme2">
33+
theme2: bg-themeable-primary-300
34+
</div>
35+
<div class="color-block bg-themeable-primary-500 themeable-theme2">
36+
theme2: bg-themeable-primary-500
37+
</div>
38+
</div>
39+
</body>
40+
</html>

‎examples/customized-palette-keys/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import 'virtual:windi.css'
2+
import 'virtual:windi-devtools'

‎examples/customized-palette-keys/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "customized-palette-keys",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"dev": "vite",
9+
"build": "vite build",
10+
"preview": "vite preview"
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "MIT",
15+
"devDependencies": {
16+
"vite": "^2.6.14",
17+
"vite-plugin-windicss": "^1.5.1",
18+
"windicss": "^3.2.1",
19+
"tailwindcss-themeable": "workspace:*"
20+
}
21+
}

‎examples/customized-palette-keys/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.color-block {
2+
@apply py-20 w-200
3+
text-5xl flex items-center justify-center
4+
border-themeable-foreground border-width-1px;
5+
}

‎examples/customized-palette-keys/vite.config.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import WindiCSS from 'vite-plugin-windicss'
2+
import { defineConfig } from 'vite'
3+
4+
export default defineConfig({
5+
plugins: [
6+
WindiCSS()
7+
],
8+
base: '/tailwindcss-themeable/customized-palette-keys/'
9+
})

‎examples/customized-palette-keys/windi.config.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { defineConfig } from 'windicss/helpers'
2+
import { themeable } from 'tailwindcss-themeable'
3+
4+
export default defineConfig({
5+
plugins: [
6+
themeable({
7+
themes: [
8+
{
9+
name: 'theme1',
10+
palette: {
11+
primary: '#42a5f5'
12+
}
13+
},
14+
{
15+
name: 'theme2',
16+
palette: {
17+
primary: '#fcba03'
18+
}
19+
},
20+
{
21+
name: 'theme3',
22+
palette: {
23+
// missing the `primary` key, will got a build warning
24+
}
25+
}
26+
]
27+
})
28+
]
29+
})

‎examples/override-shades/index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>override-shades example</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
<script async type="module" src="./main.ts"></script>
10+
</head>
11+
<body>
12+
<div
13+
class="
14+
themeable-override
15+
text-themeable-foreground
16+
flex flex-col
17+
container
18+
mx-auto
19+
my-10
20+
text-center
21+
items-center
22+
relative
23+
"
24+
id="container"
25+
>
26+
<div class="absolute top-140">This is overridden by configuration</div>
27+
<div class="color-block bg-themeable-comment-50">
28+
bg-themeable-comment-50
29+
</div>
30+
<div class="color-block bg-themeable-comment-100">
31+
bg-themeable-comment-100
32+
</div>
33+
<div class="color-block bg-themeable-comment-200">
34+
bg-themeable-comment-200
35+
</div>
36+
<div class="color-block bg-themeable-comment-300">
37+
bg-themeable-comment-300
38+
</div>
39+
<div class="color-block bg-themeable-comment-400">
40+
bg-themeable-comment-400
41+
</div>
42+
<div class="color-block bg-themeable-comment-500">
43+
bg-themeable-comment-500
44+
</div>
45+
<div class="color-block bg-themeable-comment-600">
46+
bg-themeable-comment-600
47+
</div>
48+
<div class="color-block bg-themeable-comment-700">
49+
bg-themeable-comment-700
50+
</div>
51+
<div class="color-block bg-themeable-comment-800">
52+
bg-themeable-comment-800
53+
</div>
54+
<div class="color-block bg-themeable-comment-900">
55+
bg-themeable-comment-900
56+
</div>
57+
</div>
58+
</body>
59+
</html>

‎examples/override-shades/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import 'virtual:windi.css'
2+
import 'virtual:windi-devtools'

‎examples/override-shades/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "override-shades",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"dev": "vite",
9+
"build": "vite build",
10+
"preview": "vite preview"
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "MIT",
15+
"devDependencies": {
16+
"vite": "^2.6.14",
17+
"vite-plugin-windicss": "^1.5.1",
18+
"windicss": "^3.2.1",
19+
"tailwindcss-themeable": "workspace:*"
20+
}
21+
}

‎examples/override-shades/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.color-block {
2+
@apply py-20 w-200
3+
text-5xl flex items-center justify-center
4+
border-themeable-foreground border-width-1px;
5+
}

‎examples/override-shades/vite.config.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import WindiCSS from 'vite-plugin-windicss'
2+
import { defineConfig } from 'vite'
3+
4+
export default defineConfig({
5+
plugins: [
6+
WindiCSS()
7+
],
8+
base: '/tailwindcss-themeable/override-shades/'
9+
})

‎examples/override-shades/windi.config.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { defineConfig } from 'windicss/helpers'
2+
import { themeable } from 'tailwindcss-themeable'
3+
4+
export default defineConfig({
5+
plugins: [
6+
themeable({
7+
themes: [
8+
{
9+
name: 'override',
10+
palette: {
11+
background: '#282A36',
12+
foreground: '#F8F8F2',
13+
selection: '#44475A',
14+
comment: {
15+
DEFAULT: '#6272A4',
16+
200: '#FF0000'
17+
},
18+
cyan: '#8BE9FD',
19+
green: '#50FA7B',
20+
orange: '#FFB86C',
21+
pink: '#FF79C6',
22+
purple: '#BD93F9',
23+
red: '#FF5555',
24+
yellow: '#F1FA8C'
25+
}
26+
}
27+
]
28+
})
29+
]
30+
})

‎examples/windi/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"keywords": [],
1313
"author": "",
14-
"license": "ISC",
14+
"license": "MIT",
1515
"devDependencies": {
1616
"vite": "^2.6.14",
1717
"vite-plugin-windicss": "^1.5.1",

0 commit comments

Comments
 (0)