From 27e5ea707bbc433f621555e5e0daaff5fb06bbfc Mon Sep 17 00:00:00 2001
From: Misode <misoloo64@gmail.com>
Date: Tue, 10 Oct 2023 10:52:14 +0200
Subject: [PATCH] Configure dark mode with tailwind

---
 index.html                 |  11 ++-
 src/app/contexts/Theme.tsx |  18 ++---
 src/styles/global.css      | 154 ++++++++++++-------------------------
 src/styles/nodes.css       |  83 +++++++-------------
 tailwind.config.js         |   1 +
 5 files changed, 97 insertions(+), 170 deletions(-)

diff --git a/index.html b/index.html
index d2f66316..83e04316 100644
--- a/index.html
+++ b/index.html
@@ -31,9 +31,18 @@
 		ga('set', 'dimension7', matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none');
 		ga('send', 'pageview');
 	</script>
+	<script>
+		(() => {
+			const theme = localStorage.getItem('theme')
+			const prefersLight = matchMedia('(prefers-color-scheme: light)').matches
+			if (theme === 'system' ? !prefersLight : theme !== 'light') {
+				document.documentElement.classList.add('dark')
+			}
+		})()
+	</script>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Data Pack Generators - Minecraft 1.17, 1.18, 1.19</title>
+	<title>Data Pack Generators - Minecraft 1.18, 1.19, 1.20</title>
 	<link rel="icon" href="/src/favicon-32.png" sizes="32x32">
 	<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
 	<script>
diff --git a/src/app/contexts/Theme.tsx b/src/app/contexts/Theme.tsx
index bcbe5ca3..ac1a4600 100644
--- a/src/app/contexts/Theme.tsx
+++ b/src/app/contexts/Theme.tsx
@@ -1,9 +1,9 @@
 import type { ComponentChildren } from 'preact'
 import { createContext } from 'preact'
-import { useCallback, useContext, useEffect, useState } from 'preact/hooks'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks'
 import { Analytics } from '../Analytics.js'
-import { useMediaQuery } from '../hooks/index.js'
 import { Store } from '../Store.js'
+import { useMediaQuery } from '../hooks/index.js'
 
 interface Theme {
 	theme: string,
@@ -25,10 +25,6 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
 	const prefersLight = useMediaQuery('(prefers-color-scheme: light)')
 	const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
 
-	useEffect(() => {
-		document.documentElement.setAttribute('data-theme', theme)
-	}, [theme])
-
 	const changeTheme = useCallback((newTheme: string) => {
 		Analytics.changeTheme(theme, newTheme)
 		Store.setTheme(newTheme)
@@ -39,13 +35,17 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
 		Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none')
 	}, [prefersLight, prefersDark])
 
+	const actualTheme = useMemo(() => {
+		return theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark'
+	}, [theme, prefersLight])
+
 	useEffect(() => {
-		Analytics.setTheme(theme)
-	}, [])
+		document.documentElement.classList.toggle('dark', actualTheme === 'dark')
+	}, [actualTheme])
 
 	const value: Theme = {
 		theme,
-		actualTheme: theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark',
+		actualTheme,
 		changeTheme,
 	}
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 4f2baa7f..54ecc832 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,56 +1,4 @@
 :root {
-	--background-1: #1b1b1b;
-	--background-2: #252525;
-	--background-3: #222222;
-	--background-4: #3d3d3d;
-	--background-5: #383838;
-	--background-6: #575757;
-	--text-1: #ffffff;
-	--text-2: #dcdcdc;
-	--text-3: #c3c3c3;
-	--accent-primary: #50baf9;
-	--accent-success: #3eb84f;
-	--accent-warning: #b8893e;
-	--accent-danger: #cf4945;
-	--accent-donate: #db61a2;
-	--accent-site-1: #307328;
-	--accent-site-2: #296422;
-	--accent-sounds-1: #451475;
-	--accent-sounds-2: #39155e;
-	--accent-sounds-3: #6a08a3;
-	--accent-sounds-4: #d1a5e6;
-	--nav: #91908f;
-	--nav-hover: #b4b3b0;
-	--nav-faded: #4d4c4c;
-	--nav-faded-hover: #6e6e6e;
-	--selection: #445a9599;
-	--errors-background: #62190f;
-	--errors-background-2: #471610;
-	--errors-background-3: #3f140f;
-	--errors-text: #ffffffcc;
-	--invalid-text: #fd7951;
-	--success-background-3: #143f0f;
-	--water-background-3: #0d3266;
-	--lava-background-3: #662e0d;
-	--text-saturation: 60%;
-	--text-lightness: 45%;
-	--editor-variable: #9CDCFE;
-	--editor-string: #CE9178;
-	--editor-constant: #569CD6;
-	--editor-number: #B5CEA8;
-	--diff-added: #3fb950;
-	--diff-modified: #d29922;
-	--diff-removed: #f85149;
-	--diff-renamed: #7d8590;
-	--diff-line-added: rgba(46, 160, 67, 0.15);
-	--diff-line-removed: rgba(248, 81, 73, 0.1);
-	--diff-line-separation: rgba(56, 139, 253, 0.1);
-	--diff-numbers-added: rgba(63, 185, 80, 0.3);
-	--diff-numbers-removed: rgba(248, 81, 73, 0.3);
-	--diff-numbers-separation: rgba(56, 139, 253, 0.4);
-}
-
-:root[data-theme=light] {
 	--background-1: #fafafa;
 	--background-2: #e2e2e2;
 	--background-3: #d4d3d3;
@@ -102,58 +50,56 @@
 	--diff-numbers-separation: rgba(84, 174, 255, 0.4);
 }
 
-@media (prefers-color-scheme: light) {
-	:root[data-theme=system] {
-		--background-1: #fafafa;
-		--background-2: #e2e2e2;
-		--background-3: #d4d3d3;
-		--background-4: #b8b8b8;
-		--background-5: #bdbdbd;
-		--background-6: #cecece;
-		--text-1: #000000;
-		--text-2: #2f2f2f;
-		--text-3: #494949;
-		--accent-primary: #088cdb;
-		--accent-success: #1a7f37;
-		--accent-warning: #a36f1c;
-		--accent-danger: #bd2f2a;
-		--accent-donate: #bf3989;
-		--accent-site-1: #2da44e;
-		--accent-site-2: #2c974b;
-		--accent-sounds-1: #b481e7;
-		--accent-sounds-2: #c18df5;
-		--accent-sounds-3: #af72d3;
-		--accent-sounds-4: #efd3fd;
-		--nav: #343a40;
-		--nav-hover: #565d64;
-		--nav-faded: #9fa2a7;
-		--nav-faded-hover: #bcbfc3;
-		--selection: #6786dd99;
-		--errors-background: #f66653;
-		--errors-background-2: #c13b29;
-		--errors-background-3: #d8503e;
-		--errors-text: #000000cc;
-		--invalid-text: #a32600;
-		--success-background-3: #6cd83e;
-		--water-background-3: #3e79d8;
-		--lava-background-3: #d86f3e;
-		--text-saturation: 100%;
-		--text-lightness: 30%;
-		--editor-variable: #0451A5;
-		--editor-string: #A31515;
-		--editor-constant: #0000FF;
-		--editor-number: #098658;
-		--diff-added: #1a7f37;
-		--diff-modified: #9a6700;
-		--diff-removed: #d1242f;
-		--diff-renamed: #656d76;
-		--diff-line-added: rgb(230, 255, 236);
-		--diff-line-removed: rgb(255, 235, 233);
-		--diff-line-separation: rgb(221, 244, 255);
-		--diff-numbers-added: rgb(204, 255, 216);
-		--diff-numbers-removed: rgb(255, 215, 213);
-		--diff-numbers-separation: rgba(84, 174, 255, 0.4);
-	}
+:root.dark {
+	--background-1: #1b1b1b;
+	--background-2: #252525;
+	--background-3: #222222;
+	--background-4: #3d3d3d;
+	--background-5: #383838;
+	--background-6: #575757;
+	--text-1: #ffffff;
+	--text-2: #dcdcdc;
+	--text-3: #c3c3c3;
+	--accent-primary: #50baf9;
+	--accent-success: #3eb84f;
+	--accent-warning: #b8893e;
+	--accent-danger: #cf4945;
+	--accent-donate: #db61a2;
+	--accent-site-1: #307328;
+	--accent-site-2: #296422;
+	--accent-sounds-1: #451475;
+	--accent-sounds-2: #39155e;
+	--accent-sounds-3: #6a08a3;
+	--accent-sounds-4: #d1a5e6;
+	--nav: #91908f;
+	--nav-hover: #b4b3b0;
+	--nav-faded: #4d4c4c;
+	--nav-faded-hover: #6e6e6e;
+	--selection: #445a9599;
+	--errors-background: #62190f;
+	--errors-background-2: #471610;
+	--errors-background-3: #3f140f;
+	--errors-text: #ffffffcc;
+	--invalid-text: #fd7951;
+	--success-background-3: #143f0f;
+	--water-background-3: #0d3266;
+	--lava-background-3: #662e0d;
+	--text-saturation: 60%;
+	--text-lightness: 45%;
+	--editor-variable: #9CDCFE;
+	--editor-string: #CE9178;
+	--editor-constant: #569CD6;
+	--editor-number: #B5CEA8;
+	--diff-added: #3fb950;
+	--diff-modified: #d29922;
+	--diff-removed: #f85149;
+	--diff-renamed: #7d8590;
+	--diff-line-added: rgba(46, 160, 67, 0.15);
+	--diff-line-removed: rgba(248, 81, 73, 0.1);
+	--diff-line-separation: rgba(56, 139, 253, 0.1);
+	--diff-numbers-added: rgba(63, 185, 80, 0.3);
+	--diff-numbers-removed: rgba(248, 81, 73, 0.3);
+	--diff-numbers-separation: rgba(56, 139, 253, 0.4);
 }
 
 ::selection {
diff --git a/src/styles/nodes.css b/src/styles/nodes.css
index 103eb1af..22035cd9 100644
--- a/src/styles/nodes.css
+++ b/src/styles/nodes.css
@@ -1,32 +1,4 @@
 :root {
-  --node-border: #3f3f3f;
-  --node-background-label: #1b1b1b;
-  --node-background-input: #272727;
-  --node-background-hover: #1f1f1f;
-  --node-text: #dadada;
-  --node-text-dimmed: #b4b4b4;
-  --node-selected: #ad9715;
-  --node-selected-hover: #a38c0a;
-  --node-selected-border: #8d7a0d;
-  --node-add: #487c13;
-  --node-add-hover: #3e7409;
-  --node-add-border: #3b6e0c;
-  --node-remove: #9b341b;
-  --node-remove-hover: #922d13;
-  --node-remove-border: #7e1d05;
-  --node-indent-border: #454749;
-  --category-predicate: #306163;
-  --category-predicate-border: #224849;
-  --category-predicate-background: #1d3333;
-  --category-function: #838383;
-  --category-function-border: #6b6b6b;
-  --category-function-background: #414141;
-  --category-pool: #386330;
-  --category-pool-border: #2e4922;
-  --category-pool-background: #21331d;
-}
-
-:root[data-theme=light] {
   --node-border: #bcbfc3;
   --node-background-label: #e4e4e4;
   --node-background-input: #ffffff;
@@ -54,35 +26,34 @@
   --category-pool-background: #b1d6a6;
 }
 
-@media (prefers-color-scheme: light) {
-  :root[data-theme=system] {
-    --node-border: #bcbfc3;
-    --node-background-label: #e4e4e4;
-    --node-background-input: #ffffff;
-    --node-background-hover: #e7e7e7;
-    --node-text: #000000;
-    --node-text-dimmed: #2c2c2c;
-    --node-selected: #f0e65e;
-    --node-selected-hover: #faf06c;
-    --node-selected-border: #b9a327;
-    --node-add: #9bd464;
-    --node-add-hover: #a5dd70;
-    --node-add-border: #498d09;
-    --node-remove: #e76f51;
-    --node-remove-hover: #f57656;
-    --node-remove-border: #be4b2e;
-    --node-indent-border: #b9b9b9;
-    --category-predicate: #65b5b8;
-    --category-predicate-border: #187e81;
-    --category-predicate-background: #95c5c7;
-    --category-function: #979fa7;
-    --category-function-border: #788086;
-    --category-function-background: #dce0e4;
-    --category-pool: #76b865;
-    --category-pool-border: #398118;
-    --category-pool-background: #b1d6a6;
-  }
+:root.dark {
+  --node-border: #3f3f3f;
+  --node-background-label: #1b1b1b;
+  --node-background-input: #272727;
+  --node-background-hover: #1f1f1f;
+  --node-text: #dadada;
+  --node-text-dimmed: #b4b4b4;
+  --node-selected: #ad9715;
+  --node-selected-hover: #a38c0a;
+  --node-selected-border: #8d7a0d;
+  --node-add: #487c13;
+  --node-add-hover: #3e7409;
+  --node-add-border: #3b6e0c;
+  --node-remove: #9b341b;
+  --node-remove-hover: #922d13;
+  --node-remove-border: #7e1d05;
+  --node-indent-border: #454749;
+  --category-predicate: #306163;
+  --category-predicate-border: #224849;
+  --category-predicate-background: #1d3333;
+  --category-function: #838383;
+  --category-function-border: #6b6b6b;
+  --category-function-background: #414141;
+  --category-pool: #386330;
+  --category-pool-border: #2e4922;
+  --category-pool-background: #21331d;
 }
+
 /* Node headers */
 
 .node-header {
diff --git a/tailwind.config.js b/tailwind.config.js
index 561e68f8..f8027043 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
     "./index.html",
     "./src/app/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },