melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: polish dark theme colors and add border accents

Browse Source
This commit is contained in:
mkelvers
2026-06-12 10:48:55 +02:00
parent 3ae09d4014
commit 15ad54a847
4 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/assets/style.css
View File

@@ -4,14 +4,15 @@
@source "../**/*.ts";
@theme {
--color-background: light-dark(#ffffff, #0b0c10);
--color-background-sidebar: light-dark(#f7f7f7, #0f1115);
--color-background-header: light-dark(#fbfbfb, #0f1115);
--color-background-surface: light-dark(#ffffff, #17181c);
--color-background-button: light-dark(#f5f5f5, #131417);
--color-background-button-hover: light-dark(#ececec, #1c1d22);
--color-foreground: light-dark(#111111, #f3f4f6);
--color-accent: #00b3c4;
--color-background: light-dark(#ffffff, #101113);
--color-background-sidebar: light-dark(#f7f7f7, #161719);
--color-background-header: light-dark(#fbfbfb, #161719);
--color-background-surface: light-dark(#ffffff, #1b1c1f);
--color-background-button: light-dark(#f5f5f5, #202125);
--color-background-button-hover: light-dark(#ececec, #292a2f);
--color-foreground: light-dark(#111111, #f4f1ea);
--color-accent: light-dark(#007a85, #00b3c4);
--color-on-accent: light-dark(#ffffff, #000000);
--color-surface-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
}
@@ -36,14 +37,14 @@
:root {
color-scheme: light dark;
--skeleton-base: light-dark(#e5e5e5, #1f1f1f);
--skeleton-highlight: light-dark(#d4d4d4, #2a2a2a);
--border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
--border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.035));
--shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.28));
--scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
--scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.2));
--scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.3));
--skeleton-base: light-dark(#e5e5e5, #242529);
--skeleton-highlight: light-dark(#d4d4d4, #303137);
--border: light-dark(rgba(0, 0, 0, 0.08), rgba(244, 241, 234, 0.08));
--border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.04));
--shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.32));
--scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.05));
--scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(244, 241, 234, 0.22));
--scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(244, 241, 234, 0.32));
}
html[data-theme="light"] {