feat: Redesign Dark Mode with balanced purple theme

- Change Dark Mode accent from blue to purple (#a855f7)
- Balance dark backgrounds to match Light Mode structure
  - bg-base: #1a1a1a (was #0f0f0f - too dark)
  - bg-surface: #212121 (more balanced)
  - Improved contrast and readability
- Update borders to be more visible (12% vs 8% opacity)
- Adjust agent colors for purple theme:
  - Orchestrator: Purple
  - Researcher: Green
  - Negotiator: Orange
  - AR Manager: Yellow
- Update Settings description: 'Violett' instead of 'Blau'
- Dark Mode now mirrors Light Mode balance (just inverted)
This commit is contained in:
pdyde 2026-02-21 17:19:32 +01:00
parent 85976afa09
commit b218d111b6
3 changed files with 27 additions and 29 deletions

View file

@ -1,2 +0,0 @@
Du bist trocken, steif und hörst auf den Namen Hans-Ruedi

View file

@ -3,29 +3,29 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root { :root {
/* Dark Mode - Aufgehelltes Schwarz */ /* Dark Mode - Ausgewogene dunkle Grautöne (angelehnt an Light Mode) */
--bg-base: #0f0f0f; --bg-base: #1a1a1a;
--bg-surface: #1a1a1a; --bg-surface: #212121;
--bg-elevated: #242424; --bg-elevated: #2a2a2a;
--bg-hover: #2e2e2e; --bg-hover: #333333;
--bg-glass: rgba(26,26,26,.8); --bg-glass: rgba(33,33,33,.85);
/* Accent - Electric Blue (Dark Mode) */ /* Accent - Violett (Dark Mode) */
--accent: #0a84ff; --accent: #a855f7;
--accent-light: #409cff; --accent-light: #c084fc;
--accent-dim: #0070e0; --accent-dim: #9333ea;
--accent-glow: rgba(10,132,255,.2); --accent-glow: rgba(168,85,247,.2);
/* Neutrals Only */ /* Text Colors - Ausgewogen wie Light Mode */
--text-primary: #ffffff; --text-primary: #f5f5f5;
--text-secondary: #a0a0a0; --text-secondary: #a3a3a3;
--text-muted: #606060; --text-muted: #737373;
/* Minimal Borders - Almost Invisible */ /* Borders - Sichtbarer wie Light Mode */
--border: rgba(255,255,255,.08); --border: rgba(255,255,255,.12);
--border-accent: rgba(10,132,255,.3); --border-accent: rgba(168,85,247,.3);
--shadow: 0 30px 60px rgba(0,0,0,.5); --shadow: 0 30px 60px rgba(0,0,0,.4);
--shadow-sm: 0 2px 20px rgba(0,0,0,.3); --shadow-sm: 0 2px 20px rgba(0,0,0,.2);
/* Code/Pre Text - Zartes helles Grau für Dark Mode */ /* Code/Pre Text - Zartes helles Grau für Dark Mode */
--code-text: #d4d4d4; --code-text: #d4d4d4;
@ -664,11 +664,11 @@ hr { border-color: var(--border); opacity: 1; }
/* ── Agent Color System - Minimal ─────────────────────────────────────────── */ /* ── Agent Color System - Minimal ─────────────────────────────────────────── */
:root { :root {
--agent-orchestrator: #0a84ff; --agent-orchestrator: #a855f7;
--agent-researcher: #32d74b; --agent-researcher: #10b981;
--agent-negotiator: #ff453a; --agent-negotiator: #f97316;
--agent-ar_manager: #ffd60a; --agent-ar_manager: #eab308;
--agent-default: #64d2ff; --agent-default: #8b5cf6;
} }
.agent-orchestrator { color: var(--agent-orchestrator) !important; } .agent-orchestrator { color: var(--agent-orchestrator) !important; }

View file

@ -27,11 +27,11 @@
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-semibold">Design-Theme</label> <label class="form-label fw-semibold">Design-Theme</label>
<select class="form-select" name="theme" required> <select class="form-select" name="theme" required>
<option value="dark" {% if theme == 'dark' %}selected{% endif %}>Dark Mode (Blau)</option> <option value="dark" {% if theme == 'dark' %}selected{% endif %}>Dark Mode (Violett)</option>
<option value="light" {% if theme == 'light' %}selected{% endif %}>Light Mode (Rot)</option> <option value="light" {% if theme == 'light' %}selected{% endif %}>Light Mode (Rot)</option>
</select> </select>
<div class="form-text"> <div class="form-text">
<strong>Dark Mode:</strong> Dunkler Hintergrund mit blauen Akzenten<br> <strong>Dark Mode:</strong> Ausgewogene dunkle Grautöne mit violetten Akzenten<br>
<strong>Light Mode:</strong> Heller Hintergrund mit roten Akzenten <strong>Light Mode:</strong> Heller Hintergrund mit roten Akzenten
</div> </div>
</div> </div>