Skip to content

Commit 27e5ea7

Browse files
misodemisode
committed
Configure dark mode with tailwind
1 parent 410fca7 commit 27e5ea7

File tree

5 files changed

+97
-170
lines changed

5 files changed

+97
-170
lines changed

‎index.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,18 @@
3131
ga('set', 'dimension7', matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none');
3232
ga('send', 'pageview');
3333
</script>
34+
<script>
35+
(() => {
36+
const theme = localStorage.getItem('theme')
37+
const prefersLight = matchMedia('(prefers-color-scheme: light)').matches
38+
if (theme === 'system' ? !prefersLight : theme !== 'light') {
39+
document.documentElement.classList.add('dark')
40+
}
41+
})()
42+
</script>
3443
<meta charset="utf-8">
3544
<meta name="viewport" content="width=device-width, initial-scale=1.0">
36-
<title>Data Pack Generators - Minecraft 1.17, 1.18, 1.19</title>
45+
<title>Data Pack Generators - Minecraft 1.18, 1.19, 1.20</title>
3746
<link rel="icon" href="/src/favicon-32.png" sizes="32x32">
3847
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
3948
<script>

‎src/app/contexts/Theme.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { ComponentChildren } from 'preact'
22
import { createContext } from 'preact'
3-
import { useCallback, useContext, useEffect, useState } from 'preact/hooks'
3+
import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks'
44
import { Analytics } from '../Analytics.js'
5-
import { useMediaQuery } from '../hooks/index.js'
65
import { Store } from '../Store.js'
6+
import { useMediaQuery } from '../hooks/index.js'
77

88
interface Theme {
99
theme: string,
@@ -25,10 +25,6 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
2525
const prefersLight = useMediaQuery('(prefers-color-scheme: light)')
2626
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
2727

28-
useEffect(() => {
29-
document.documentElement.setAttribute('data-theme', theme)
30-
}, [theme])
31-
3228
const changeTheme = useCallback((newTheme: string) => {
3329
Analytics.changeTheme(theme, newTheme)
3430
Store.setTheme(newTheme)
@@ -39,13 +35,17 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
3935
Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none')
4036
}, [prefersLight, prefersDark])
4137

38+
const actualTheme = useMemo(() => {
39+
return theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark'
40+
}, [theme, prefersLight])
41+
4242
useEffect(() => {
43-
Analytics.setTheme(theme)
44-
}, [])
43+
document.documentElement.classList.toggle('dark', actualTheme === 'dark')
44+
}, [actualTheme])
4545

4646
const value: Theme = {
4747
theme,
48-
actualTheme: theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark',
48+
actualTheme,
4949
changeTheme,
5050
}
5151

‎src/styles/global.css

Lines changed: 50 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,4 @@
11
:root {
2-
--background-1: #1b1b1b;
3-
--background-2: #252525;
4-
--background-3: #222222;
5-
--background-4: #3d3d3d;
6-
--background-5: #383838;
7-
--background-6: #575757;
8-
--text-1: #ffffff;
9-
--text-2: #dcdcdc;
10-
--text-3: #c3c3c3;
11-
--accent-primary: #50baf9;
12-
--accent-success: #3eb84f;
13-
--accent-warning: #b8893e;
14-
--accent-danger: #cf4945;
15-
--accent-donate: #db61a2;
16-
--accent-site-1: #307328;
17-
--accent-site-2: #296422;
18-
--accent-sounds-1: #451475;
19-
--accent-sounds-2: #39155e;
20-
--accent-sounds-3: #6a08a3;
21-
--accent-sounds-4: #d1a5e6;
22-
--nav: #91908f;
23-
--nav-hover: #b4b3b0;
24-
--nav-faded: #4d4c4c;
25-
--nav-faded-hover: #6e6e6e;
26-
--selection: #445a9599;
27-
--errors-background: #62190f;
28-
--errors-background-2: #471610;
29-
--errors-background-3: #3f140f;
30-
--errors-text: #ffffffcc;
31-
--invalid-text: #fd7951;
32-
--success-background-3: #143f0f;
33-
--water-background-3: #0d3266;
34-
--lava-background-3: #662e0d;
35-
--text-saturation: 60%;
36-
--text-lightness: 45%;
37-
--editor-variable: #9CDCFE;
38-
--editor-string: #CE9178;
39-
--editor-constant: #569CD6;
40-
--editor-number: #B5CEA8;
41-
--diff-added: #3fb950;
42-
--diff-modified: #d29922;
43-
--diff-removed: #f85149;
44-
--diff-renamed: #7d8590;
45-
--diff-line-added: rgba(46, 160, 67, 0.15);
46-
--diff-line-removed: rgba(248, 81, 73, 0.1);
47-
--diff-line-separation: rgba(56, 139, 253, 0.1);
48-
--diff-numbers-added: rgba(63, 185, 80, 0.3);
49-
--diff-numbers-removed: rgba(248, 81, 73, 0.3);
50-
--diff-numbers-separation: rgba(56, 139, 253, 0.4);
51-
}
52-
53-
:root[data-theme=light] {
542
--background-1: #fafafa;
553
--background-2: #e2e2e2;
564
--background-3: #d4d3d3;
@@ -102,58 +50,56 @@
10250
--diff-numbers-separation: rgba(84, 174, 255, 0.4);
10351
}
10452

105-
@media (prefers-color-scheme: light) {
106-
:root[data-theme=system] {
107-
--background-1: #fafafa;
108-
--background-2: #e2e2e2;
109-
--background-3: #d4d3d3;
110-
--background-4: #b8b8b8;
111-
--background-5: #bdbdbd;
112-
--background-6: #cecece;
113-
--text-1: #000000;
114-
--text-2: #2f2f2f;
115-
--text-3: #494949;
116-
--accent-primary: #088cdb;
117-
--accent-success: #1a7f37;
118-
--accent-warning: #a36f1c;
119-
--accent-danger: #bd2f2a;
120-
--accent-donate: #bf3989;
121-
--accent-site-1: #2da44e;
122-
--accent-site-2: #2c974b;
123-
--accent-sounds-1: #b481e7;
124-
--accent-sounds-2: #c18df5;
125-
--accent-sounds-3: #af72d3;
126-
--accent-sounds-4: #efd3fd;
127-
--nav: #343a40;
128-
--nav-hover: #565d64;
129-
--nav-faded: #9fa2a7;
130-
--nav-faded-hover: #bcbfc3;
131-
--selection: #6786dd99;
132-
--errors-background: #f66653;
133-
--errors-background-2: #c13b29;
134-
--errors-background-3: #d8503e;
135-
--errors-text: #000000cc;
136-
--invalid-text: #a32600;
137-
--success-background-3: #6cd83e;
138-
--water-background-3: #3e79d8;
139-
--lava-background-3: #d86f3e;
140-
--text-saturation: 100%;
141-
--text-lightness: 30%;
142-
--editor-variable: #0451A5;
143-
--editor-string: #A31515;
144-
--editor-constant: #0000FF;
145-
--editor-number: #098658;
146-
--diff-added: #1a7f37;
147-
--diff-modified: #9a6700;
148-
--diff-removed: #d1242f;
149-
--diff-renamed: #656d76;
150-
--diff-line-added: rgb(230, 255, 236);
151-
--diff-line-removed: rgb(255, 235, 233);
152-
--diff-line-separation: rgb(221, 244, 255);
153-
--diff-numbers-added: rgb(204, 255, 216);
154-
--diff-numbers-removed: rgb(255, 215, 213);
155-
--diff-numbers-separation: rgba(84, 174, 255, 0.4);
156-
}
53+
:root.dark {
54+
--background-1: #1b1b1b;
55+
--background-2: #252525;
56+
--background-3: #222222;
57+
--background-4: #3d3d3d;
58+
--background-5: #383838;
59+
--background-6: #575757;
60+
--text-1: #ffffff;
61+
--text-2: #dcdcdc;
62+
--text-3: #c3c3c3;
63+
--accent-primary: #50baf9;
64+
--accent-success: #3eb84f;
65+
--accent-warning: #b8893e;
66+
--accent-danger: #cf4945;
67+
--accent-donate: #db61a2;
68+
--accent-site-1: #307328;
69+
--accent-site-2: #296422;
70+
--accent-sounds-1: #451475;
71+
--accent-sounds-2: #39155e;
72+
--accent-sounds-3: #6a08a3;
73+
--accent-sounds-4: #d1a5e6;
74+
--nav: #91908f;
75+
--nav-hover: #b4b3b0;
76+
--nav-faded: #4d4c4c;
77+
--nav-faded-hover: #6e6e6e;
78+
--selection: #445a9599;
79+
--errors-background: #62190f;
80+
--errors-background-2: #471610;
81+
--errors-background-3: #3f140f;
82+
--errors-text: #ffffffcc;
83+
--invalid-text: #fd7951;
84+
--success-background-3: #143f0f;
85+
--water-background-3: #0d3266;
86+
--lava-background-3: #662e0d;
87+
--text-saturation: 60%;
88+
--text-lightness: 45%;
89+
--editor-variable: #9CDCFE;
90+
--editor-string: #CE9178;
91+
--editor-constant: #569CD6;
92+
--editor-number: #B5CEA8;
93+
--diff-added: #3fb950;
94+
--diff-modified: #d29922;
95+
--diff-removed: #f85149;
96+
--diff-renamed: #7d8590;
97+
--diff-line-added: rgba(46, 160, 67, 0.15);
98+
--diff-line-removed: rgba(248, 81, 73, 0.1);
99+
--diff-line-separation: rgba(56, 139, 253, 0.1);
100+
--diff-numbers-added: rgba(63, 185, 80, 0.3);
101+
--diff-numbers-removed: rgba(248, 81, 73, 0.3);
102+
--diff-numbers-separation: rgba(56, 139, 253, 0.4);
157103
}
158104

159105
::selection {

‎src/styles/nodes.css

Lines changed: 27 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,4 @@
11
:root {
2-
--node-border: #3f3f3f;
3-
--node-background-label: #1b1b1b;
4-
--node-background-input: #272727;
5-
--node-background-hover: #1f1f1f;
6-
--node-text: #dadada;
7-
--node-text-dimmed: #b4b4b4;
8-
--node-selected: #ad9715;
9-
--node-selected-hover: #a38c0a;
10-
--node-selected-border: #8d7a0d;
11-
--node-add: #487c13;
12-
--node-add-hover: #3e7409;
13-
--node-add-border: #3b6e0c;
14-
--node-remove: #9b341b;
15-
--node-remove-hover: #922d13;
16-
--node-remove-border: #7e1d05;
17-
--node-indent-border: #454749;
18-
--category-predicate: #306163;
19-
--category-predicate-border: #224849;
20-
--category-predicate-background: #1d3333;
21-
--category-function: #838383;
22-
--category-function-border: #6b6b6b;
23-
--category-function-background: #414141;
24-
--category-pool: #386330;
25-
--category-pool-border: #2e4922;
26-
--category-pool-background: #21331d;
27-
}
28-
29-
:root[data-theme=light] {
302
--node-border: #bcbfc3;
313
--node-background-label: #e4e4e4;
324
--node-background-input: #ffffff;
@@ -54,35 +26,34 @@
5426
--category-pool-background: #b1d6a6;
5527
}
5628

57-
@media (prefers-color-scheme: light) {
58-
:root[data-theme=system] {
59-
--node-border: #bcbfc3;
60-
--node-background-label: #e4e4e4;
61-
--node-background-input: #ffffff;
62-
--node-background-hover: #e7e7e7;
63-
--node-text: #000000;
64-
--node-text-dimmed: #2c2c2c;
65-
--node-selected: #f0e65e;
66-
--node-selected-hover: #faf06c;
67-
--node-selected-border: #b9a327;
68-
--node-add: #9bd464;
69-
--node-add-hover: #a5dd70;
70-
--node-add-border: #498d09;
71-
--node-remove: #e76f51;
72-
--node-remove-hover: #f57656;
73-
--node-remove-border: #be4b2e;
74-
--node-indent-border: #b9b9b9;
75-
--category-predicate: #65b5b8;
76-
--category-predicate-border: #187e81;
77-
--category-predicate-background: #95c5c7;
78-
--category-function: #979fa7;
79-
--category-function-border: #788086;
80-
--category-function-background: #dce0e4;
81-
--category-pool: #76b865;
82-
--category-pool-border: #398118;
83-
--category-pool-background: #b1d6a6;
84-
}
29+
:root.dark {
30+
--node-border: #3f3f3f;
31+
--node-background-label: #1b1b1b;
32+
--node-background-input: #272727;
33+
--node-background-hover: #1f1f1f;
34+
--node-text: #dadada;
35+
--node-text-dimmed: #b4b4b4;
36+
--node-selected: #ad9715;
37+
--node-selected-hover: #a38c0a;
38+
--node-selected-border: #8d7a0d;
39+
--node-add: #487c13;
40+
--node-add-hover: #3e7409;
41+
--node-add-border: #3b6e0c;
42+
--node-remove: #9b341b;
43+
--node-remove-hover: #922d13;
44+
--node-remove-border: #7e1d05;
45+
--node-indent-border: #454749;
46+
--category-predicate: #306163;
47+
--category-predicate-border: #224849;
48+
--category-predicate-background: #1d3333;
49+
--category-function: #838383;
50+
--category-function-border: #6b6b6b;
51+
--category-function-background: #414141;
52+
--category-pool: #386330;
53+
--category-pool-border: #2e4922;
54+
--category-pool-background: #21331d;
8555
}
56+
8657
/* Node headers */
8758

8859
.node-header {

‎tailwind.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default {
44
"./index.html",
55
"./src/app/**/*.{js,ts,jsx,tsx}",
66
],
7+
darkMode: 'class',
78
theme: {
89
extend: {},
910
},

0 commit comments

Comments
 (0)