akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 07:10:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Configure dark mode with tailwind

Browse Source
This commit is contained in:
Misode
2023-10-10 10:52:14 +02:00
parent 410fca7155
commit 27e5ea707b
5 changed files with 97 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -31,9 +31,18 @@
ga('set', 'dimension7', matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none'); ga('set', 'dimension7', matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none');
ga('send', 'pageview'); ga('send', 'pageview');
</script> </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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="icon" href="/src/favicon-32.png" sizes="32x32">
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script> <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<script> <script>

18
src/app/contexts/Theme.tsx
View File

@@ -1,9 +1,9 @@
import type { ComponentChildren } from 'preact' import type { ComponentChildren } from 'preact'
import { createContext } 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 { Analytics } from '../Analytics.js'
import { useMediaQuery } from '../hooks/index.js'
import { Store } from '../Store.js' import { Store } from '../Store.js'
import { useMediaQuery } from '../hooks/index.js'
interface Theme { interface Theme {
theme: string, theme: string,
@@ -25,10 +25,6 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
const prefersLight = useMediaQuery('(prefers-color-scheme: light)') const prefersLight = useMediaQuery('(prefers-color-scheme: light)')
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)') const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme)
}, [theme])
const changeTheme = useCallback((newTheme: string) => { const changeTheme = useCallback((newTheme: string) => {
Analytics.changeTheme(theme, newTheme) Analytics.changeTheme(theme, newTheme)
Store.setTheme(newTheme) Store.setTheme(newTheme)
@@ -39,13 +35,17 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none') Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none')
}, [prefersLight, prefersDark]) }, [prefersLight, prefersDark])
const actualTheme = useMemo(() => {
return theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark'
}, [theme, prefersLight])
useEffect(() => { useEffect(() => {
Analytics.setTheme(theme) document.documentElement.classList.toggle('dark', actualTheme === 'dark')
}, []) }, [actualTheme])
const value: Theme = { const value: Theme = {
theme, theme,
actualTheme: theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark', actualTheme,
changeTheme, changeTheme,
} }

154
src/styles/global.css
View File

@@ -1,56 +1,4 @@
:root { :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-1: #fafafa;
--background-2: #e2e2e2; --background-2: #e2e2e2;
--background-3: #d4d3d3; --background-3: #d4d3d3;
@@ -102,58 +50,56 @@
--diff-numbers-separation: rgba(84, 174, 255, 0.4); --diff-numbers-separation: rgba(84, 174, 255, 0.4);
} }
@media (prefers-color-scheme: light) { :root.dark {
:root[data-theme=system] { --background-1: #1b1b1b;
--background-1: #fafafa; --background-2: #252525;
--background-2: #e2e2e2; --background-3: #222222;
--background-3: #d4d3d3; --background-4: #3d3d3d;
--background-4: #b8b8b8; --background-5: #383838;
--background-5: #bdbdbd; --background-6: #575757;
--background-6: #cecece; --text-1: #ffffff;
--text-1: #000000; --text-2: #dcdcdc;
--text-2: #2f2f2f; --text-3: #c3c3c3;
--text-3: #494949; --accent-primary: #50baf9;
--accent-primary: #088cdb; --accent-success: #3eb84f;
--accent-success: #1a7f37; --accent-warning: #b8893e;
--accent-warning: #a36f1c; --accent-danger: #cf4945;
--accent-danger: #bd2f2a; --accent-donate: #db61a2;
--accent-donate: #bf3989; --accent-site-1: #307328;
--accent-site-1: #2da44e; --accent-site-2: #296422;
--accent-site-2: #2c974b; --accent-sounds-1: #451475;
--accent-sounds-1: #b481e7; --accent-sounds-2: #39155e;
--accent-sounds-2: #c18df5; --accent-sounds-3: #6a08a3;
--accent-sounds-3: #af72d3; --accent-sounds-4: #d1a5e6;
--accent-sounds-4: #efd3fd; --nav: #91908f;
--nav: #343a40; --nav-hover: #b4b3b0;
--nav-hover: #565d64; --nav-faded: #4d4c4c;
--nav-faded: #9fa2a7; --nav-faded-hover: #6e6e6e;
--nav-faded-hover: #bcbfc3; --selection: #445a9599;
--selection: #6786dd99; --errors-background: #62190f;
--errors-background: #f66653; --errors-background-2: #471610;
--errors-background-2: #c13b29; --errors-background-3: #3f140f;
--errors-background-3: #d8503e; --errors-text: #ffffffcc;
--errors-text: #000000cc; --invalid-text: #fd7951;
--invalid-text: #a32600; --success-background-3: #143f0f;
--success-background-3: #6cd83e; --water-background-3: #0d3266;
--water-background-3: #3e79d8; --lava-background-3: #662e0d;
--lava-background-3: #d86f3e; --text-saturation: 60%;
--text-saturation: 100%; --text-lightness: 45%;
--text-lightness: 30%; --editor-variable: #9CDCFE;
--editor-variable: #0451A5; --editor-string: #CE9178;
--editor-string: #A31515; --editor-constant: #569CD6;
--editor-constant: #0000FF; --editor-number: #B5CEA8;
--editor-number: #098658; --diff-added: #3fb950;
--diff-added: #1a7f37; --diff-modified: #d29922;
--diff-modified: #9a6700; --diff-removed: #f85149;
--diff-removed: #d1242f; --diff-renamed: #7d8590;
--diff-renamed: #656d76; --diff-line-added: rgba(46, 160, 67, 0.15);
--diff-line-added: rgb(230, 255, 236); --diff-line-removed: rgba(248, 81, 73, 0.1);
--diff-line-removed: rgb(255, 235, 233); --diff-line-separation: rgba(56, 139, 253, 0.1);
--diff-line-separation: rgb(221, 244, 255); --diff-numbers-added: rgba(63, 185, 80, 0.3);
--diff-numbers-added: rgb(204, 255, 216); --diff-numbers-removed: rgba(248, 81, 73, 0.3);
--diff-numbers-removed: rgb(255, 215, 213); --diff-numbers-separation: rgba(56, 139, 253, 0.4);
--diff-numbers-separation: rgba(84, 174, 255, 0.4);
}
} }
::selection { ::selection {

83
src/styles/nodes.css
View File

@@ -1,32 +1,4 @@
:root { :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-border: #bcbfc3;
--node-background-label: #e4e4e4; --node-background-label: #e4e4e4;
--node-background-input: #ffffff; --node-background-input: #ffffff;
@@ -54,35 +26,34 @@
--category-pool-background: #b1d6a6; --category-pool-background: #b1d6a6;
} }
@media (prefers-color-scheme: light) { :root.dark {
:root[data-theme=system] { --node-border: #3f3f3f;
--node-border: #bcbfc3; --node-background-label: #1b1b1b;
--node-background-label: #e4e4e4; --node-background-input: #272727;
--node-background-input: #ffffff; --node-background-hover: #1f1f1f;
--node-background-hover: #e7e7e7; --node-text: #dadada;
--node-text: #000000; --node-text-dimmed: #b4b4b4;
--node-text-dimmed: #2c2c2c; --node-selected: #ad9715;
--node-selected: #f0e65e; --node-selected-hover: #a38c0a;
--node-selected-hover: #faf06c; --node-selected-border: #8d7a0d;
--node-selected-border: #b9a327; --node-add: #487c13;
--node-add: #9bd464; --node-add-hover: #3e7409;
--node-add-hover: #a5dd70; --node-add-border: #3b6e0c;
--node-add-border: #498d09; --node-remove: #9b341b;
--node-remove: #e76f51; --node-remove-hover: #922d13;
--node-remove-hover: #f57656; --node-remove-border: #7e1d05;
--node-remove-border: #be4b2e; --node-indent-border: #454749;
--node-indent-border: #b9b9b9; --category-predicate: #306163;
--category-predicate: #65b5b8; --category-predicate-border: #224849;
--category-predicate-border: #187e81; --category-predicate-background: #1d3333;
--category-predicate-background: #95c5c7; --category-function: #838383;
--category-function: #979fa7; --category-function-border: #6b6b6b;
--category-function-border: #788086; --category-function-background: #414141;
--category-function-background: #dce0e4; --category-pool: #386330;
--category-pool: #76b865; --category-pool-border: #2e4922;
--category-pool-border: #398118; --category-pool-background: #21331d;
--category-pool-background: #b1d6a6;
}
} }
/* Node headers */ /* Node headers */
.node-header { .node-header {

1
tailwind.config.js
View File

@@ -4,6 +4,7 @@ export default {
"./index.html", "./index.html",
"./src/app/**/*.{js,ts,jsx,tsx}", "./src/app/**/*.{js,ts,jsx,tsx}",
], ],
darkMode: 'class',
theme: { theme: {
extend: {}, extend: {},
}, },