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,
} }

158
src/styles/global.css
View File

@@ -1,4 +1,56 @@
:root { :root {
--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-1: #1b1b1b;
--background-2: #252525; --background-2: #252525;
--background-3: #222222; --background-3: #222222;
@@ -50,112 +102,6 @@
--diff-numbers-separation: rgba(56, 139, 253, 0.4); --diff-numbers-separation: rgba(56, 139, 253, 0.4);
} }
:root[data-theme=light] {
--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);
}
@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);
}
}
::selection { ::selection {
background-color: var(--selection); background-color: var(--selection);
} }

85
src/styles/nodes.css
View File

@@ -1,4 +1,32 @@
:root { :root {
--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-border: #3f3f3f;
--node-background-label: #1b1b1b; --node-background-label: #1b1b1b;
--node-background-input: #272727; --node-background-input: #272727;
@@ -26,63 +54,6 @@
--category-pool-background: #21331d; --category-pool-background: #21331d;
} }
:root[data-theme=light] {
--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;
}
@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;
}
}
/* 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: {},
}, },