Entwicklung/xxx-sphere-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Light- und Darkmode hinzugefügt
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Mario Störmer
2026-04-28 14:07:32 +02:00
parent 34e5fcd777
commit 843acea652
75 changed files with 830 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
bin/main/static/css/variables.css Normal file
View File

@@ -0,0 +1,157 @@
/* ──────────────────────────────────────────────────────────────────────────
xXx Sphere – Design Tokens
Dark ist der Default.
Reihenfolge der Auflösung:
1. :root → dark (Fallback, Spez. 0,1,0)
2. @media prefers-light → light via OS (Spez. 0,1,0, überschreibt via Position)
3. :root[data-theme=dark] → dark manuell (Spez. 0,2,0 – schlägt immer :root)
4. :root[data-theme=light]→ light manuell (Spez. 0,2,0 – schlägt immer :root)
JS setzt data-theme auf <html> und gewinnt damit immer.
────────────────────────────────────────────────────────────────────────── */
/* ── 1. Dark mode – Default ───────────────────────────────────────────────── */
:root {
color-scheme: dark;
/* Surfaces */
--color-bg: #0e0c15;
--color-card: #19162a;
--color-secondary: #272338;
--color-surface: #201d2f;
/* Text */
--color-text: #eae8f0;
--color-muted: #8a879a;
/* Brand */
--color-primary: #e94560;
--color-primary-rgb: 233, 69, 96;
/* Semantic */
--color-success: #27ae60;
--color-danger: #e74c3c;
/* Aliases */
--color-border: #272338;
--color-hover: #272338;
/* Shadows */
--shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
/* Overlay */
--overlay-bg: rgba(0, 0, 0, 0.55);
/* Message boxes */
--msg-error-bg: #3d0f1a;
--msg-warning-bg: #3a2c0a;
--msg-warning-text: #f5c518;
--msg-success-bg: #0f3d1a;
/* Buttons */
--btn-primary-hover: #c73652;
--btn-secondary-hover: #1a3a6a;
/* Misc */
--placeholder: rgba(234, 232, 240, 0.35);
--unread: #e94560;
--accept: #27ae60;
--decline: #c0392b;
--breakpoint-mobile: 768px;
}
/* ── 2. Light mode via OS (CSS-Fallback, wenn JS nicht verfügbar) ─────────── */
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
--color-bg: #f2f0f9;
--color-card: #ffffff;
--color-secondary: #e9e6f5;
--color-surface: #f7f5fc;
--color-text: #1a1628;
--color-muted: #6a677e;
--color-primary: #c9324d;
--color-primary-rgb: 201, 50, 77;
--color-success: #1a8c4e;
--color-danger: #c0392b;
--color-border: #d8d4ed;
--color-hover: #e9e6f5;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
--overlay-bg: rgba(0, 0, 0, 0.35);
--msg-error-bg: #fde8ec;
--msg-warning-bg: #fdf5e0;
--msg-warning-text: #b38800;
--msg-success-bg: #e0f5e8;
--btn-primary-hover: #a82942;
--btn-secondary-hover: #d8d4ed;
--placeholder: rgba(26, 22, 40, 0.30);
--unread: #c9324d;
--accept: #1a8c4e;
--decline: #c0392b;
}
}
/* ── 3+4. JS-Override via data-theme auf <html> ───────────────────────────── */
/* :root[data-theme] hat Spezifität (0,2,0) und schlägt :root (0,1,0) immer. */
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: #0e0c15;
--color-card: #19162a;
--color-secondary: #272338;
--color-surface: #201d2f;
--color-text: #eae8f0;
--color-muted: #8a879a;
--color-primary: #e94560;
--color-primary-rgb: 233, 69, 96;
--color-success: #27ae60;
--color-danger: #e74c3c;
--color-border: #272338;
--color-hover: #272338;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
--overlay-bg: rgba(0, 0, 0, 0.55);
--msg-error-bg: #3d0f1a;
--msg-warning-bg: #3a2c0a;
--msg-warning-text: #f5c518;
--msg-success-bg: #0f3d1a;
--btn-primary-hover: #c73652;
--btn-secondary-hover: #1a3a6a;
--placeholder: rgba(234, 232, 240, 0.35);
--unread: #e94560;
--accept: #27ae60;
--decline: #c0392b;
}
:root[data-theme="light"] {
color-scheme: light;
--color-bg: #f2f0f9;
--color-card: #ffffff;
--color-secondary: #e9e6f5;
--color-surface: #f7f5fc;
--color-text: #1a1628;
--color-muted: #6a677e;
--color-primary: #c9324d;
--color-primary-rgb: 201, 50, 77;
--color-success: #1a8c4e;
--color-danger: #c0392b;
--color-border: #d8d4ed;
--color-hover: #e9e6f5;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
--overlay-bg: rgba(0, 0, 0, 0.35);
--msg-error-bg: #fde8ec;
--msg-warning-bg: #fdf5e0;
--msg-warning-text: #b38800;
--msg-success-bg: #e0f5e8;
--btn-primary-hover: #a82942;
--btn-secondary-hover: #d8d4ed;
--placeholder: rgba(26, 22, 40, 0.30);
--unread: #c9324d;
--accept: #1a8c4e;
--decline: #c0392b;
}