user.css

:root {
    --image_url: "";
    --is_light: 0;
    /* You can darken (eg. -20) or lighten (eg. +20) the main color*/
    --custom_darken: -5;
    --system_is_dark: 1;
    --warning_message: "You haven't installed 'default-dynamic.js' extension. Please follow instructions on the README page.";
}

div.ReactModalPortal:last-of-type::before {
    font-size: 30px;
    content: var(--warning_message);
}

@media (prefers-color-scheme: light) {
    :root {
        --system_is_dark: 0;
    }
}

/* remove left sidebar background */
.main-yourLibraryX-entryPoints,
.Root__nav-bar,
.main-rootlist-rootlistDividerGradient {
    background: unset;
}

/* search boxes */
input {
    background-color: unset !important;
    border-bottom: solid 1px var(--spice-text) !important;
    border-radius: 0 !important;
    padding: 6px 10px 6px 48px;
    color: var(--spice-text) !important;
}

input::placeholder {
    color: var(--spice-subtext) !important;
}

input:focus {
    box-shadow: none !important;
}

/* h1-like titles */
h1,
.main-entityHeader-titleButton,
.main-entityHeader-title,
.main-shelf-title,
.TypeElement-canon-textBase-type {
    color: var(--spice-subtext) !important;
}

.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
    color: var(--spice-text) !important;
}

/* Remove Topbar background colour */
.Root__top-bar {
    z-index: 1;
}

.main-topBar-overlay {
    background-color: var(--spice-main);
}

.main-entityHeader-shadow,
.main-contextMenu-menu,
.connect-device-list-container {
    box-shadow: 0 4px 20px #21212130;
}

/* animated equaliser/heart icons */
img.main-devicePicker-nowPlayingActiveIcon,
.main-addButton-button,
.main-trackList-playingIcon,
.main-trackList-rowHeartButton svg:not(.Svg-img-16-icon) {
    filter: var(--colormatrix);
}

.contentSpacing hr {
    border-color: rgba(128, 128, 128, 0.2);
}

/* Full window artist background */
.main-entityHeader-background.main-entityHeader-gradient {
    opacity: 0.3;
}

.main-entityHeader-container.main-entityHeader-withBackgroundImage,
.main-entityHeader-background,
.main-entityHeader-background.main-entityHeader-overlay:after {
    height: 100vh;
}

.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
    justify-content: center;
}

.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
    padding-left: 9%;
}

.main-entityHeader-background.main-entityHeader-overlay:after {
    background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
}

.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
    font-size: 175px !important;
    line-height: 175px !important;
}

/* translucid background cover */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#main {
    position: fixed;
}

#main::before,
.Root__top-container::before {
    content: "";
    background-image: var(--image_url);
    background-size: 100%;
    background-position: center center;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(50px) contrast(1.5) saturate(1.5);
    pointer-events: none;
    backface-visibility: hidden;
    transition: background-image linear 0.35s;
    opacity: calc(var(--is_light) * 0.07 + 0.1);
    z-index: 2;
    width: 150%;
    border-radius: 40%;
}

/* Animate background if option is on */
@container style(--spice-animation: #010101) {
    #main::before,
    .Root__top-container::before {
        will-change: transform;
        animation-duration: 45s;
        animation-name: rotate;
        animation-timing-function: steps(450);
        animation-iteration-count: infinite;
    }

    .Root__top-container::before {
        animation-delay: 10s;
    }
}

#main::before {
    translate: -30%;
}

.Root__top-container::before {
    translate: 30%;
}

/* context menu */
.main-contextMenu-menu {
    border: 1px solid var(--spice-tab-active);
}

/* notification toaster */
.main-notificationBubbleContainer-NotificationBubbleContainer .main-notificationBubble-NotificationBubble {
    color: #ffffff;
    background-color: var(--spice-text);
}

.main-notificationBubbleContainer-NotificationBubbleContainer .TypeElement-balladBold-textBase-type {
    color: #ffffff;
}

/* spotify dynamic gradients */
.main-home-homeHeader {
    opacity: 0.3;
    background-color: var(--spice-text) !important;
}

.main-actionBarBackground-background,
.main-entityHeader-backgroundColor {
    opacity: 0.15;
    background-color: var(--spice-text) !important;
    filter: grayscale(0.5);
}

/* drop down */
.main-dropDown-dropDown,
select,
option {
    color: var(--text-subdued) !important;
    background-color: var(--spice-notification) !important;
}

/* lyrics */
.main-lyricsCinema-container,
.lyrics-lyrics-container,
.main-nowPlayingView-lyricsGradient {
    margin-top: unset;
    --lyrics-color-background: rgba(var(--spice-rgb-main), 0.5) !important;
    --lyrics-color-active: var(--spice-text) !important;
    --lyrics-color-inactive: var(--spice-main-elevated) !important;
    --lyrics-color-passed: rgba(var(--spice-rgb-subtext), 0.8) !important;
}

.main-nowPlayingView-sectionHeaderSpacing .main-nowPlayingView-lyricsTitle {
    color: var(--spice-text);
    min-height: 32px;
}

/* playlist header */
.main-duration-container,
.main-entityHeader-metaDataText,
.playlist-playlist-playlistDescription {
    color: var(--spice-text);
}

/* Menu item hover */
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
    background-color: rgba(var(--spice-rgb-selected-row), 0.2);
}

.main-contextMenu-menuItemButton {
    color: var(--spice-subtext);
}

/* explicit lyrics icon */
.main-tag-container {
    color: var(--spice-subtext);
    background-color: rgba(var(--spice-rgb-subtext), 0.2) !important;
}

/* playlist top buttons */
.os-viewport button:not(.main-playButton-primary):not(:hover) {
    color: var(--spice-subtext) !important;
}

/* album year info */
.main-trackInfo-release {
    font-size: 0.6875rem;
}

/* fix player bar buttons */
.main-nowPlayingBar-left button,
.main-nowPlayingBar-left button[aria-checked="false"],
.main-nowPlayingBar-right button,
.main-nowPlayingBar-right button:focus:not(:focus-visible):not(:hover),
.main-nowPlayingBar-center button:not(.main-playPauseButton-button),
.main-nowPlayingBar-center button:focus:not(:focus-visible):not(:hover) {
    color: var(--spice-subtext);
}

.main-nowPlayingBar-left button:active,
.main-nowPlayingBar-right button:active,
.main-nowPlayingBar-center button:not(.main-playPauseButton-button):active {
    color: rgba(var(--spice-rgb-text), 0.7) !important;
}

.main-playPauseButton-button {
    color: var(--spice-main) !important;
}

/* fix discography buttons */
.encore-dark-theme .encore-inverted-light-set {
    --background-highlight: var(--spice-button-active);
}

/* highlight current playing song */
.main-trackList-active {
    background-color: rgba(var(--spice-rgb-selected-row), 0.2) !important;
}

.encore-dark-theme .encore-bright-accent-set {
    --background-highlight: var(--spice-text);
    --background-press: var(--spice-button-active);
    --decorative-subdued: var(--spice-text);
}

/* top buttons */
.main-topBar-historyButtons .main-topBar-button {
    background-color: var(--spice-main);
}

.main-topBar-buddyFeed {
    color: rgba(var(--spice-rgb-text), 0.5);
}

.search-searchCategory-carouselButton {
    background-color: var(--background-tinted-highlight);
}

/* bottom bar background */
.main-nowPlayingBar-nowPlayingBar {
    background-color: rgba(var(--spice-rgb-shadow), 0.5);
}

/* Topbar text padding */
.main-entityHeader-topbarTitle {
    padding-left: 8px;
}

/* Search cards */
.search-searchBrowse-SearchBrowse span.TypeElement-canon-type,
.x-categoryCard-title {
    color: white;
}

/* Tooltip cards */
.encore-announcement-set,
.encore-announcement-set button {
    color: white;
}

.tippy-box {
    color: var(--spice-text);
    border-color: var(--spice-text);
    background-color: var(--spice-shadow) !important;
}

.tippy-arrow {
    color: var(--spice-text);
}

/* fix podcast icon */
.view-homeShortcutsGrid-imageWrapper > *,
.main-yourEpisodes-coverContainer {
    background-color: var(--spice-highlight);
}

/* verified badge */
.artist-artistVerifiedBadge-fillColor {
    background-color: var(--spice-main);
}

.artist-artistVerifiedBadge-badge {
    fill: var(--spice-text);
}

/* left sidebar hover */
.main-yourLibraryX-listItemGroup:hover::after {
    background-color: rgba(var(--spice-rgb-selected-row), calc(var(--is_light) * (-0.13) + 0.2));
}

.main-yourLibraryX-listItemGroup div:hover {
    background-color: unset;
}

.main-yourLibraryX-listItemGroup:hover .LineClamp,
.main-yourLibraryX-listItemGroup:hover .main-yourLibraryX-listRowSubtitleLeadingWrapper {
    color: var(--spice-text);
}

/* Remove blue outline in confirmation popup */
.main-confirmDialog-buttonContainer button:focus {
    outline: 5px auto white;
}

/* Playlist tips popup */
.StyledPopover-dialog-popover {
    --background-elevated-base: var(--spice-text) !important;
}

/* Playlist filter pills */
.ChipInnerComponent-selected-secondary {
    background: var(--essential-subdued) !important;
}

/* optional mode with emphasized background */
@container style(--spice-contrast: #010101) {
    #main::before,
    .Root__top-container::before {
        filter: blur(80px) contrast(1.2) saturate(1);
        opacity: calc(0.5 - var(--is_light) * 0.1);
        z-index: 0;
    }

    .main-actionBarBackground-background,
    .main-entityHeader-backgroundColor,
    .main-home-homeHeader {
        opacity: 0 !important;
    }

    /* remove the backgrounds from home */
    .main-home-homeHeader,
    .Root__top-container,
    .Root__main-view {
        background: unset !important;
    }

    /* new home block backgrounds */
    .view-homeShortcutsGrid-shortcut,
    .main-card-card {
        background-color: rgba(var(--spice-rgb-shadow), 0.5) !important;
    }

    /* right sidebar */
    .Root__right-sidebar,
    .main-buddyFeed-content,
    .main-buddyFeed-friendsFeedContainer {
        background: unset !important;
        --background-base: rgba(var(--spice-rgb-shadow), 0.5) !important;
    }

    .main-buddyFeed-friendActivity a,
    .main-buddyFeed-timestamp {
        color: var(--text-subdued, #6a6a6a) !important;
    }
}

/* smooth color transitions */
@property --spice-sidebar {
    syntax: "<color>";
    initial-value: magenta;
    inherits: true;
}

@property --spice-main {
    syntax: "<color>";
    initial-value: magenta;
    inherits: true;
}

@property --spice-text {
    syntax: "<color>";
    initial-value: magenta;
    inherits: true;
}

@property --spice-subtext {
    syntax: "<color>";
    initial-value: magenta;
    inherits: true;
}

@property --spice-button {
    syntax: "<color>";
    initial-value: magenta;
    inherits: true;
}

@property --spice-player {
    syntax: "<color>";
    initial-value: magenta;
    inherits: true;
}

html {
    transition:
        --spice-sidebar 0.5s,
        --spice-main 0.5s,
        --spice-text 0.5s,
        --spice-subtext 0.5s,
        --spice-button 0.5s,
        --spice-player 0.5s;
}