FDS2610/Finanzmanager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix n.n.: Blaue Schrift im Hell- und Darkmode besser lesbar

Browse source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
fds2610-bot 2026-10-01 08:48:50 +02:00
parent 0c1983cb1f
commit 834cd13160
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changes.md
View file

@ -3,6 +3,7 @@
## Darkmode-Farben nach Mockup (01.10.2026) ## 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`). - 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) ## Favicon in hellem und dunklem Modus (01.10.2026)

19
public/static/app.css
View file

@ -20,6 +20,7 @@
--akzent: #1f6feb; --akzent: #1f6feb;
--akzent-text: #ffffff; --akzent-text: #ffffff;
--akzent-schwach: #e5efff; --akzent-schwach: #e5efff;
--akzent-schrift: #1757b8;
--navi-grund: #24313f; --navi-grund: #24313f;
--navi-text: #cdd7e2; --navi-text: #cdd7e2;
--navi-text-aktiv: #ffffff; --navi-text-aktiv: #ffffff;
@ -48,6 +49,7 @@
--akzent: #3e87fd; --akzent: #3e87fd;
--akzent-text: #0d1117; --akzent-text: #0d1117;
--akzent-schwach: #172a4a; --akzent-schwach: #172a4a;
--akzent-schrift: #7db1ff;
--navi-grund: #0a111e; --navi-grund: #0a111e;
--navi-text: #9fb0c8; --navi-text: #9fb0c8;
--navi-text-aktiv: #ffffff; --navi-text-aktiv: #ffffff;
@ -71,6 +73,7 @@
--akzent: #3e87fd; --akzent: #3e87fd;
--akzent-text: #0d1117; --akzent-text: #0d1117;
--akzent-schwach: #172a4a; --akzent-schwach: #172a4a;
--akzent-schrift: #7db1ff;
--navi-grund: #0a111e; --navi-grund: #0a111e;
--navi-text: #9fb0c8; --navi-text: #9fb0c8;
--navi-text-aktiv: #ffffff; --navi-text-aktiv: #ffffff;
@ -92,7 +95,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
a { color: var(--akzent); text-decoration: none; } a { color: var(--akzent-schrift); text-decoration: none; }
a:hover { text-decoration: underline; } a:hover { text-decoration: underline; }
code { code {
@ -242,7 +245,7 @@ code {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: 1.35rem;
font-weight: 600; font-weight: 600;
color: var(--akzent); color: var(--akzent-schrift);
} }
.werkzeuge { .werkzeuge {
@ -413,7 +416,7 @@ form.inline { display: inline; margin: 0; }
.schrittmarke { .schrittmarke {
display: inline-block; display: inline-block;
background: var(--akzent-schwach); background: var(--akzent-schwach);
color: var(--akzent); color: var(--akzent-schrift);
font-size: .8rem; font-size: .8rem;
font-weight: 600; font-weight: 600;
padding: .15rem .5rem; padding: .15rem .5rem;
@ -561,7 +564,7 @@ form.inline { display: inline; margin: 0; }
Ebene tiefer): Der Eintrag ist ein Link und sieht auch danach aus – sonst Ebene tiefer): Der Eintrag ist ein Link und sieht auch danach aus – sonst
probierte ihn niemand aus. */ probierte ihn niemand aus. */
a.legendenname { a.legendenname {
color: var(--akzent); color: var(--akzent-schrift);
text-decoration: underline dotted; text-decoration: underline dotted;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
@ -675,7 +678,7 @@ a.legendenname:hover { text-decoration: underline; }
margin-right: .4rem; margin-right: .4rem;
border-radius: 999px; border-radius: 999px;
background: var(--akzent-schwach); background: var(--akzent-schwach);
color: var(--akzent); color: var(--akzent-schrift);
font-family: var(--schrift-zahl); font-family: var(--schrift-zahl);
font-size: .8rem; font-size: .8rem;
text-align: center; text-align: center;
@ -939,7 +942,7 @@ table.budgetplaner td.budgetzelle { position: relative; }
} }
.zahnrad:hover, .zahnrad:hover,
.zahnrad[aria-expanded="true"] { color: var(--akzent); } .zahnrad[aria-expanded="true"] { color: var(--akzent-schrift); }
.zahnradmenue { .zahnradmenue {
position: absolute; position: absolute;
@ -1901,7 +1904,7 @@ table.bericht .wertlink {
table.bericht .zeilenlink:hover, table.bericht .zeilenlink:hover,
table.bericht .wertlink:hover { table.bericht .wertlink:hover {
color: var(--akzent); color: var(--akzent-schrift);
text-decoration: underline; text-decoration: underline;
} }
@ -2018,7 +2021,7 @@ table.bericht .wertlink:hover {
.vorschlagsmarke { .vorschlagsmarke {
background: var(--akzent-schwach); background: var(--akzent-schwach);
color: var(--akzent); color: var(--akzent-schrift);
font-size: .75rem; font-size: .75rem;
font-weight: 600; font-weight: 600;
padding: .1rem .5rem; padding: .1rem .5rem;