/** * Theme variables — single source of truth for dark/light mode. * Controlled by config.js via data-theme attribute on . * * RGB channel variables (e.g. --color-blue-rgb: 88, 166, 255) allow * each usage to set its own alpha: rgba(var(--color-blue-rgb), 0.15) */ /* =================================================================== Dark theme (default) =================================================================== */ :root { /* Backgrounds */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #13171d; /* Borders */ --border: #21262d; --border-hover: #30363d; /* Text */ --text-primary: #f0f6fc; --text-secondary: #c9d1d9; --text-muted: #8b949e; /* Accents */ --accent-blue: #58a6ff; --accent-purple: #a78bfa; --accent-pink: #ec4899; --accent-teal: #14b8a6; --accent-teal-dark: #0d9488; /* Brand */ --brand-purple: #8b5cf6; --brand-purple-dark: #7c3aed; /* Status */ --green: #238636; --green-hover: #2ea043; --orange: #d29922; --red: #f85149; /* ---- RGB channels for rgba() usage ---- */ --color-blue-rgb: 88, 166, 255; --color-green-rgb: 46, 160, 67; --color-orange-rgb: 210, 153, 34; --color-red-rgb: 248, 81, 73; --color-purple-rgb: 139, 92, 246; --color-teal-rgb: 20, 184, 166; --color-accent-rgb: 0, 122, 204; --color-pink-rgb: 236, 72, 153; --color-accent-purple-rgb: 167, 139, 250; --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; /* Editor UI */ --editor-accent-hover: #1a8ad4; --editor-notification: #e53935; /* Overlay direction: white in dark mode, black in light mode */ --color-overlay-rgb: 255, 255, 255; /* Dark background tones for borders/overlays */ --color-border-rgb: 33, 38, 45; --color-bg-alt-rgb: 22, 27, 34; --color-muted-rgb: 139, 148, 158; /* Surfaces */ --surface-overlay: rgba(13, 17, 23, 0.95); --surface-card: #161b22; --surface-hover: rgba(var(--color-overlay-rgb), 0.04); /* Shadows */ --shadow-sm: 0 1px 3px rgba(var(--color-black-rgb), 0.3); --shadow-md: 0 4px 12px rgba(var(--color-black-rgb), 0.4); --shadow-lg: 0 8px 30px rgba(var(--color-black-rgb), 0.5); /* Editor palette (VS Code-inspired) */ --editor-bg: #1e1e1e; --editor-sidebar-bg: #252526; --editor-panel-bg: #1e1e1e; --editor-border: #2d2d30; --editor-hover: #2a2d2e; --editor-active: #37373d; --editor-accent: #007acc; --editor-text: #cccccc; --editor-text-muted: #969696; --editor-success: #4ec9b0; --editor-warning: #cca700; --editor-error: #f48771; --editor-title-start: #323233; --editor-title-end: #2d2d2d; /* Syntax highlighting */ --syntax-keyword: #569cd6; --syntax-command: #dcdcaa; --syntax-string: #ce9178; --syntax-comment: #6a9955; --syntax-environment: #c586c0; --syntax-brace: #ffd700; --syntax-math: #b5cea8; --syntax-ghost: rgba(150, 150, 150, 0.35); /* PDF viewer */ --pdf-toolbar-bg: #38383d; --pdf-toolbar-border: #2a2a2e; --pdf-toolbar-text: #d7d7db; --pdf-toolbar-input-bg: #1c1b22; --pdf-toolbar-input-border: #5b5b66; --pdf-toolbar-btn-hover: #4a4a4f; --pdf-scroll-bg: #525659; --pdf-viewer-bg: #404040; } /* Theme toggle button */ .theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, transform 0.2s; flex-shrink: 0; } .theme-toggle:hover { background: var(--border-hover); border-color: var(--text-muted); transform: scale(1.1); } /* =================================================================== Light theme =================================================================== */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f6f8fa; --bg-tertiary: #eef1f5; /* Borders */ --border: #d1d9e0; --border-hover: #b8c0cc; /* Text */ --text-primary: #1f2328; --text-secondary: #424a53; --text-muted: #6e7781; /* Accents (deeper for contrast on white) */ --accent-blue: #0969da; --accent-purple: #7c3aed; --accent-pink: #db2777; --accent-teal: #0d9488; --accent-teal-dark: #0f766e; /* Brand */ --brand-purple: #7c3aed; --brand-purple-dark: #6d28d9; /* Status */ --green: #1a7f37; --green-hover: #1a8a3e; --orange: #b35900; --red: #d1242f; /* ---- RGB channels for rgba() usage ---- */ --color-blue-rgb: 9, 105, 218; --color-green-rgb: 26, 127, 55; --color-orange-rgb: 179, 89, 0; --color-red-rgb: 209, 36, 47; --color-purple-rgb: 124, 58, 237; --color-teal-rgb: 13, 148, 136; --color-accent-rgb: 0, 95, 184; --color-pink-rgb: 219, 39, 119; --color-accent-purple-rgb: 124, 58, 237; --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; /* Overlay direction: black in light mode, white in dark mode */ --color-overlay-rgb: 0, 0, 0; /* Light background tones for borders/overlays */ --color-border-rgb: 209, 217, 224; --color-bg-alt-rgb: 246, 248, 250; --color-muted-rgb: 110, 119, 129; /* Editor UI */ --editor-accent-hover: #0050a0; --editor-notification: #d1242f; /* Surfaces */ --surface-overlay: rgba(var(--color-white-rgb), 0.97); --surface-card: #ffffff; --surface-hover: rgba(var(--color-overlay-rgb), 0.04); /* Shadows */ --shadow-sm: 0 1px 3px rgba(var(--color-black-rgb), 0.08); --shadow-md: 0 4px 12px rgba(var(--color-black-rgb), 0.1); --shadow-lg: 0 8px 30px rgba(var(--color-black-rgb), 0.12); /* Editor palette (light IDE) */ --editor-bg: #ffffff; --editor-sidebar-bg: #f3f3f3; --editor-panel-bg: #ffffff; --editor-border: #e0e0e0; --editor-hover: #e8e8e8; --editor-active: #d6d6d6; --editor-accent: #005fb8; --editor-text: #3b3b3b; --editor-text-muted: #6e6e6e; --editor-success: #16825d; --editor-warning: #7d6608; --editor-error: #c72e49; --editor-title-start: #f0f0f0; --editor-title-end: #ececec; /* Syntax highlighting (light) */ --syntax-keyword: #0000ff; --syntax-command: #795e26; --syntax-string: #a31515; --syntax-comment: #008000; --syntax-environment: #af00db; --syntax-brace: #b8860b; --syntax-math: #098658; --syntax-ghost: rgba(100, 100, 100, 0.3); /* PDF viewer */ --pdf-toolbar-bg: #f0f0f0; --pdf-toolbar-border: #d4d4d4; --pdf-toolbar-text: #3b3b3b; --pdf-toolbar-input-bg: #ffffff; --pdf-toolbar-input-border: #c0c0c0; --pdf-toolbar-btn-hover: #e0e0e0; --pdf-scroll-bg: #d5d5d5; --pdf-viewer-bg: #c8c8c8; } /* =================================================================== Demo Navigation Bar (persistent across all 5 demo pages) =================================================================== */ .demo-nav { position: sticky; top: 0; z-index: 200; background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 0 24px; } .demo-nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; height: 50px; gap: 8px; } .demo-nav .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 15px; flex-shrink: 0; margin-right: 8px; } .demo-nav .logo svg { width: 24px; height: 24px; } .demo-nav-tabs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; } .demo-nav-tabs a { padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; border-radius: 6px; transition: color 0.15s, background 0.15s; white-space: nowrap; } .demo-nav-tabs a:hover { color: var(--text-primary); background: var(--surface-hover); } .demo-nav-tabs a.active { color: var(--accent-teal); background: rgba(var(--color-teal-rgb), 0.1); font-weight: 600; } .demo-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; } .demo-nav .try-live-btn, .demo-nav-collapse .try-live-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--accent-teal), var(--accent-teal-dark)); color: #fff !important; font-weight: 600; font-size: 13px; padding: 6px 16px; border-radius: 6px; text-decoration: none; transition: transform 0.2s, filter 0.2s; white-space: nowrap; } .demo-nav .try-live-btn:hover, .demo-nav-collapse .try-live-btn:hover { transform: translateY(-1px); filter: brightness(1.1); } /* =================================================================== Hamburger Menu Button =================================================================== */ .hamburger-menu { display: none; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: 20px; width: 36px; height: 36px; cursor: pointer; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; line-height: 1; padding: 0; margin-left: auto; } .hamburger-menu:hover { background: var(--surface-hover); border-color: var(--border-hover); } /* =================================================================== Demo Nav Collapse (mobile dropdown for demo pages) =================================================================== */ .demo-nav-collapse { display: none; flex-direction: column; gap: 2px; padding: 12px 0 16px; border-top: 1px solid var(--border); } .demo-nav-collapse.open { display: flex; } .demo-nav-collapse a { display: block; padding: 10px 16px; color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 6px; transition: background 0.15s, color 0.15s; } .demo-nav-collapse a:hover { background: var(--surface-hover); color: var(--text-primary); } .demo-nav-collapse a.active { color: var(--accent-teal); background: rgba(var(--color-teal-rgb), 0.1); } .demo-nav-collapse .try-live-btn { margin-top: 6px; text-align: center; justify-content: center; } /* =================================================================== Landing Page Mobile Nav (separate from demo-nav) =================================================================== */ .mobile-nav { display: none; position: fixed; top: 60px; left: 0; right: 0; z-index: 99; background: var(--surface-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 16px 24px; flex-direction: column; gap: 4px; max-height: calc(100vh - 60px); overflow-y: auto; box-shadow: var(--shadow-lg); } .mobile-nav.open { display: flex; } .mobile-nav a { display: block; padding: 12px 16px; color: var(--text-secondary); text-decoration: none; font-size: 15px; font-weight: 500; border-radius: 8px; transition: background 0.15s, color 0.15s; } .mobile-nav a:hover { background: var(--surface-hover); color: var(--text-primary); } .mobile-nav-divider { height: 1px; background: var(--border); margin: 8px 0; } /* =================================================================== Responsive: Demo Nav + Hamburger =================================================================== */ @media (max-width: 900px) { .hamburger-menu { display: flex; } .demo-nav-tabs, .demo-nav-right { display: none; } }