ytmd-theme.css

/*!
 * Do a Find and Replace for "#0d47a1" with the Colour you want to use for your Accent Colour.
 * Additionally do a Find and Replace for "13, 71, 161" with the RGB values making sure to do the same commas.
 *
 * If you want to customise the Logo to become the Accent colour, you can look at the difference of the Hue + Saturation of the YTM Logo
 * And then compare it against the colour you have done. Then with the difference put them in the Hue + Saturation.
 * It's not perfect but gives you a chance to have some more unique customisations.
 *
 * Additionally most things are labelled for what additional changes are made
 */


/* YouTube Music */
html:not(.style-scope)[dark], :not(.style-scope)[dark] {
    --ytmusic-static-brand-red          : #0d47a1 !important;
    --yt-spec-brand-link-text           : #0d47a1 !important;
    --yt-spec-brand-button-background   : #0d47a1 !important;
    --ytmusic-setting-item-toggle-active: #0d47a1 !important;
    --yt-button-color                   : #0d47a1 !important;
    --yt-red                            : #0d47a1 !important;
    

    
    /* Change the hover background for Context Menu */
    --ytmusic-menu-item-hover-background-color: rgba(13, 71, 161, 0.5);
}

/* === Change Navigation bar colour === */
/* Top Navigation */
#nav-bar-background,
/* Side Navigation */
ytmusic-app[guide-collapsed] #mini-guide-background {
    
    --ytmusic-nav-bar: #0d47a1;
}

ytmusic-subscribe-button-renderer {
    --ytmusic-subscribe-button-color    : #0d47a1 !important;
}


/* === Progress Bar + Volume === */
#progress-bar.ytmusic-player-bar {
    --paper-slider-active-color     : #0d47a1 !important;
}
#progress-bar.ytmusic-player-bar[focused],
ytmusic-player-bar:hover #progress-bar.ytmusic-player-bar,
.volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar {
    --paper-slider-knob-color               : #0d47a1 !important;
    --paper-slider-knob-start-color         : #0d47a1 !important;
    --paper-slider-knob-start-border-color  : #0d47a1 !important;
    --paper-progress-active-color           : #0d47a1 !important;
}


/* === YouTube Logo in the top left === */
.ytmusic-nav-bar .ytmusic-logo {
    /* This will need some tweeking depending on the user's colour */
    filter: hue-rotate(316.49deg) saturate(0.85);
    transition: filter 0.2s;
}
ytmusic-app-layout[player-page-open] .ytmusic-nav-bar .ytmusic-logo,
ytmusic-app-layout.content-scrolled .ytmusic-nav-bar .ytmusic-logo {
	/* Black version when titlebar is coloured */
    filter: grayscale(100%)
            hue-rotate(0deg)
            contrast(1.5)
        !important;
}

/* === Loading Wheel on Songs === */
ytmusic-play-button-renderer {
    --ytmusic-play-button-loading-indicator-color: #0d47a1 !important;
    --paper-spinner-color                        : #0d47a1 !important;
}

/* === New Recommendations + More === (might no longer be used) */
a.ytmusic-content-update-chip {
    background: #030303;
    color: #fff;
    --yt-endpoint-hover-color: rgba(255,255,255, .7);
}

/* === Increase the Image in the Player bar === */
.thumbnail-image-wrapper.ytmusic-player-bar {
    height: 100% !important;
    padding-top: calc(var(--paper-progress-height) * 2) !important;
}
ytmusic-app-layout .middle-controls .image.ytmusic-player-bar {
    /* 2px is to remove the space for the progress bar and aligned to the bottom */
    height: calc(100% - 2px) !important;
    align-self: flex-end !important;
}

/* === Increase the size of the Queue's Pictures === */
.left-items.ytmusic-player-queue-item {
    --ytmusic-player-queue-item-thumbnail-size: 50px !important;
}

/* === Swap Bottom Play Bar around to match Google Play (Song, Controls, Extra Controls) === */
ytmusic-app-layout > [slot=player-bar] {
    grid-template-columns: 1fr 0fr 1fr !important;
}
/* Fix up some alignment for the controls */
ytmusic-app-layout .left-controls {
    justify-content: flex-end !important;
    grid-area: middle !important;
    width: 300px;
}
ytmusic-app-layout .middle-controls {
    justify-content: normal !important;
    
    grid-area: start !important;
    min-width: 300px;
}

/* Improved swapped controls at smaller sizes */
@media (max-width: 1149px) {
    ytmusic-app-layout .left-controls, ytmusic-app-layout .right-controls {
        width: 150px !important;
    }
    ytmusic-app-layout .left-controls {
        justify-content: flex-start !important;
    }
    ytmusic-app-layout .middle-controls {
        min-width: 100px;
    }
}


/* === Play button Background === */
#play-pause-button {
    background: #0d47a1;
    border-radius: 100%
}
#play-pause-button:hover {
    transition: 0.2s;
    background: rgba(13, 71, 161, 0.7);
}

/* === Set full secreen background === */
ytmusic-app-layout[player-fullscreened_] > [slot=player-bar] {
    background: rgba(25,25,25,0.8) !important;
    width: 100%;
}

/* Center Align the Search */
ytmusic-nav-bar[is-bauhaus-sidenav-enabled] .center-content.ytmusic-nav-bar {
  justify-content: center !important;
}