modus-angular-themes

Modus Themes Implementation in Angular + Vite

Theme System Overview

This Angular + Vite application supports 6 Modus themes with proper theme switching, persistence, and service-based management.

Available Themes: 4 Modus themes + 2 Connect themes

• modus-classic-light / modus-classic-dark
• modus-modern-light / modus-modern-dark
• connect-light / connect-dark

Theme Architecture

ThemeService Implementation

import { Injectable, signal, computed } from '@angular/core';

export type Theme =
  | 'modus-classic-light'
  | 'modus-classic-dark'
  | 'modus-modern-light'
  | 'modus-modern-dark'
  | 'connect-light'
  | 'connect-dark';

const VALID_THEMES: Theme[] = [
  'modus-classic-light',
  'modus-classic-dark',
  'modus-modern-light',
  'modus-modern-dark',
  'connect-light',
  'connect-dark',
];

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private readonly themeSignal = signal<Theme>('modus-classic-light');

  readonly currentTheme = this.themeSignal.asReadonly();
  readonly isDark = computed(() => this.themeSignal().includes('dark'));
  readonly isModern = computed(() => this.themeSignal().includes('modern'));

  constructor() {
    this.loadThemeFromStorage();
  }

  private loadThemeFromStorage(): void {
    if (typeof window !== 'undefined') {
      try {
        const savedTheme = window.localStorage.getItem('preferred-theme') as Theme | null;
        if (savedTheme && VALID_THEMES.includes(savedTheme)) {
          this.setTheme(savedTheme);
        }
      } catch (error) {
        console.warn('Unable to read stored theme preference:', error);
      }
    }
  }

  setTheme(theme: Theme): void {
    this.themeSignal.set(theme);
    
    // Apply theme to document
    document.documentElement.setAttribute('data-theme', theme);
    
    // Persist to localStorage
    try {
      window.localStorage.setItem('preferred-theme', theme);
    } catch (error) {
      console.warn('Unable to persist theme preference:', error);
    }
  }
}