Merge pull request 'Fix n.n.: Darkmode-Farben nach Mockup, blaue Schrift besser lesbar' (#104) from fds2610-bot/Finanzmanager:main into main

Reviewed-on: https://codeberg.org/fds2610/Finanzmanager/pulls/104

Changes.md

@@ -1,5 +1,14 @@
 # Änderungen
 
+## Darkmode-Farben nach Mockup (01.10.2026)
+
+- Dunkle Palette bläulicher (Navy) statt grau-blau, Seitenleiste, Flächen, Ränder und Akzent angepasst. Der aktive Menüeintrag ist wie im hellen Modus blau hinterlegt (`--navi-aktiv`), der Balken links bleibt weiß (neue Variable `--navi-balken`). Nur Farben, nur im Darkmode (`app.css`).
+- Blaue Schrift (Links, Überschriften, Marken) besser lesbar: im Darkmode heller, im Hellmodus dunkler. Eigene Variable `--akzent-schrift`, Knöpfe und Rahmen bleiben unverändert.
+
+## Favicon in hellem und dunklem Modus (01.10.2026)
+
+- Das Favicon war ein schwarzes „€“ ohne Hintergrund und im Darkmode kaum zu erkennen. Jetzt weißes „€“ auf blauer Kachel – in beiden Modi gut sichtbar (`kopf.php`, `schlicht.php`).
+
 ## Offener Vorgang für fehlgeschlagene Bargeld-Tool-Prüfungen (30.09.2026)
 
 - Die Kachel „Offene Vorgänge“ im Cockpit zählt jetzt auch Buchungen, deren letzter Abgleich

public/static/app.css

@@ -20,11 +20,13 @@
     --akzent: #1f6feb;
     --akzent-text: #ffffff;
     --akzent-schwach: #e5efff;
+    --akzent-schrift: #1757b8;
     --navi-grund: #24313f;
     --navi-text: #cdd7e2;
     --navi-text-aktiv: #ffffff;
     --navi-aktiv: #1f6feb;
     --navi-marke: #6ea8fe;
+    --navi-balken: #ffffff;
     --positiv: #1a7f4b;
     --negativ: #c0392b;
     --warnung: #9a6700;
@@ -37,20 +39,22 @@
 
 @media (prefers-color-scheme: dark) {
     :root:not([data-thema="hell"]) {
-        --grund: #161b22;
+        --grund: #0d1624;
-        --flaeche: #1c2330;
+        --flaeche: #121c2e;
-        --flaeche-gedaempft: #232b39;
+        --flaeche-gedaempft: #17233a;
-        --rand: #303a49;
+        --rand: #1f2b3f;
-        --rand-kraeftig: #44506180;
+        --rand-kraeftig: #2c3a52;
         --text: #e5eaf1;
         --text-gedaempft: #9aa7b6;
-        --akzent: #4d8ef7;
+        --akzent: #3e87fd;
         --akzent-text: #0d1117;
-        --akzent-schwach: #1d2b45;
+        --akzent-schwach: #172a4a;
-        --navi-grund: #10151c;
+        --akzent-schrift: #7db1ff;
-        --navi-text: #9aa7b6;
+        --navi-grund: #0a111e;
+        --navi-text: #9fb0c8;
         --navi-text-aktiv: #ffffff;
-        --navi-aktiv: #2f6fd0;
+        --navi-aktiv: #1f6feb;
+        --navi-balken: #ffffff;
         --positiv: #46b877;
         --negativ: #f0705f;
         --warnung: #d9a441;
@@ -59,20 +63,22 @@
 }
 
 :root[data-thema="dunkel"] {
-    --grund: #161b22;
+    --grund: #0d1624;
-    --flaeche: #1c2330;
+    --flaeche: #121c2e;
-    --flaeche-gedaempft: #232b39;
+    --flaeche-gedaempft: #17233a;
-    --rand: #303a49;
+    --rand: #1f2b3f;
-    --rand-kraeftig: #445061;
+    --rand-kraeftig: #2c3a52;
     --text: #e5eaf1;
     --text-gedaempft: #9aa7b6;
-    --akzent: #4d8ef7;
+    --akzent: #3e87fd;
     --akzent-text: #0d1117;
-    --akzent-schwach: #1d2b45;
+    --akzent-schwach: #172a4a;
-    --navi-grund: #10151c;
+    --akzent-schrift: #7db1ff;
-    --navi-text: #9aa7b6;
+    --navi-grund: #0a111e;
+    --navi-text: #9fb0c8;
     --navi-text-aktiv: #ffffff;
-    --navi-aktiv: #2f6fd0;
+    --navi-aktiv: #1f6feb;
+    --navi-balken: #ffffff;
     --positiv: #46b877;
     --negativ: #f0705f;
     --warnung: #d9a441;
@@ -89,7 +95,7 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
-a { color: var(--akzent); text-decoration: none; }
+a { color: var(--akzent-schrift); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
 code {
@@ -177,7 +183,7 @@ code {
 
 .seitenleiste a.aktiv {
     background: var(--navi-aktiv);
-    border-left-color: #fff;
+    border-left-color: var(--navi-balken);
     color: var(--navi-text-aktiv);
     font-weight: 500;
 }
@@ -239,7 +245,7 @@ code {
     margin: 0;
     font-size: 1.35rem;
     font-weight: 600;
-    color: var(--akzent);
+    color: var(--akzent-schrift);
 }
 
 .werkzeuge {
@@ -410,7 +416,7 @@ form.inline { display: inline; margin: 0; }
 .schrittmarke {
     display: inline-block;
     background: var(--akzent-schwach);
-    color: var(--akzent);
+    color: var(--akzent-schrift);
     font-size: .8rem;
     font-weight: 600;
     padding: .15rem .5rem;
@@ -558,7 +564,7 @@ form.inline { display: inline; margin: 0; }
    Ebene tiefer): Der Eintrag ist ein Link und sieht auch danach aus – sonst
    probierte ihn niemand aus. */
 a.legendenname {
-    color: var(--akzent);
+    color: var(--akzent-schrift);
     text-decoration: underline dotted;
     text-underline-offset: 2px;
 }
@@ -672,7 +678,7 @@ a.legendenname:hover { text-decoration: underline; }
     margin-right: .4rem;
     border-radius: 999px;
     background: var(--akzent-schwach);
-    color: var(--akzent);
+    color: var(--akzent-schrift);
     font-family: var(--schrift-zahl);
     font-size: .8rem;
     text-align: center;
@@ -936,7 +942,7 @@ table.budgetplaner td.budgetzelle { position: relative; }
 }
 
 .zahnrad:hover,
-.zahnrad[aria-expanded="true"] { color: var(--akzent); }
+.zahnrad[aria-expanded="true"] { color: var(--akzent-schrift); }
 
 .zahnradmenue {
     position: absolute;
@@ -1898,7 +1904,7 @@ table.bericht .wertlink {
 
 table.bericht .zeilenlink:hover,
 table.bericht .wertlink:hover {
-    color: var(--akzent);
+    color: var(--akzent-schrift);
     text-decoration: underline;
 }
 
@@ -2015,7 +2021,7 @@ table.bericht .wertlink:hover {
 
 .vorschlagsmarke {
     background: var(--akzent-schwach);
-    color: var(--akzent);
+    color: var(--akzent-schrift);
     font-size: .75rem;
     font-weight: 600;
     padding: .1rem .5rem;

src/Views/layout/kopf.php

@@ -51,7 +51,7 @@ $istAktiv = static function (string $pfad, array $auch = []) use ($aktuellerPfad
     <!-- Nur hier eingebunden: Ein zweites Mal im Fuß ließe jeden Handler doppelt
          laufen – Rückfragen kämen zweimal, Menüs entstünden zweimal. -->
     <script src="/static/app.js" defer></script>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>€</text></svg>">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect width='16' height='16' rx='3' fill='%231d6fb8'/><text x='8' y='12.5' font-size='12' font-weight='bold' text-anchor='middle' fill='white' font-family='sans-serif'>€</text></svg>">
 </head>
 <body>
 <?php include __DIR__ . '/meldungen.php'; ?>

src/Views/layout/schlicht.php

@@ -17,7 +17,7 @@ use Finanzmanager\View;
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><?= View::h($titel) ?> – Finanzmanager</title>
     <link rel="stylesheet" href="/static/app.css">
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>€</text></svg>">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect width='16' height='16' rx='3' fill='%231d6fb8'/><text x='8' y='12.5' font-size='12' font-weight='bold' text-anchor='middle' fill='white' font-family='sans-serif'>€</text></svg>">
 </head>
 <body class="schlicht">
 <?php include __DIR__ . '/meldungen.php'; ?>