Skip to content

Commit

Permalink
Configure dark mode with tailwind
Browse files Browse the repository at this point in the history
  • Loading branch information
@misode
misode committed Oct 10, 2023
1 parent 410fca7 commit 27e5ea7
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 170 deletions.
11 changes: 10 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 9 additions & 9 deletions src/app/contexts/Theme.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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)
Expand All @@ -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,
}

Expand Down
154 changes: 50 additions & 104 deletions src/styles/global.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
83 changes: 27 additions & 56 deletions src/styles/nodes.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export default {
"./index.html",
"./src/app/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {},
},
Expand Down

1 comment on commit 27e5ea7

@vercel
Copy link

@vercel vercel bot commented on 27e5ea7 Oct 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

misode – ./

misode-git-master-misode.vercel.app
misode.vercel.app
misode-misode.vercel.app

Please sign in to comment.