/** * MMMenu - Accent Colors & Theming System * CSS Custom Properties for dynamic theming */ /* ============================================================================ DEFAULT THEME - Blue ============================================================================ */ :root { /* Primary colors */ --primary-color: #1976d2; --primary-dark: #115293; --primary-light: #4791db; --primary-lighter: #64b5f6; --primary-contrast: #ffffff; /* Secondary colors */ --secondary-color: #ffc107; --secondary-dark: #ffa000; --secondary-light: #ffca28; --secondary-lighter: #ffd54f; --secondary-contrast: #000000; /* Accent variations (opacity-based) */ --primary-rgb: 25, 118, 210; --secondary-rgb: 255, 193, 7; --primary-alpha-10: rgba(var(--primary-rgb), 0.1); --primary-alpha-20: rgba(var(--primary-rgb), 0.2); --primary-alpha-30: rgba(var(--primary-rgb), 0.3); --primary-alpha-50: rgba(var(--primary-rgb), 0.5); /* Hero section controls */ --hero-overlay-opacity: 0.4; --hero-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); --hero-overlay-color: rgba(0, 0, 0, var(--hero-overlay-opacity)); /* Gradient backgrounds */ --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); --gradient-overlay: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%); } /* ============================================================================ DARK THEME OVERRIDES ============================================================================ */ .dark-theme { /* Adjust primary colors for dark mode */ --primary-color: #42a5f5; --primary-dark: #1976d2; --primary-light: #64b5f6; /* Adjust secondary colors for dark mode */ --secondary-color: #ffd54f; --secondary-dark: #ffca28; /* Hero overlay (lighter in dark mode) */ --hero-overlay-opacity: 0.6; --hero-overlay-color: rgba(0, 0, 0, var(--hero-overlay-opacity)); } /* ============================================================================ PRESET THEME: BLUE (Default) Usage: Apply .theme-blue class or leave as default ============================================================================ */ /* .theme-blue { --primary-color: #1976d2; --primary-dark: #115293; --primary-light: #4791db; --primary-lighter: #64b5f6; --primary-rgb: 25, 118, 210; --secondary-color: #ffc107; --secondary-dark: #ffa000; --secondary-light: #ffca28; --secondary-rgb: 255, 193, 7; } */ /* ============================================================================ PRESET THEME: GREEN Usage: Add .theme-green class to or ============================================================================ */ /* .theme-green { --primary-color: #2e7d32; --primary-dark: #1b5e20; --primary-light: #4caf50; --primary-lighter: #66bb6a; --primary-rgb: 46, 125, 50; --secondary-color: #ffeb3b; --secondary-dark: #fdd835; --secondary-light: #ffee58; --secondary-rgb: 255, 235, 59; --gradient-primary: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); } */ /* ============================================================================ PRESET THEME: PURPLE Usage: Add .theme-purple class to or ============================================================================ */ /* .theme-purple { --primary-color: #7b1fa2; --primary-dark: #4a148c; --primary-light: #9c27b0; --primary-lighter: #ab47bc; --primary-rgb: 123, 31, 162; --secondary-color: #ff9800; --secondary-dark: #f57c00; --secondary-light: #ffa726; --secondary-rgb: 255, 152, 0; --gradient-primary: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%); } */ /* ============================================================================ PRESET THEME: ORANGE Usage: Add .theme-orange class to or ============================================================================ */ /* .theme-orange { --primary-color: #f57c00; --primary-dark: #e65100; --primary-light: #ff9800; --primary-lighter: #ffa726; --primary-rgb: 245, 124, 0; --secondary-color: #ffc107; --secondary-dark: #ffa000; --secondary-light: #ffca28; --secondary-rgb: 255, 193, 7; --gradient-primary: linear-gradient(135deg, #f57c00 0%, #e65100 100%); } */ /* ============================================================================ DYNAMIC THEME APPLICATION Use JavaScript to apply custom colors from restaurant data: document.documentElement.style.setProperty('--primary-color', '#custom-color'); document.documentElement.style.setProperty('--secondary-color', '#custom-color'); Or apply preset themes: document.documentElement.classList.add('theme-green'); ============================================================================ */