/** * Dark / Light Theme * data-theme="dark" | "light" on */ /* ========== Light theme overrides ========== */ [data-theme="light"] { --color-bg: #f5f5f7; --color-text: #1d1d1f; --color-text-secondary: #6e6e73; --color-accent: #4f46e5; --color-accent-light: #6366f1; --color-card: rgba(255, 255, 255, 0.85); --color-card-hover: rgba(255, 255, 255, 0.95); } [data-theme="light"] body { background-color: var(--color-bg); color: var(--color-text); } [data-theme="light"] .bg-gradient { background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 70%), radial-gradient(circle at bottom left, rgba(79, 70, 229, 0.08), transparent 70%); } [data-theme="light"] .bg-noise { opacity: 0.06; } [data-theme="light"] .bg-grid { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px); } [data-theme="light"] .bg-shapes .shape { opacity: 0.5; mix-blend-mode: multiply; box-shadow: 0 0 80px 10px rgba(79, 70, 229, 0.15); } [data-theme="light"] .social-icon { background-color: rgba(0, 0, 0, 0.06); color: var(--color-text); } [data-theme="light"] .social-icon:hover { background-color: var(--color-accent); color: #fff; } [data-theme="light"] .social-icon .tooltip { background-color: rgba(0, 0, 0, 0.85); } [data-theme="light"] .link-card { border: 1px solid rgba(0, 0, 0, 0.08); } [data-theme="light"] .link-card:hover { border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } [data-theme="light"] .link-icon { background: rgba(0, 0, 0, 0.06); color: var(--color-text); } [data-theme="light"] .footer { color: var(--color-text-secondary); } /* Music card in light mode */ [data-theme="light"] .music-card { background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } [data-theme="light"] .music-title-1, [data-theme="light"] .music-timetext { color: #1d1d1f; } [data-theme="light"] .music-title-2 { color: #6e6e73; } [data-theme="light"] .music-pfp { background-color: #e5e5e7; } [data-theme="light"] .music-controls { color: #1d1d1f; } [data-theme="light"] .music-controls svg:hover { color: var(--color-accent); } [data-theme="light"] .music-time { background-color: #d1d1d6; } [data-theme="light"] .music-slider { background-color: #d1d1d6; } [data-theme="light"] .music-circle { background-color: #1d1d1f; } /* Discord status in light mode */ [data-theme="light"] .status-indicator { border-color: #d1d1d6; } [data-theme="light"] #discord-status-text.error { color: #c00; } /* Overlay in light mode */ [data-theme="light"] #interaction-overlay { background: #f5f5f7; } [data-theme="light"] #interaction-overlay .overlay-content { color: #1d1d1f; } [data-theme="light"] #interaction-overlay .overlay-ripple { border-color: var(--color-accent); } /* ========== Theme toggle button ========== */ .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 10000; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--color-card); color: var(--color-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease; } .theme-toggle:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .theme-toggle:active { transform: scale(0.98); } .theme-toggle:focus { outline: none; } .theme-toggle:focus-visible { box-shadow: 0 0 0 3px var(--color-accent); } [data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, 0.9); color: #1d1d1f; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } [data-theme="light"] .theme-toggle:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* Hide one icon based on current theme */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Smooth transition for theme switch */ html { transition: background-color 0.3s ease, color 0.3s ease; } body, .bg-gradient, .bg-noise, .bg-grid, .link-card, .social-icon, .music-card, .profile-name, .profile-bio { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }