@casoon/dragonfly/themes/dark-mode.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Dark Mode Theme
 * 
 * Dark mode definitions with [data-theme="dark"] scope.
 * Only overrides base tokens, aliases remain stable.
 * 
 * @layer themes.mode
 */

@layer themes.mode {
  [data-theme="dark"] {
    /* Color Scheme */
    color-scheme: dark;
    
    /* Base Color Tokens - Only override what's needed for dark mode */
    --color-background: #1d1f24;
    --color-surface: #262830;
    --color-surface-elevated: #30333c;
    --color-text: #f3f3f5;
    --color-text-muted: #8f96a8;
    --color-text-inverse: #1d1f24;
    --color-border: #4a4e5c;
    --color-border-strong: #6c7285;
    
    /* Primary Colors - Dark Mode Values */
    --color-primary: #4a90e2;
    --color-primary-50: #001433;
    --color-primary-100: #002966;
    --color-primary-500: #4a90e2;
    --color-primary-600: #66a3ff;
    --color-primary-900: #e6f0ff;
    
    /* Secondary Colors - Dark Mode Values */
    --color-secondary: #8b7cf6;
    --color-secondary-50: #110a33;
    --color-secondary-500: #8b7cf6;
    --color-secondary-900: #eeeaff;
    
    /* Gray Colors - Dark Mode Values */
    --color-gray-50: #1d1f24;
    --color-gray-100: #262830;
    --color-gray-500: #8f96a8;
    --color-gray-900: #f9f9fa;
    
    /* Focus and Interactive States */
    --color-focus: #6366f1;
    --color-focus-glow: rgb(99 102 241 / 4000%);
  }
}

/**
 * Dark Mode Theme
 * 
 * Diese Datei definiert das Dark Mode Theme.
 * Die Farben orientieren sich an den Variablen aus colors.css.
 * Das Theme wird über die Klasse "theme-dark-mode" aktiviert.
 * 
 * Unterstützt sowohl modernen light-dark() Syntax als auch Fallbacks für ältere Browser.
 */

/* Gemeinsame Dark Mode Variablen für Wiederverwendung */
:root {
  --dark-mode-text: var(--color-gray-100);
  --dark-mode-text-muted: var(--color-gray-400);
  --dark-mode-text-light: var(--color-gray-600);
  --dark-mode-text-inverted: var(--color-gray-900);
  --dark-mode-background: var(--color-gray-900);
  --dark-mode-background-alt: var(--color-gray-800);

  /* Dunklerer Wert für besseren Kontrast bei elevated Elementen */
  --dark-mode-background-elevated: var(--color-gray-780);
  --dark-mode-background-inverted: var(--color-gray-50);
  --dark-mode-border: var(--color-gray-700);
  --dark-mode-border-hover: var(--color-gray-600);
  --dark-mode-border-focus: var(--color-primary-400);
  --dark-mode-border-error: var(--color-error-400);
  --dark-mode-shadow-sm: rgb(0 0 0 / 2000%);
  --dark-mode-shadow-md: rgb(0 0 0 / 3000%);
  --dark-mode-shadow-lg: rgb(0 0 0 / 4000%);
  --dark-mode-shadow-xl: rgb(0 0 0 / 5000%);
  --dark-mode-focus-ring: var(--color-primary-400);
  --dark-mode-focus-ring-offset: var(--color-gray-900);
  --dark-mode-outline: var(--color-primary-400);
}

/* Dark Mode im Theme-Präferenz-System */
@media (prefers-color-scheme: dark) {
  :root[style*="--theme-preference:\"auto\""] {
    /* Auto-Modus verwendet die Systempräferenz */
    color-scheme: dark;
    
    /* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */
    --color-text: var(--dark-mode-text);
    --color-text-muted: var(--dark-mode-text-muted);
    --color-text-light: var(--dark-mode-text-light);
    --color-text-inverted: var(--dark-mode-text-inverted);
    --color-background: var(--dark-mode-background);
    --color-background-alt: var(--dark-mode-background-alt);
    --color-background-elevated: var(--dark-mode-background-elevated);
    --color-background-inverted: var(--dark-mode-background-inverted);
    --color-border: var(--dark-mode-border);
    --color-border-hover: var(--dark-mode-border-hover);
    --color-border-focus: var(--dark-mode-border-focus);
    --color-border-error: var(--dark-mode-border-error);
    --color-shadow-sm: var(--dark-mode-shadow-sm);
    --color-shadow-md: var(--dark-mode-shadow-md);
    --color-shadow-lg: var(--dark-mode-shadow-lg);
    --color-shadow-xl: var(--dark-mode-shadow-xl);
    --color-focus-ring: var(--dark-mode-focus-ring);
    --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);
    --color-outline: var(--dark-mode-outline);
  }
}

/* Explizites Dark Mode über CSS-Variablen */
:root[style*="--theme-preference:\"dark\""] {
  color-scheme: dark;
  
  /* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */
  --color-text: var(--dark-mode-text);
  --color-text-muted: var(--dark-mode-text-muted);
  --color-text-light: var(--dark-mode-text-light);
  --color-text-inverted: var(--dark-mode-text-inverted);
  --color-background: var(--dark-mode-background);
  --color-background-alt: var(--dark-mode-background-alt);
  --color-background-elevated: var(--dark-mode-background-elevated);
  --color-background-inverted: var(--dark-mode-background-inverted);
  --color-border: var(--dark-mode-border);
  --color-border-hover: var(--dark-mode-border-hover);
  --color-border-focus: var(--dark-mode-border-focus);
  --color-border-error: var(--dark-mode-border-error);
  --color-shadow-sm: var(--dark-mode-shadow-sm);
  --color-shadow-md: var(--dark-mode-shadow-md);
  --color-shadow-lg: var(--dark-mode-shadow-lg);
  --color-shadow-xl: var(--dark-mode-shadow-xl);
  --color-focus-ring: var(--dark-mode-focus-ring);
  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);
  --color-outline: var(--dark-mode-outline);
}

/* Dark Mode über HTML Attribute */
html[data-theme="dark"] {
  color-scheme: dark;
  
  /* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */
  --color-text: var(--dark-mode-text);
  --color-text-muted: var(--dark-mode-text-muted);
  --color-text-light: var(--dark-mode-text-light);
  --color-text-inverted: var(--dark-mode-text-inverted);
  --color-background: var(--dark-mode-background);
  --color-background-alt: var(--dark-mode-background-alt);
  --color-background-elevated: var(--dark-mode-background-elevated);
  --color-background-inverted: var(--dark-mode-background-inverted);
  --color-border: var(--dark-mode-border);
  --color-border-hover: var(--dark-mode-border-hover);
  --color-border-focus: var(--dark-mode-border-focus);
  --color-border-error: var(--dark-mode-border-error);
  --color-shadow-sm: var(--dark-mode-shadow-sm);
  --color-shadow-md: var(--dark-mode-shadow-md);
  --color-shadow-lg: var(--dark-mode-shadow-lg);
  --color-shadow-xl: var(--dark-mode-shadow-xl);
  --color-focus-ring: var(--dark-mode-focus-ring);
  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);
  --color-outline: var(--dark-mode-outline);
}

/* Light Mode Theme-Klassen-Implementierung für konsistente Schnittstelle */
.theme-light-mode {
  color-scheme: light;
  
  /* Grundlegende Light Mode Variablen */
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-text-light: var(--color-gray-400);
  --color-text-inverted: var(--color-gray-100);
  --color-background: white;
  --color-background-alt: var(--color-gray-50);
  --color-background-elevated: white;
  --color-background-inverted: var(--color-gray-900);
  --color-border: var(--color-gray-200);
  --color-border-hover: var(--color-gray-300);
  --color-border-focus: var(--color-primary-500);
  --color-border-error: var(--color-error-500);
  --color-shadow-sm: rgb(0 0 0 / 5%);
  --color-shadow-md: rgb(0 0 0 / 1000%);
  --color-shadow-lg: rgb(0 0 0 / 15%);
  --color-shadow-xl: rgb(0 0 0 / 2000%);
  --color-focus-ring: var(--color-primary-500);
  --color-focus-ring-offset: white;
  --color-outline: var(--color-primary-500);
}

/* Dark Mode Theme-Klassen-Implementierung */
.theme-dark-mode {
  color-scheme: dark;
  
  /* Verwendung der gemeinsamen Dark Mode Variablen */
  --color-text: var(--dark-mode-text);
  --color-text-muted: var(--dark-mode-text-muted);
  --color-text-light: var(--dark-mode-text-light);
  --color-text-inverted: var(--dark-mode-text-inverted);
  --color-background: var(--dark-mode-background);
  --color-background-alt: var(--dark-mode-background-alt);
  --color-background-elevated: var(--dark-mode-background-elevated);
  --color-background-inverted: var(--dark-mode-background-inverted);
  --color-border: var(--dark-mode-border);
  --color-border-hover: var(--dark-mode-border-hover);
  --color-border-focus: var(--dark-mode-border-focus);
  --color-border-error: var(--dark-mode-border-error);
  --color-shadow-sm: var(--dark-mode-shadow-sm);
  --color-shadow-md: var(--dark-mode-shadow-md);
  --color-shadow-lg: var(--dark-mode-shadow-lg);
  --color-shadow-xl: var(--dark-mode-shadow-xl);
  --color-focus-ring: var(--dark-mode-focus-ring);
  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);
  --color-outline: var(--dark-mode-outline);
}

.theme-dark-mode.dark-mode {
  /* Verwendung der gemeinsamen Dark Mode Variablen */
  --color-text: var(--dark-mode-text);
  --color-text-muted: var(--dark-mode-text-muted);
  --color-text-light: var(--dark-mode-text-light);
  --color-text-inverted: var(--dark-mode-text-inverted);
  --color-background: var(--dark-mode-background);
  --color-background-alt: var(--dark-mode-background-alt);
  --color-background-elevated: var(--dark-mode-background-elevated);
  --color-background-inverted: var(--dark-mode-background-inverted);
  --color-border: var(--dark-mode-border);
  --color-border-hover: var(--dark-mode-border-hover);
  --color-border-focus: var(--dark-mode-border-focus);
  --color-border-error: var(--dark-mode-border-error);
  --color-shadow-sm: var(--dark-mode-shadow-sm);
  --color-shadow-md: var(--dark-mode-shadow-md);
  --color-shadow-lg: var(--dark-mode-shadow-lg);
  --color-shadow-xl: var(--dark-mode-shadow-xl);
  --color-focus-ring: var(--dark-mode-focus-ring);
  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);
  --color-outline: var(--dark-mode-outline);
}

@layer utilities {
  /* Dark Mode Toggle Utilities */
  .dark-mode-toggle {
    align-items: center;
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: var(--space-2);
    transition: background-color var(--transition-normal) var(--ease-in-out-cubic);
  }
  
  .dark-mode-toggle:hover {
    background-color: var(--color-bg-tertiary);
  }
  
  /* Dark Mode nur für bestimmte Container */
  .dark-theme-container {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }
  
  /* Inverse Farben für Hell/Dunkel-Kontrast */
  .inverse-colors {
    filter: invert(1) hue-rotate(180deg);
  }
  
  /* Spezifische inverse Farben für Light Mode */
  .light-theme .inverse-colors--light {
    filter: invert(1) hue-rotate(180deg);
  }
  
  /* Spezifische inverse Farben für Dark Mode */
  .dark-theme .inverse-colors--dark {
    filter: invert(1) hue-rotate(180deg);
  }
}