🎨 Angular Theming – Dark/Light Mode & Dynamic Styles

(So wird deine App schön UND benutzbar – für alle)

Modernes Angular-Design bedeutet mehr als Farben und Fonts.
Es geht um Dynamik, Zugänglichkeit und User-zentrierte Themes –
Dark Mode? Light Mode? Systemabhängig? Kein Problem.

1️⃣ Warum Theming?

Konsistenz, Branding, UX – all das lebt vom richtigen Designsystem.

• 🌗 Dark Mode für Augenfreundlichkeit
• 🎯 Custom Branding für Kundenprojekte
• 🧩 Reaktive Anpassung für flexible Komponenten

2️⃣ SCSS-Variablen mit CSS Custom Properties

Beispiel:

:root {
  --primary-color: #007bff;
  --background-color: #ffffff;
}

.dark-mode {
  --primary-color: #90caf9;
  --background-color: #121212;
}

Nutzung in Komponenten:

button {
  background-color: var(--primary-color);
}

3️⃣ ThemeService für Runtime-Wechsel

@Injectable({ providedIn: 'root' })
export class ThemeService {
  toggleDarkMode(isDark: boolean) {
    document.body.classList.toggle('dark-mode', isDark);
  }
}

Integration:

<button (click)="themeService.toggleDarkMode(true)">Dark Mode</button>

4️⃣ System-Themes automatisch erkennen

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
themeService.toggleDarkMode(prefersDark);

5️⃣ Angular Material Theming

Angular Material unterstützt Custom Themes nativ:

@include mat-core();

$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

Fazit

🎨 Theming ist nicht nur nice-to-have – es ist ein Statement.
Mit CSS-Variablen, Services und Angular Material wird es mächtig, skalierbar und UX-first.

📚 Nächster Beitrag:
📐 Angular Layouts – Struktur für jede Seitentype