/* ===================================================== MM-THEMES.CSS — Multi-theme support via CSS custom properties 4 themes: Dark (default), Light, Neon, Classic Purple Apply theme class on : theme-dark, theme-light, theme-neon, theme-classic ===================================================== */ /* ── Dark Theme (default) ── */ body.theme-dark, body:not([class*="theme-"]) { --mm-bg-page: #0d1117; --mm-bg-card: #161b27; --mm-bg-card-alt: #1a1f30; --mm-bg-input: rgba(255,255,255,0.07); --mm-bg-hover: rgba(155,93,229,0.12); --mm-border: rgba(155,93,229,0.25); --mm-border-strong: rgba(155,93,229,0.45); --mm-text-primary: #a0b4d0; --mm-text-secondary: #7F8AAA; --mm-text-heading: #e0ccff; --mm-text-link: #7dd9f5; --mm-accent: #9B5DE5; --mm-accent-glow: rgba(155,93,229,0.35); --mm-accent-pink: #FF0074; --mm-accent-yellow: #F9F871; --mm-accent-cyan: #7dd9f5; --mm-header-bg: linear-gradient(135deg, #0d1117 0%, #1a1230 60%, #0d1117 100%); --mm-nav-bg: #161b27; --mm-shadow: rgba(0,0,0,0.4); --mm-shadow-strong: rgba(0,0,0,0.6); --mm-btn-bg: linear-gradient(90deg, #9B5DE5, #7b3dbf); --mm-btn-text: #fff; --mm-tag-bg: rgba(155,93,229,0.15); --mm-logo-gradient: linear-gradient(90deg, #c4a0f5, #FF0074, #F9F871); --mm-welcome-color: #c4a0f5; --mm-footer-bg: #0a0e14; --mm-scrollbar-track: #0d1117; --mm-scrollbar-thumb: #2a2f40; } /* ── Light Theme ── */ body.theme-light { --mm-bg-page: #f0edf5; --mm-bg-card: #ffffff; --mm-bg-card-alt: #f8f5ff; --mm-bg-input: rgba(0,0,0,0.04); --mm-bg-hover: rgba(155,93,229,0.08); --mm-border: rgba(155,93,229,0.2); --mm-border-strong: rgba(155,93,229,0.4); --mm-text-primary: #3a3050; --mm-text-secondary: #7a7090; --mm-text-heading: #2d1b4e; --mm-text-link: #6a3dbf; --mm-accent: #9B5DE5; --mm-accent-glow: rgba(155,93,229,0.2); --mm-accent-pink: #e0005a; --mm-accent-yellow: #c5a800; --mm-accent-cyan: #0090b8; --mm-header-bg: linear-gradient(135deg, #f0edf5 0%, #e8e0f5 60%, #f0edf5 100%); --mm-nav-bg: #ffffff; --mm-shadow: rgba(100,80,140,0.1); --mm-shadow-strong: rgba(100,80,140,0.2); --mm-btn-bg: linear-gradient(90deg, #9B5DE5, #7b3dbf); --mm-btn-text: #fff; --mm-tag-bg: rgba(155,93,229,0.1); --mm-logo-gradient: linear-gradient(90deg, #7b3dbf, #e0005a, #c5a800); --mm-welcome-color: #7b3dbf; --mm-footer-bg: #e8e0f5; --mm-scrollbar-track: #f0edf5; --mm-scrollbar-thumb: #c4b0e0; } /* ── Neon / Retro Theme ── */ body.theme-neon { --mm-bg-page: #0a0a0a; --mm-bg-card: #111111; --mm-bg-card-alt: #151515; --mm-bg-input: rgba(0,255,136,0.06); --mm-bg-hover: rgba(0,255,136,0.1); --mm-border: rgba(0,255,136,0.25); --mm-border-strong: rgba(0,255,136,0.5); --mm-text-primary: #b0ffcc; --mm-text-secondary: #60a080; --mm-text-heading: #00ff88; --mm-text-link: #ff00ff; --mm-accent: #00ff88; --mm-accent-glow: rgba(0,255,136,0.3); --mm-accent-pink: #ff00ff; --mm-accent-yellow: #ffff00; --mm-accent-cyan: #00ffff; --mm-header-bg: linear-gradient(135deg, #0a0a0a 0%, #0d1a10 60%, #0a0a0a 100%); --mm-nav-bg: #111111; --mm-shadow: rgba(0,255,136,0.1); --mm-shadow-strong: rgba(0,255,136,0.2); --mm-btn-bg: linear-gradient(90deg, #00ff88, #00cc66); --mm-btn-text: #000; --mm-tag-bg: rgba(0,255,136,0.12); --mm-logo-gradient: linear-gradient(90deg, #00ff88, #ff00ff, #ffff00); --mm-welcome-color: #00ff88; --mm-footer-bg: #050505; --mm-scrollbar-track: #0a0a0a; --mm-scrollbar-thumb: #1a3020; } /* ── Classic MM Purple Theme ── */ body.theme-classic { --mm-bg-page: #3a1f6e; --mm-bg-card: #4a2d80; --mm-bg-card-alt: #5a3d90; --mm-bg-input: rgba(255,255,255,0.1); --mm-bg-hover: rgba(255,255,255,0.1); --mm-border: rgba(255,255,255,0.2); --mm-border-strong: rgba(255,255,255,0.35); --mm-text-primary: #e8e0f5; --mm-text-secondary: #c4b0e0; --mm-text-heading: #ffffff; --mm-text-link: #7dd9f5; --mm-accent: #c4a0f5; --mm-accent-glow: rgba(196,160,245,0.35); --mm-accent-pink: #FF0074; --mm-accent-yellow: #F9F871; --mm-accent-cyan: #7dd9f5; --mm-header-bg: linear-gradient(135deg, #3a1f6e 0%, #4a2d80 60%, #3a1f6e 100%); --mm-nav-bg: #4a2d80; --mm-shadow: rgba(0,0,0,0.3); --mm-shadow-strong: rgba(0,0,0,0.5); --mm-btn-bg: linear-gradient(90deg, #c4a0f5, #9B5DE5); --mm-btn-text: #fff; --mm-tag-bg: rgba(196,160,245,0.2); --mm-logo-gradient: linear-gradient(90deg, #ffffff, #F9F871, #FF0074); --mm-welcome-color: #F9F871; --mm-footer-bg: #2a1558; --mm-scrollbar-track: #3a1f6e; --mm-scrollbar-thumb: #5a3d90; } /* ── Classic Sneaky Theme (2012 blue/orange/white) ── */ body.theme-sneaky { --mm-bg-page: #ffffff; --mm-bg-card: #f5f8fc; --mm-bg-card-alt: #eef4fa; --mm-bg-input: rgba(0,0,0,0.04); --mm-bg-hover: rgba(255,153,0,0.1); --mm-border: rgba(50,100,160,0.25); --mm-border-strong: rgba(50,100,160,0.5); --mm-text-primary: #1a1a1a; --mm-text-secondary: #555555; --mm-text-heading: #cc6600; --mm-text-link: #2266aa; --mm-accent: #ff9900; --mm-accent-glow: rgba(255,153,0,0.3); --mm-accent-pink: #cc6600; --mm-accent-yellow: #ff9900; --mm-accent-cyan: #3388cc; --mm-header-bg: linear-gradient(180deg, #ff9900 0%, #ffad33 50%, #ffcc66 100%); --mm-nav-bg: #f0f0f0; --mm-shadow: rgba(0,0,0,0.1); --mm-shadow-strong: rgba(0,0,0,0.2); --mm-btn-bg: linear-gradient(90deg, #ff9900, #e68a00); --mm-btn-text: #fff; --mm-tag-bg: rgba(255,153,0,0.12); --mm-logo-gradient: linear-gradient(90deg, #1a5276, #2266aa, #3388cc); --mm-welcome-color: #cc6600; --mm-footer-bg: #e8e8e8; --mm-scrollbar-track: #f5f5f5; --mm-scrollbar-thumb: #cccccc; } /* ── Theme toggle button (in nav bar) ── */ .mm-theme-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 4px; border: 1px solid rgba(249,248,113,0.3); background: rgba(249,248,113,0.08); color: #F9F871; font-family: 'Courier New', Courier, monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; line-height: 1; white-space: nowrap; margin-left: 6px; } .mm-theme-toggle:hover { background: rgba(249,248,113,0.2); border-color: rgba(249,248,113,0.5); color: #fff; }