:root{ --primary: #D1D1D1; --secondary: #040404; --text-color: #8B8B8B; --text-color-2: var(--secondary); --accent-color: #C82AEF; --accent-color-2: #FFFFFF; --accent-color-3: #1F1F1F; --accent-color-4: #0E0E0E; --accent-color-5: #0404047D; --accent-color-6: #C82AEF85; --star-color: #EFBC2A; --error-color: #e63946; --accent-transparent: #00000000; --accent-transparent-2: #00000073; --box-shadow-top-left: -3px -3px 7px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44); --box-shadow-bottom-right: 3px 3px 7px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44); --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44); --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(200.00000000000006, 42, 238.99999999999997, 0.44); /* ... the rest of your variables ... */ } /* Light Theme Overrides - when */ :root[data-theme="light"] { --primary: #111111; --secondary: #f6f6f8; --text-color: #333333; --text-color-2: #111111; --accent-color: #C82AEF; /* keep same purple accent */ --accent-color-2: #FFFFFF; --accent-color-3: #e0e0e7; --accent-color-4: #ffffff; --accent-color-5: rgba(0, 0, 0, 0.06); --accent-color-6: rgba(200, 42, 239, 0.25); --accent-transparent: #00000000; --accent-transparent-2: rgba(0, 0, 0, 0.12); /* you can keep same box shadows or soften them for light mode */ --box-shadow-top-left: -3px -3px 7px 0px rgba(200, 42, 239, 0.25); --box-shadow-bottom-right: 3px 3px 7px 0px rgba(200, 42, 239, 0.25); --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(200, 42, 239, 0.25); --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(200, 42, 239, 0.25); } /* Theme Toggle Button (Dark / Light) */ .theme-toggle { padding: 5px 10px 0 10px; background-color: transparent; color: var(--primary); height: auto; border: 1px solid var(--accent-color-3); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; margin-left: 8px; } .theme-toggle i { font-size: 18px; line-height: 1; } .theme-toggle:hover { color: var(--accent-color); border-color: var(--accent-color); }