/** * 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%); --gradient-subtle: linear-gradient(180deg, var(--background-color) 0%, rgba(var(--primary-rgb), 0.03) 100%); --gradient-section: linear-gradient(135deg, rgba(var(--primary-rgb), 0.02) 0%, rgba(var(--secondary-rgb), 0.02) 100%); /* Enhanced interaction colors */ --hover-overlay: rgba(var(--primary-rgb), 0.08); --active-overlay: rgba(var(--primary-rgb), 0.15); --focus-overlay: rgba(var(--primary-rgb), 0.12); } /* ============================================================================ 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: PURPLE (Default) Usage: Add .theme-purple class to or ============================================================================ */ .theme-purple { --primary-color: #667eea; --primary-dark: #764ba2; --primary-light: #9d8fb0; --primary-lighter: #b8a9c9; --primary-rgb: 102, 126, 234; --secondary-color: #764ba2; --secondary-dark: #4a3c5c; --secondary-light: #9d8fb0; --secondary-rgb: 118, 75, 162; --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* ============================================================================ PRESET THEME: BLUE Usage: Apply .theme-blue class to or ============================================================================ */ .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; --gradient-primary: linear-gradient(135deg, #1976d2 0%, #115293 100%); } /* ============================================================================ 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: 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%); } /* ============================================================================ PRESET THEME: RED/PINK Usage: Add .theme-red class to or ============================================================================ */ .theme-red { --primary-color: #e91e63; --primary-dark: #c2185b; --primary-light: #f06292; --primary-lighter: #f48fb1; --primary-rgb: 233, 30, 99; --secondary-color: #ff9800; --secondary-dark: #f57c00; --secondary-light: #ffb74d; --secondary-rgb: 255, 152, 0; --gradient-primary: linear-gradient(135deg, #e91e63 0%, #c2185b 100%); } /* ============================================================================ PRESET THEME: TEAL Usage: Add .theme-teal class to or ============================================================================ */ .theme-teal { --primary-color: #009688; --primary-dark: #00695c; --primary-light: #26a69a; --primary-lighter: #4db6ac; --primary-rgb: 0, 150, 136; --secondary-color: #ff9800; --secondary-dark: #f57c00; --secondary-light: #ffb74d; --secondary-rgb: 255, 152, 0; --gradient-primary: linear-gradient(135deg, #009688 0%, #00695c 100%); } /* ============================================================================ PRESET THEME: INDIGO Usage: Add .theme-indigo class to or ============================================================================ */ .theme-indigo { --primary-color: #3f51b5; --primary-dark: #283593; --primary-light: #5c6bc0; --primary-lighter: #7986cb; --primary-rgb: 63, 81, 181; --secondary-color: #ff5722; --secondary-dark: #e64a19; --secondary-light: #ff7043; --secondary-rgb: 255, 87, 34; --gradient-primary: linear-gradient(135deg, #3f51b5 0%, #283593 100%); } /* ============================================================================ DARK THEME - IMPROVED CONTRAST ============================================================================ */ .dark-theme { /* Enhanced contrast for better readability */ --primary-alpha-10: rgba(var(--primary-rgb), 0.15); --primary-alpha-20: rgba(var(--primary-rgb), 0.25); --primary-alpha-30: rgba(var(--primary-rgb), 0.35); /* Improved hover states for dark mode */ --hover-overlay: rgba(var(--primary-rgb), 0.12); --active-overlay: rgba(var(--primary-rgb), 0.2); --focus-overlay: rgba(var(--primary-rgb), 0.16); /* Subtle gradient for dark theme */ --gradient-subtle: linear-gradient(180deg, var(--background-color) 0%, rgba(var(--primary-rgb), 0.05) 100%); --gradient-section: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--secondary-rgb), 0.05) 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'); document.documentElement.classList.add('theme-red'); document.documentElement.classList.add('theme-teal'); document.documentElement.classList.add('theme-indigo'); ============================================================================ */