hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add automatic system light and dark themes

Browse Source
This commit is contained in:
Florian Heinz
2026-04-11 20:58:33 +02:00
parent 6b8af4f801
commit 0e00dfdc40
1 changed files with 112 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+112 -30
View File
@@ -22,6 +22,88 @@
--track-accent: rgba(139, 228, 255, 0.34);
--track-surface: rgba(255, 255, 255, 0.08);
--track-glow: rgba(139, 228, 255, 0.18);
--body-radial-one: radial-gradient(circle at 18% 18%, rgba(76, 171, 255, 0.24), transparent 34%);
--body-radial-two: radial-gradient(circle at 82% 12%, rgba(113, 255, 210, 0.18), transparent 28%);
--body-gradient: linear-gradient(145deg, #07111b 0%, #0b1e2e 35%, #13273b 65%, #08111b 100%);
--panel-gradient-top: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
--panel-gradient-accent: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 48%);
--pill-bg: rgba(255, 255, 255, 0.12);
--pill-border: rgba(255, 255, 255, 0.12);
--input-bg: rgba(255, 255, 255, 0.09);
--input-bg-focus: rgba(255, 255, 255, 0.12);
--input-border: rgba(255, 255, 255, 0.14);
--input-border-soft: rgba(255, 255, 255, 0.12);
--nav-hover-bg: rgba(255, 255, 255, 0.13);
--user-chip-bg: rgba(255, 255, 255, 0.1);
--eyebrow-color: rgba(239, 247, 255, 0.62);
--chart-axis-color: rgba(255, 255, 255, 0.1);
--chart-label-color: rgba(239, 247, 255, 0.65);
--chart-value-color: rgba(239, 247, 255, 0.9);
--line-point-stroke: rgba(7, 17, 27, 0.9);
--bar-grid-color: rgba(255, 255, 255, 0.08);
--calendar-detail-bg: rgba(255, 255, 255, 0.08);
--calendar-detail-border: rgba(255, 255, 255, 0.1);
--calendar-detail-eyebrow: rgba(239, 247, 255, 0.58);
--calendar-selected-stroke: rgba(255, 255, 255, 0.9);
--control-soft-bg: rgba(255, 255, 255, 0.08);
--control-soft-border: rgba(255, 255, 255, 0.16);
--brand-shadow: 0 10px 24px rgba(9, 25, 40, 0.22);
}
@media (prefers-color-scheme: light) {
:root {
--bg: #eef4fa;
--bg-soft: #dce8f2;
--surface: rgba(255, 255, 255, 0.72);
--surface-strong: rgba(255, 255, 255, 0.86);
--surface-border: rgba(120, 146, 172, 0.24);
--text: #12304b;
--muted: rgba(18, 48, 75, 0.66);
--shadow: 0 24px 60px rgba(78, 105, 130, 0.16);
--primary: #5abcf2;
--primary-strong: #1494de;
--accent: #63d9b4;
--warm: #ee9f63;
--danger: #db6b6b;
--good: #45c98d;
--track-accent: rgba(67, 153, 212, 0.22);
--track-surface: rgba(255, 255, 255, 0.46);
--track-glow: rgba(104, 201, 255, 0.16);
--body-radial-one: radial-gradient(circle at 18% 18%, rgba(115, 196, 255, 0.28), transparent 34%);
--body-radial-two: radial-gradient(circle at 82% 12%, rgba(129, 232, 212, 0.24), transparent 28%);
--body-gradient: linear-gradient(145deg, #eef5fb 0%, #e4eff7 40%, #d8e9f4 72%, #edf5fa 100%);
--panel-gradient-top: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58));
--panel-gradient-accent: radial-gradient(circle at top left, rgba(123, 190, 255, 0.18), transparent 48%);
--pill-bg: rgba(255, 255, 255, 0.54);
--pill-border: rgba(130, 158, 185, 0.22);
--input-bg: rgba(255, 255, 255, 0.62);
--input-bg-focus: rgba(255, 255, 255, 0.82);
--input-border: rgba(123, 153, 182, 0.26);
--input-border-soft: rgba(123, 153, 182, 0.22);
--nav-hover-bg: rgba(255, 255, 255, 0.56);
--user-chip-bg: rgba(255, 255, 255, 0.54);
--eyebrow-color: rgba(18, 48, 75, 0.5);
--chart-axis-color: rgba(18, 48, 75, 0.12);
--chart-label-color: rgba(18, 48, 75, 0.58);
--chart-value-color: rgba(18, 48, 75, 0.86);
--line-point-stroke: rgba(255, 255, 255, 0.95);
--bar-grid-color: rgba(18, 48, 75, 0.08);
--calendar-detail-bg: rgba(255, 255, 255, 0.6);
--calendar-detail-border: rgba(120, 146, 172, 0.18);
--calendar-detail-eyebrow: rgba(18, 48, 75, 0.48);
--calendar-selected-stroke: rgba(18, 48, 75, 0.52);
--control-soft-bg: rgba(255, 255, 255, 0.58);
--control-soft-border: rgba(123, 153, 182, 0.22);
--brand-shadow: 0 10px 24px rgba(82, 111, 138, 0.14);
}
html {
color-scheme: light;
}
select {
color-scheme: light;
}
}
*,
@@ -40,9 +122,9 @@ body {
min-height: 100vh;
font-family: var(--font-ui);
background:
radial-gradient(circle at 18% 18%, rgba(76, 171, 255, 0.24), transparent 34%),
radial-gradient(circle at 82% 12%, rgba(113, 255, 210, 0.18), transparent 28%),
linear-gradient(145deg, #07111b 0%, #0b1e2e 35%, #13273b 65%, #08111b 100%);
var(--body-radial-one),
var(--body-radial-two),
var(--body-gradient);
color: var(--text);
}
@@ -103,8 +185,8 @@ button {
.glass-panel {
border: 1px solid var(--surface-border);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 48%);
var(--panel-gradient-top),
var(--panel-gradient-accent);
backdrop-filter: blur(var(--panel-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--panel-blur)) saturate(150%);
box-shadow: var(--shadow);
@@ -149,9 +231,9 @@ button {
align-items: center;
padding: 0.48rem 0.8rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
background: var(--pill-bg);
color: var(--muted);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--pill-border);
font-size: 0.88rem;
letter-spacing: 0.01em;
}
@@ -167,10 +249,10 @@ button {
.topbar-date-input {
width: auto;
min-height: 2.2rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--input-border-soft);
border-radius: 999px;
padding: 0.45rem 0.9rem;
background: rgba(255, 255, 255, 0.08);
background: var(--control-soft-bg);
color: var(--text);
}
@@ -195,7 +277,7 @@ button {
place-items: center;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(9, 25, 40, 0.22);
box-shadow: var(--brand-shadow);
}
.brand-mark img {
@@ -222,7 +304,7 @@ button {
margin: 0 0 0.28rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(239, 247, 255, 0.62);
color: var(--eyebrow-color);
font-size: 0.74rem;
}
@@ -244,7 +326,7 @@ button {
.main-nav a:hover,
.main-nav a.active {
background: rgba(255, 255, 255, 0.13);
background: var(--nav-hover-bg);
color: var(--text);
transform: translateX(2px);
}
@@ -269,7 +351,7 @@ button {
gap: 0.75rem;
padding: 0.9rem 1rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.1);
background: var(--user-chip-bg);
}
.user-chip__name {
@@ -415,8 +497,8 @@ button {
margin-bottom: 1rem;
padding: 0.9rem 1rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--calendar-detail-bg);
border: 1px solid var(--calendar-detail-border);
}
.calendar-detail__meta {
@@ -425,7 +507,7 @@ button {
}
.calendar-detail__eyebrow {
color: rgba(239, 247, 255, 0.58);
color: var(--calendar-detail-eyebrow);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -537,7 +619,7 @@ button {
}
.calendar-cell--selected {
stroke: rgba(255, 255, 255, 0.9);
stroke: var(--calendar-selected-stroke);
stroke-width: 1.2;
filter: brightness(1.08);
}
@@ -566,7 +648,7 @@ button {
}
.line-point {
stroke: rgba(7, 17, 27, 0.9);
stroke: var(--line-point-stroke);
stroke-width: 1.5;
}
@@ -579,7 +661,7 @@ button {
}
.chart-axis {
stroke: rgba(255, 255, 255, 0.1);
stroke: var(--chart-axis-color);
stroke-width: 1;
}
@@ -589,12 +671,12 @@ button {
}
.chart-label {
fill: rgba(239, 247, 255, 0.65);
fill: var(--chart-label-color);
font-size: 11px;
}
.chart-value {
fill: rgba(239, 247, 255, 0.9);
fill: var(--chart-value-color);
font-size: 15px;
font-weight: 700;
}
@@ -607,7 +689,7 @@ button {
}
.bar-grid {
fill: rgba(255, 255, 255, 0.08);
fill: var(--bar-grid-color);
}
.bar-segment--sport {
@@ -619,12 +701,12 @@ button {
}
.bar-label {
fill: rgba(239, 247, 255, 0.62);
fill: var(--chart-label-color);
font-size: 11px;
}
.bar-value {
fill: rgba(239, 247, 255, 0.82);
fill: var(--chart-value-color);
font-size: 10px;
text-anchor: middle;
}
@@ -773,9 +855,9 @@ input[type="date"],
select,
textarea {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--input-border);
border-radius: 16px;
background: rgba(255, 255, 255, 0.09);
background: var(--input-bg);
color: var(--text);
padding: 0.9rem 1rem;
outline: none;
@@ -788,7 +870,7 @@ select {
option,
optgroup {
background: #10253a;
background: var(--bg-soft);
color: var(--text);
}
@@ -796,7 +878,7 @@ input:focus,
select:focus,
textarea:focus {
border-color: rgba(139, 228, 255, 0.5);
background: rgba(255, 255, 255, 0.12);
background: var(--input-bg-focus);
transform: translateY(-1px);
}
@@ -950,8 +1032,8 @@ input[type="range"] {
.ghost-button,
.ghost-link {
color: var(--text);
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--control-soft-border);
background: var(--control-soft-bg);
}
.ghost-link {