user.css

:root {
    --image_url: "";
    --is_light: 0;
    --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;
}

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

/* Remove Topbar background colour */
.main-topBar-background {
    --background-base: transparent !important;
}
.main-topBar-overlay {
    background-color: rgba(var(--spice-rgb-main), 0.9);
}

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

/* animated equaliser/heart icons */
img.main-devicePicker-nowPlayingActiveIcon,
.control-button-heart svg,
.main-addButton-button,
.main-trackList-playingIcon,
.main-trackList-rowMarker img,
.main-trackList-rowHeartButton svg:not(.Svg-img-16-icon),
.main-actionBar-ActionBarRow > button:hover,
.main-nowPlayingView-contextItemInfo > button:hover,
.main-whatsNewFeed-actions > button:hover,
.main-trackCreditsModal-closeBtn > svg,
.x-settings-equalizerPanelCanvas {
    filter: var(--colormatrix);
}

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

.main-entityHeader-overlay,
.Root__globalNav {
    background-color: transparent;
}

.encore-dark-theme,
.encore-dark-theme .encore-base-set {
    --background-base: transparent;
}

#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(3) saturate(1.5);
    pointer-events: none;
    backface-visibility: hidden;
    transition: background-image linear 0.35s;
    opacity: calc(var(--is_light) * 0.05 + 0.12);
    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: -35%;
}

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

/* 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;
}

/* 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;
}

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

/* album year info */
.main-trackInfo-release {
    font-size: 0.6875rem;
    grid-row: 4;
    grid-column: 1 / 3;
}

/* 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;
}

/* new navbar interface */
.Root__globalNav .main-topBar-buddyFeed {
    color: var(--spice-selected-row);
}

.main-userWidget-box,
.main-globalNav-link-icon {
    background-color: transparent !important;
}

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

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

.main-nowPlayingBar-nowPlayingBar,
.main-nowPlayingBar-isAnonymous {
    border-radius: 8px;
}

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

/* 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);
}

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

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

/* 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;
}

/* Adding border Radius to Navbar/topbar Container */
.main-topBar-container.main-topBar-withBackgroundBlur .main-topBar-background {
    border-radius: 8px;
}

.main-topBar-container {
    border-radius: 8px !important;
}

/* Remove weird gradient in right sidebar */
.main-nowPlayingView-contextItemInfo:before {
    background: none !important;
}

/* Tone done gradients */
.under-main-view,
[style*="background-color"]:not(.main-shelf-shelfGrid [style*="background-color"]) {
    opacity: 0;
}

/* Fix forced subdue */
[style*="--text-subdued"] {
    --text-subdued: var(--spice-subtext) !important;
}

/* Fix search cards text color */
.main-shelf-shelfGrid [style*="background-color"] {
    color: var(--spice-main);
}

/* Fix play button hover color */
.encore-dark-theme .encore-inverted-light-set,
.encore-dark-theme .encore-bright-accent-set {
    --background-highlight: var(--background-press) !important;
    --background-press: var(--spice-subtext) !important;
    --decorative-subdued: var(--spice-subtext) !important;
}

/* Fix avatar icon */
.main-userWidget-box {
    opacity: 1 !important;
}

/* Fix now playing artist color */
.main-nowPlayingView-trackInfo.main-trackInfo-container .main-trackInfo-artists {
    --text-subdued: #ccc;
}

/* 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;
}