elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix: Light-Theme-Hintergrund auf PWA/Android reparieren

Browse Source 
Der hardcodierte Inline-Style auf body überschrieb --app-body-bg und ließ
hellen Modus mit dunklem Seitenhintergrund erscheinen. Theme-Bootstrap und
dynamisches theme-color ergänzen alle Scheme/Theme-Kombinationen.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-05-31 12:38:01 +02:00
parent 93e26b7807
commit 87973eaa4a
5 changed files with 137 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/themes.css
+7
View File
@@ -6,6 +6,7 @@
/* Fallback before JS hydrates (ocean · dark) */
html {
color-scheme: dark;
--app-theme-color: #0b0c10;
--app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
--app-text: #f1f5f9;
--app-text-heading: #f8fafc;
@@ -61,6 +62,7 @@ html {
/* ===== OCEAN · DARK (default) ===== */
html.scheme-dark.theme-ocean {
color-scheme: dark;
--app-theme-color: #0b0c10;
--app-body-bg: radial-gradient(circle at center, #1b264f 0%, #0b0c10 100%);
--app-text: #f1f5f9;
--app-text-heading: #f8fafc;
@@ -116,6 +118,7 @@ html.scheme-dark.theme-ocean {
/* ===== OCEAN · LIGHT ===== */
html.scheme-light.theme-ocean {
color-scheme: light;
--app-theme-color: #e2e8f0;
--app-body-bg: linear-gradient(165deg, #dbeafe 0%, #f8fafc 42%, #e2e8f0 100%);
--app-text: #1e293b;
--app-text-heading: #0f172a;
@@ -171,6 +174,7 @@ html.scheme-light.theme-ocean {
/* ===== MATERIAL · DARK ===== */
html.scheme-dark.theme-material {
color-scheme: dark;
--app-theme-color: #121212;
--app-body-bg: #121212;
--app-text: #f1f5f9;
--app-text-heading: #f8fafc;
@@ -226,6 +230,7 @@ html.scheme-dark.theme-material {
/* ===== MATERIAL · LIGHT ===== */
html.scheme-light.theme-material {
color-scheme: light;
--app-theme-color: #fafafa;
--app-body-bg: #fafafa;
--app-text: #212121;
--app-text-heading: #111827;
@@ -281,6 +286,7 @@ html.scheme-light.theme-material {
/* ===== CUPERTINO · DARK ===== */
html.scheme-dark.theme-cupertino {
color-scheme: dark;
--app-theme-color: #000000;
--app-body-bg: #000000;
--app-text: #ffffff;
--app-text-heading: #ffffff;
@@ -336,6 +342,7 @@ html.scheme-dark.theme-cupertino {
/* ===== CUPERTINO · LIGHT ===== */
html.scheme-light.theme-cupertino {
color-scheme: light;
--app-theme-color: #f2f2f7;
--app-body-bg: #f2f2f7;
--app-text: #1c1c1e;
--app-text-heading: #000000;