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

View file

@ -27,11 +27,11 @@
<div class="mb-4">
<label class="form-label fw-semibold">Design-Theme</label>
<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>
</select>
<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
</div>
</div>