/* Dark theme overrides. Material Dashboard already ships a built-in dark mode activated by adding the "dark-version" class to (see material-dashboard.css ~line 21555) - it covers .card/.dropdown-menu/.table/h1-h6/label out of the box using its own palette (#1a2035 page bg, #202940 surface bg, white text at .6-.8 opacity). We toggle that class together with [data-theme="dark"] on (site.js initializeThemeToggle, persisted to localStorage "lyric-theme"), and this file only supplies what Material Dashboard's dark-version does NOT cover: our own site.css components (mini player, sidebar widgets, pagination, forms) plus Bootstrap's !important text-color utilities (.text-dark etc.) that Material Dashboard's dark-version doesn't touch. Colors below match MD's own dark palette for visual consistency. Loaded after bootstrap/material-dashboard/site.css. */ [data-theme="dark"] { --lyric-bg: #1a2035; --lyric-surface: #202940; --lyric-surface-alt: #232c47; --lyric-surface-hover: #283258; --lyric-text: rgba(255, 255, 255, .8); --lyric-text-muted: rgba(255, 255, 255, .6); --lyric-border: rgba(255, 255, 255, .4); --lyric-link: #6fa8ff; --lyric-shadow: rgba(0, 0, 0, .6); color-scheme: dark; } [data-theme="dark"] .modal { --bs-modal-bg: var(--lyric-surface); --bs-modal-color: var(--lyric-text); --bs-modal-border-color: var(--lyric-border); --bs-modal-header-border-color: var(--lyric-border); --bs-modal-footer-border-color: var(--lyric-border); } /* ---- Surfaces Material Dashboard's dark-version doesn't style ---- */ [data-theme="dark"] .navbar.bg-white, [data-theme="dark"] .site-mini-player, [data-theme="dark"] .site-mini-player-playlist, [data-theme="dark"] .footer, [data-theme="dark"] .name-filter-card, [data-theme="dark"] .library-track, [data-theme="dark"] .library-entity { background-color: var(--lyric-surface) !important; color: var(--lyric-text); border-color: var(--lyric-border) !important; } [data-theme="dark"] .text-bg-light, [data-theme="dark"] .bg-gradient-faded-light, [data-theme="dark"] .bg-light { background-color: var(--lyric-surface-alt) !important; color: var(--lyric-text) !important; } [data-theme="dark"] hr, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-top, [data-theme="dark"] .card-footer, [data-theme="dark"] .site-mini-player-progress, [data-theme="dark"] .site-mini-player-playlist-toolbar { border-color: var(--lyric-border) !important; } /* ---- Bootstrap text-color utilities use !important, so overrides need it too ---- */ [data-theme="dark"] .text-dark, [data-theme="dark"] .text-black, [data-theme="dark"] .text-body { color: var(--lyric-text) !important; } [data-theme="dark"] .text-secondary, [data-theme="dark"] .text-muted { color: var(--lyric-text-muted) !important; } [data-theme="dark"] .player-list-filter, [data-theme="dark"] .player-list-action, [data-theme="dark"] .mobile-search-link, [data-theme="dark"] .mobile-sidebar-toggle { color: var(--lyric-text-muted); } [data-theme="dark"] a { color: var(--lyric-link); } [data-theme="dark"] .nav-link.active { color: #fff !important; } /* Colored gradient banners/badges keep their own white text - do not touch .text-white */ /* ---- Forms (Material Dashboard's dark-version only recolors form-control text, not bg) ---- */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-control-sm, [data-theme="dark"] .form-select, [data-theme="dark"] .form-select-sm, [data-theme="dark"] .form-check-input { background-color: var(--lyric-surface-alt) !important; color: var(--lyric-text) !important; border-color: var(--lyric-border) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--lyric-text-muted); } /* ---- Buttons ---- */ [data-theme="dark"] .btn-outline-secondary { color: var(--lyric-text-muted); border-color: var(--lyric-border); } [data-theme="dark"] .btn-outline-secondary:hover:not(.active) { color: var(--lyric-text); border-color: var(--lyric-text-muted); } /* ---- Pagination ---- */ [data-theme="dark"] .page-link { background-color: var(--lyric-surface) !important; color: var(--lyric-text) !important; border-color: var(--lyric-border) !important; } [data-theme="dark"] .page-item.disabled .page-link { color: var(--lyric-text-muted) !important; } /* ---- Mini player ---- */ [data-theme="dark"] .player-icon-button { color: var(--lyric-text); } [data-theme="dark"] .player-icon-button:hover, [data-theme="dark"] .player-icon-button[aria-pressed="true"] { background: var(--lyric-surface-hover); } [data-theme="dark"] .site-mini-player-queue-item:hover, [data-theme="dark"] .site-mini-player-queue-item.is-current { background: var(--lyric-surface-hover); } [data-theme="dark"] .site-mini-player { box-shadow: 0 10px 30px var(--lyric-shadow); } /* ---- Lyric/article reading content ---- */ [data-theme="dark"] #lyric-content, [data-theme="dark"] pre.text-dark, [data-theme="dark"] .main-content.article-reading-content { background-color: var(--lyric-surface-alt); color: var(--lyric-text) !important; } /* ---- Theme toggle button ---- */ .theme-toggle { color: #344767; background: transparent; border: 0; font-size: 1.5rem; padding: .7rem; } [data-theme="dark"] .theme-toggle { color: var(--lyric-text); } [data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; } [data-theme="dark"] .theme-toggle .fa-moon { display: none; } .theme-toggle .fa-sun { display: none; } .theme-toggle .fa-moon { display: inline-block; } /* ---- Scrollbar polish (WebKit/Chromium) ---- */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--lyric-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--lyric-border); border-radius: 6px; } [data-theme="dark"] .bg-transparent { background-color: transparent !important; } [data-theme="dark"] .library-heading { margin-bottom: 1.5rem; padding: 1.5rem; background: linear-gradient(135deg, var(--lyric-surface), var(--lyric-surface-hover)); border-radius: .75rem; } [data-theme="dark"] .library-discovery { margin-top: 2rem; padding: 1.25rem; background: var(--lyric-surface); border: 1px solid var(--lyric-surface-alt); border-radius: .6rem; } [data-theme="dark"] .bg-gradient-faded-light-vertical { background-image: radial-gradient(200px circle at 50% 70%,rgba(0, 0, 0, 0.9) 0,var(--lyric-surface) 100%); } [data-theme="dark"] .article-featured { padding: 1.2rem .9rem !important; background: linear-gradient(135deg, var(--lyric-surface), var(--lyric-surface-hover)); border-radius: .5rem; } .dark-version .card .card-header.bg-gradient-faded-info { background: radial-gradient(370px circle at 20% 50%,rgba(26,115,232,.6) 0,#135cbc 100%); } .dark-version .card .card-header.bg-gradient-faded-primary { background-image: radial-gradient(370px circle at 20% 50%,rgba(233,30,99,.6) 0,#c1134e 100%); } .dark-version .card .card-header.bg-gradient-faded-success { background-image: radial-gradient(370px circle at 20% 50%,rgba(76,175,80,.6) 0,#3d8b40 100%); } .dark-version .bg-gradient-faded-light { background-image: radial-gradient(370px circle at 80% 50%,rgba(32, 25, 25, 0.6) 0,#242443 100%); } [data-theme="dark"] .table-striped-columns > :not(caption) > tr > :nth-child(2n), [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(2n+1) > * { --bs-table-accent-bg: var(--lyric-surface-alt); color: var(--bs-table-striped-color); } [data-theme="dark"] .table>:not(caption)>*>* { border-bottom-width:1px; box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg); background-color: var(--lyric-surface); } [data-theme="dark"] .bg-gradient-info { background-image:linear-gradient(195deg,#306ca0,#1959ad); } [data-theme="dark"] .bg-gradient-primary { background-image:linear-gradient(195deg,#ad305a,#b41751); } [data-theme="dark"] .bg-gradient-success, [data-theme="dark"] .card-header.bg-gradient-success { background-image:linear-gradient(195deg,#509454,#3b8d3f); } [data-theme="dark"] .bg-gray-100 { background-color: var(--lyric-surface-hover) !important; } [data-theme="dark"] .js-favorite-lyric.is-favorite, .js-favorite-artist.is-favorite, .js-favorite-album.is-favorite, .js-favorite-name.is-favorite { color: #c6285a; border-color: #c6285a; background: var(--lyric-surface-hover); } [data-theme="dark"] .social-network-icon { color: var(--bs-cyan) !important; } [data-theme="dark"] .card.card-plain { background-color: transparent; box-shadow: none; } [data-theme="dark"] .icon-shadow { text-shadow: 1px 1px 32px #ece5cd; } [data-theme="dark"] .navbar-light .navbar-toggler { color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .search-result-group { background: var(--lyric-surface); /* border-color: var(--lyric-border); */ color: var(--lyric-text); } [data-theme="dark"] hr { color: var(--lyric-text) !important; border-top: 1px solid var(--lyric-border); } [data-theme="dark"] .library-tab.is-active { color: #d7dce4; border-bottom-color: #bfc6cf; background: var(--lyric-surface-alt); border-radius: 3px; }