Follow the OS dark mode with a softer, readable palette

Elternbeirat.Web/Components/Layout/MainLayout.razor.css

@@ -26,8 +26,9 @@
    through as it scrolls underneath. */
 .site-header {
     /* Brand-blue bar with a warm accent underline -- the strongest, most visible
-       cue that carries the friendly tone across every page. */
-    background: var(--color-brand);
+       cue that carries the friendly tone across every page. Uses its own header
+       token so it stays deep blue in dark mode too (see app.css). */
+    background: var(--color-header);
     border-bottom: 3px solid var(--color-accent);
     box-shadow: var(--shadow);
     position: sticky;

Elternbeirat.Web/Features/Home/Home.razor.css

@@ -1,4 +1,6 @@
 .intro {
     font-size: 1.1rem;
-    color: #444;
+    /* Softer than body text, via the token -- so it adapts in dark mode instead of
+       staying a fixed dark grey that turns unreadable there. */
+    color: var(--color-text-soft);
 }

Elternbeirat.Web/Features/Posts/PostDetail.razor.css

@@ -8,6 +8,6 @@
 
 .post-meta time {
     display: block;
-    color: #777;
+    color: var(--color-text-soft);   /* token, so it adapts in dark mode */
     font-size: 0.85rem;
 }

Elternbeirat.Web/wwwroot/app.css

@@ -8,10 +8,18 @@
     --color-brand-dark: #16293f;
     --color-brand-tint: #eef2f7;
 
+    /* The header bar's background. Its own token (not --color-brand) so it stays a
+       deep blue in dark mode, where --color-brand is lightened for text/links. */
+    --color-header: #1f3a5f;
+
     /* Warm accent for highlights (active nav, event dates, call-outs). */
     --color-accent: #e8a13a;
     --color-accent-dark: #c9821c;
 
+    /* Headings. Its own token (not --color-brand) so headings and links can differ:
+       in dark mode headings become a soft white while links keep the brand blue. */
+    --color-heading: #1f3a5f;
+
     /* Text and surfaces. */
     --color-text: #222;
     --color-text-soft: #555;
@@ -41,11 +49,50 @@
     --content-width: 60rem;
 }
 
+/* Dark mode: follows the visitor's OS setting automatically (prefers-color-scheme).
+   No toggle and no JavaScript -- the browser applies this when the operating system
+   is set to dark. Only the colour tokens change; layout, spacing, radius and type
+   stay put, so the whole site adapts from this one block. Choices: a deep blue-grey
+   rather than pure black; cards a touch lighter than the page so they still lift off
+   it; the accent nudged brighter so it doesn't glare; shadows darkened since soft
+   light shadows are invisible on a dark background. The header keeps its deep blue. */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-brand: #7fb0e6;        /* headings/links need to stay bright enough
+                                          to read on the dark page background, not
+                                          just on the lighter card surface */
+        --color-brand-dark: #a3c8f0;   /* hover goes lighter, not darker, on dark */
+        --color-brand-tint: #232a35;
+
+        --color-header: #1a2a3f;       /* a hair deeper, to sit calmly on dark */
+
+        --color-accent: #f0b45c;
+        --color-accent-dark: #f0b45c;  /* no darkening needed on a dark surface */
+
+        --color-heading: #c9ced6;      /* soft white, kept a step brighter than the
+                                          body text so headings still lead the page */
+
+        --color-text: #a2a8b2;         /* eased right down to the soft tone -- full
+                                          near-white reads as glare on the dark page */
+        --color-text-soft: #a2a8b2;
+        --color-bg: #222834;           /* cards / content surface */
+        --color-page: #171b22;         /* page background, darker than the cards */
+        --color-surface: #1c212a;
+        --color-border: #333b47;
+
+        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
+        --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.4);
+    }
+}
+
 /* Base styles. Self-hosted system font stack — no external fonts, for privacy. */
 html {
     font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     line-height: 1.65;
     color: var(--color-text);
+    /* Tell the browser we support both schemes, so form controls, scrollbars and
+       the native <details> marker follow the OS setting instead of staying light. */
+    color-scheme: light dark;
     /* Smooth-scroll for in-page anchors, with room so headings clear the sticky
        header instead of hiding under it. */
     scroll-padding-top: 5rem;
@@ -72,7 +119,7 @@ a:hover {
    sections read as groups. */
 h1, h2, h3, h4 {
     line-height: 1.25;
-    color: var(--color-brand);
+    color: var(--color-heading);
     margin: var(--space-5) 0 var(--space-3);
 }