kismet.hasanaj/novarix.uk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding appearance toggle (light/dark mode)

Browse Source
This commit is contained in:
Kismet Hasanaj
2026-05-03 10:17:12 +02:00
parent d5e3fcf438
commit eaea202c49
6 changed files with 145 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+32 -5
View File
@@ -66,8 +66,7 @@
`@media (prefers-color-scheme: dark)` block.
--------------------------------------------------------------------------- */
:root {
color-scheme: light dark;
color-scheme: light;
--bg: var(--color-ink-50);
--surface: oklch(1 0 0 / 0.7);
--surface-strong: oklch(1 0 0 / 0.92);
@@ -85,8 +84,28 @@
--button-hover: var(--color-ink-800);
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: var(--color-ink-950);
--surface: oklch(0.13 0.028 255 / 0.55);
--surface-strong: oklch(0.13 0.028 255 / 0.85);
--text: var(--color-ink-100);
--text-soft: var(--color-ink-400);
--border: oklch(1 0 0 / 0.08);
--border-strong: oklch(1 0 0 / 0.16);
--accent: var(--color-brand-400);
--accent-soft: oklch(0.7 0.14 240 / 0.18);
--ring: oklch(0.7 0.14 240 / 0.5);
--grid: oklch(0.84 0.012 250 / 0.06);
--button-bg: var(--color-ink-100);
--button-fg: var(--color-ink-950);
--button-hover: var(--color-ink-50);
}
@media (prefers-color-scheme: dark) {
:root {
:root:not([data-theme]) {
color-scheme: dark;
--bg: var(--color-ink-950);
--surface: oklch(0.13 0.028 255 / 0.55);
--surface-strong: oklch(0.13 0.028 255 / 0.85);
@@ -218,12 +237,20 @@
display: none;
}
:root[data-theme="dark"] .brand-light {
display: none;
}
:root[data-theme="dark"] .brand-dark {
display: block;
}
@media (prefers-color-scheme: dark) {
.brand-light {
:root:not([data-theme]) .brand-light {
display: none;
}
.brand-dark {
:root:not([data-theme]) .brand-dark {
display: block;
}
}