/** * Gatewarden Theme System * * Supports multiple themes via [data-theme] attribute on : * - Dark mode (default): [data-theme="dark"] or no data-theme attribute * - Light mode: [data-theme="light"] * - Future themes: Add new [data-theme="theme-name"] sections * * All themes define the same CSS variables for consistency. * Components should ONLY use these variables, never hardcoded colors. */ /* ============================================ BASE VARIABLES (Theme-independent) ============================================ */ :root { /* Typography */ --gw-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --gw-font-mono: 'Consolas', 'Monaco', 'Courier New', monospace; /* Spacing */ --gw-spacing-xs: 0.25rem; --gw-spacing-sm: 0.5rem; --gw-spacing-md: 1rem; --gw-spacing-lg: 1.5rem; --gw-spacing-xl: 2rem; /* Border Radius */ --gw-radius-sm: 4px; --gw-radius-md: 8px; --gw-radius-lg: 16px; --gw-radius-full: 9999px; /* Transitions */ --gw-transition-fast: 0.15s ease; --gw-transition-normal: 0.2s ease; --gw-transition-slow: 0.3s ease; } /* ============================================ DARK THEME (Default) ============================================ */ :root, [data-theme="dark"] { /* Background & Text */ --gw-bg-color: #0f0f23; --gw-text-color: #cccccc; --gw-text-muted: #999999; --gw-title-color: #ffffff; /* Accent & Links */ --gw-accent-color: #4ade80; --gw-accent-rgb: 74, 222, 128; --gw-link-color: #4ade80; --gw-link-hover-color: #22c55e; /* Semantic Colors */ --gw-success-color: #22c55e; --gw-success-rgb: 34, 197, 94; --gw-success-bg: rgba(34, 197, 94, 0.12); --gw-success-border: rgba(34, 197, 94, 0.4); --gw-warning-color: #f59e0b; --gw-warning-rgb: 245, 158, 11; --gw-warning-bg: rgba(245, 158, 11, 0.12); --gw-warning-border: rgba(245, 158, 11, 0.4); --gw-danger-color: #ef4444; --gw-danger-rgb: 239, 68, 68; --gw-danger-bg: rgba(239, 68, 68, 0.12); --gw-danger-border: rgba(239, 68, 68, 0.4); /* Surfaces (Cards, Tiles, Containers) */ --gw-surface-color: rgba(255, 255, 255, 0.03); --gw-surface-border: rgba(255, 255, 255, 0.1); --gw-surface-hover: rgba(255, 255, 255, 0.08); /* Buttons */ --gw-btn-bg: transparent; --gw-btn-text: #cccccc; --gw-btn-border: rgba(255, 255, 255, 0.2); --gw-btn-hover-bg: rgba(255, 255, 255, 0.1); --gw-btn-hover-text: #ffffff; --gw-btn-hover-border: rgba(255, 255, 255, 0.3); /* Primary Button */ --gw-btn-primary-bg: #4ade80; --gw-btn-primary-text: #000000; --gw-btn-primary-border: #4ade80; --gw-btn-primary-hover-bg: #22c55e; /* Shadows */ --gw-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2); --gw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --gw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); /* Navbar */ --gw-navbar-bg: rgba(0, 0, 0, 0.4); --gw-navbar-border: rgba(255, 255, 255, 0.1); /* Dropdown */ --gw-dropdown-bg: rgba(30, 30, 30, 0.98); --gw-dropdown-border: rgba(255, 255, 255, 0.1); --gw-dropdown-hover: rgba(255, 255, 255, 0.1); } /* ============================================ LIGHT THEME ============================================ */ [data-theme="light"] { /* Background & Text */ --gw-bg-color: #f5f5f5; --gw-text-color: #333333; --gw-text-muted: #666666; --gw-title-color: #1a1a1a; /* Accent & Links */ --gw-accent-color: #16a34a; --gw-accent-rgb: 22, 163, 74; --gw-link-color: #16a34a; --gw-link-hover-color: #15803d; /* Semantic Colors */ --gw-success-color: #16a34a; --gw-success-rgb: 22, 163, 74; --gw-success-bg: rgba(22, 163, 74, 0.1); --gw-success-border: #16a34a; --gw-warning-color: #d97706; --gw-warning-rgb: 217, 119, 6; --gw-warning-bg: rgba(217, 119, 6, 0.1); --gw-warning-border: #d97706; --gw-danger-color: #dc2626; --gw-danger-rgb: 220, 38, 38; --gw-danger-bg: rgba(220, 38, 38, 0.1); --gw-danger-border: #dc2626; /* Surfaces (Cards, Tiles, Containers) */ --gw-surface-color: #ffffff; --gw-surface-border: #e0e0e0; --gw-surface-hover: #f8f8f8; /* Buttons */ --gw-btn-bg: #ffffff; --gw-btn-text: #333333; --gw-btn-border: #d0d0d0; --gw-btn-hover-bg: #f5f5f5; --gw-btn-hover-text: #16a34a; --gw-btn-hover-border: #16a34a; /* Primary Button */ --gw-btn-primary-bg: #16a34a; --gw-btn-primary-text: #ffffff; --gw-btn-primary-border: #16a34a; --gw-btn-primary-hover-bg: #15803d; /* Shadows */ --gw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --gw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --gw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); /* Navbar */ --gw-navbar-bg: #ffffff; --gw-navbar-border: #e0e0e0; /* Dropdown */ --gw-dropdown-bg: #ffffff; --gw-dropdown-border: #e0e0e0; --gw-dropdown-hover: #f5f5f5; } /* ============================================ SYSTEM PREFERENCE DETECTION When no theme is explicitly set, follow OS preference ============================================ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { /* Background & Text */ --gw-bg-color: #f5f5f5; --gw-text-color: #333333; --gw-text-muted: #666666; --gw-title-color: #1a1a1a; /* Accent & Links */ --gw-accent-color: #16a34a; --gw-accent-rgb: 22, 163, 74; --gw-link-color: #16a34a; --gw-link-hover-color: #15803d; /* Semantic Colors */ --gw-success-color: #16a34a; --gw-success-rgb: 22, 163, 74; --gw-success-bg: rgba(22, 163, 74, 0.1); --gw-success-border: #16a34a; --gw-warning-color: #d97706; --gw-warning-rgb: 217, 119, 6; --gw-warning-bg: rgba(217, 119, 6, 0.1); --gw-warning-border: #d97706; --gw-danger-color: #dc2626; --gw-danger-rgb: 220, 38, 38; --gw-danger-bg: rgba(220, 38, 38, 0.1); --gw-danger-border: #dc2626; /* Surfaces */ --gw-surface-color: #ffffff; --gw-surface-border: #e0e0e0; --gw-surface-hover: #f8f8f8; /* Buttons */ --gw-btn-bg: #ffffff; --gw-btn-text: #333333; --gw-btn-border: #d0d0d0; --gw-btn-hover-bg: #f5f5f5; --gw-btn-hover-text: #16a34a; --gw-btn-hover-border: #16a34a; /* Primary Button */ --gw-btn-primary-bg: #16a34a; --gw-btn-primary-text: #ffffff; --gw-btn-primary-border: #16a34a; --gw-btn-primary-hover-bg: #15803d; /* Shadows */ --gw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --gw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --gw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); /* Navbar */ --gw-navbar-bg: #ffffff; --gw-navbar-border: #e0e0e0; /* Dropdown */ --gw-dropdown-bg: #ffffff; --gw-dropdown-border: #e0e0e0; --gw-dropdown-hover: #f5f5f5; } } /* ============================================ FUTURE THEME TEMPLATE Copy this section and modify for new themes ============================================ */ /* [data-theme="your-theme-name"] { // Background & Text --gw-bg-color: #...; --gw-text-color: #...; --gw-text-muted: #...; --gw-title-color: #...; // Accent & Links --gw-accent-color: #...; --gw-accent-rgb: R, G, B; --gw-link-color: #...; --gw-link-hover-color: #...; // Semantic Colors (with RGB for alpha variants) --gw-success-color: #...; --gw-success-rgb: R, G, B; --gw-success-bg: rgba(...); --gw-success-border: #...; --gw-warning-color: #...; --gw-warning-rgb: R, G, B; --gw-warning-bg: rgba(...); --gw-warning-border: #...; --gw-danger-color: #...; --gw-danger-rgb: R, G, B; --gw-danger-bg: rgba(...); --gw-danger-border: #...; // Surfaces --gw-surface-color: #...; --gw-surface-border: #...; --gw-surface-hover: #...; // Buttons --gw-btn-bg: #...; --gw-btn-text: #...; --gw-btn-border: #...; --gw-btn-hover-bg: #...; --gw-btn-hover-text: #...; --gw-btn-hover-border: #...; --gw-btn-primary-bg: #...; --gw-btn-primary-text: #...; --gw-btn-primary-border: #...; --gw-btn-primary-hover-bg: #...; // Shadows --gw-shadow-sm: ...; --gw-shadow-md: ...; --gw-shadow-lg: ...; // Navbar --gw-navbar-bg: #...; --gw-navbar-border: #...; // Dropdown --gw-dropdown-bg: #...; --gw-dropdown-border: #...; --gw-dropdown-hover: #...; } */