A refreshing new look for YouTube Music.
Light Theme for YouTube Music by tech-how
Details
Authortech-how
LicenseNo License
Categorymusic.youtube.com
Created
Updated
Size30 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This project's on GitHub! Latest Version: 1.9 Released on: March 7th, 2023
Release Notes:
- Patched style for Google's new button type
- Small margin fixes on mood chips
- Re-adjusted margins on several pages
- Fixed coloring of links on notifications
- Fixed coloring of share dialog
- Adjusted text casing on updated pages
- Removed left-alignment for history button on library page as its been removed
Known Issues:
- Icons over dynamic content, like videos and album art, sometimes remain black
- The video player overlay can misbehave on different screen resolutions
- Artist photos are confined to squares on the home page
This theme may not be copied and/or redistributed in any way, shape or form, excluding the one copy you obtain from my Userstyles or GitHub page.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Light Theme for YouTube Music
@version 1.9
@description A refreshing new look for YouTube Music.
@author Tech How
@namespace Tech-How
==/UserStyle== */
@-moz-document domain("music.youtube.com") {
/* Light Theme for YouTube Music */
/* By Tech How */
/* Visit this project on GitHub and be the first to know about bug fixes and improvements! */
/* https://github.com/Tech-How/Light-Theme-for-YouTube-Music */
/* Color Scheme */
/* Background Color: F4F4F4 */
/* Accent Color: 262626 */
/* Generic Hover Color: CCCCCC */
/* Player Bar Color: FFFFFF */
/* Divider Color: CCCCCC */
/* Divider Color (Dark Context Menus): 383838 */
/* This theme may not be copied and/or redistributed in any way, shape or form, excluding the one copy you obtain from my Userstyles or GitHub page. */
/* Header/Navigation Bar */
ytmusic-nav-bar .left-content [aria-label=Home] picture {
display: none !important;
}
ytmusic-nav-bar .left-content [aria-label=Home] {
background: url(data:image/png;base64,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);
border-radius: 5px;
width: 120px;
height: 30px;
background-repeat: no-repeat;
}
.center-content.style-scope.ytmusic-nav-bar {
background: #F4F4F4 !important;
}
/* Welcome Image */
.background-gradient.ytmusic-immersive-carousel-shelf-renderer {
display: none;
}
/* Search Box */
ytmusic-search-box {
color: #262626 !important;
background: #F4F4F4 !important;
border-color: #ccc;
border-radius: 7px;
}
ytmusic-search-box:not([opened]):not([has-query]) .search-box.ytmusic-search-box {
background: #F4F4F4 !important;
}
ytmusic-search-box[opened] {
border: 0 !important;
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.26) !important;
}
ytmusic-search-box[opened] #suggestions {
background: #fff !important;
}
ytmusic-search-box[opened] #suggestions ytmusic-search-suggestion {
background: #fff !important;
}
ytmusic-search-box[opened] #suggestions ytmusic-search-suggestion:hover {
background: #eeeeee !important;
}
ytmusic-search-box #input {
caret-color: #5a5a5a !important;
color: black;
}
ytmusic-search-box #input::placeholder {
color: #404040 !important;
}
ytmusic-search-suggestions-section {
border-top: 1px solid #ccc !important;
}
/* Search Box Initiated */
.search-box.ytmusic-search-box {
background: #FEFEFE !important;
}
tp-yt-iron-icon.ytmusic-search-suggestion {
fill: #404040;
}
ytmusic-search-box[opened], ytmusic-search-box[has-query] {
border: 1px solid #C0C0C0;
}
/* Search Box - Below Content Margins */
.scroller.scroller-on-hover.style-scope.ytmusic-chip-cloud-renderer {
margin-bottom: 30px;
}
/* Search Tabs */
ytmusic-tabs.iron-selected .tab.ytmusic-tabs, .tab.selected.ytmusic-tabs {
border-color: #262626;
}
ytmusic-tabs.stuck {
background: #F4F4F4;
}
/* Search Categories */
.yt-simple-endpoint.style-scope.ytmusic-chip-cloud-chip-renderer {
background: #fff !important;
border-color: #ccc !important;
margin-left: -6px;
}
.text.style-scope.ytmusic-chip-cloud-chip-renderer {
color: #000 !important;
}
.style-scope.ytmusic-chip-cloud-chip-renderer {
color: #262626 !important;
fill: #262626 !important;
}
/* Search Results */
#contents.ytmusic-shelf-renderer > *.ytmusic-shelf-renderer:not(:last-child) {
border-color: #ccc
}
/* Search Results Category Stuck Header */
ytmusic-search-page.stuck ytmusic-header-renderer.ytmusic-search-page {
background: #F4F4F4 !important;
}
/* Top Result Card */
.card-container.ytmusic-card-shelf-renderer {
background: #F4F4F4;
}
#actions > yt-button-renderer:nth-child(1) > yt-button-shape > button {
border: 1px solid #ccc;
}
/* 'New Recommendations' Button */
a.ytmusic-content-update-chip {
background: #fff;
border: 1px solid #ccc;
}
.style-scope a.ytmusic-content-update-chip {
color: #262626 !important;
}
/* Notification Pop-Ups */
#toast.ytmusic-notification-text-renderer, tp-yt-paper-toast.yt-notification-action-renderer, tp-yt-paper-toast {
border-radius: 5px;
box-shadow: 7px 7px 10px rgba(0, 0, 0, .5);
background: #fff;
}
.yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover {
background: #fff !important;
}
/* Site Background */
body {
background-color: #F4F4F4;
}
/* Page Headings */
.title.text.style-scope.ytmusic-carousel-shelf-basic-header-renderer {
color: #262626;
}
/* New Chips Style */
a.ytmusic-chip-cloud-chip-renderer {
border: 1px solid #fff !important;
}
ytmusic-chip-cloud-renderer:first-of-type ytmusic-chip-cloud-chip-renderer.ytmusic-chip-cloud-renderer:first-of-type {
margin-left: 6px;
}
ytmusic-chip-cloud-chip-renderer.ytmusic-chip-cloud-renderer {
margin-bottom: 3px !important;
}
#chips.ytmusic-chip-cloud-renderer {
margin-bottom: 3px
}
/* Icons */
.style-scope {
color: #262626 !important;
}
/* Non-Player Artwork Style */
#background.ytmusic-item-thumbnail-overlay-renderer, #content.ytmusic-item-thumbnail-overlay-renderer {
border-radius: 10px;
}
.image-wrapper.ytmusic-two-row-item-renderer {
border-radius: 10px;
box-shadow: 1px 2px 8px 3px rgba(0,0,0,0.27);
}
.items-wrapper.style-scope.ytmusic-carousel {
border-radius: 10px;
}
#items.ytmusic-carousel {
padding: 8px;
}
.next-items-button.ytmusic-carousel, .previous-items-button.ytmusic-carousel {
top: 100px;
}
img.yt-img-shadow {
border-radius: 10px;
}
#thumbnail.ytmusic-data-bound-header-renderer, .thumbnail.ytmusic-data-bound-header-renderer {
border-radius: 10px;
max-height: 264px;
}
/* Artwork/Album Carousel */
tp-yt-paper-icon-button.ytmusic-carousel-shelf-renderer {
border: none;
}
/* Context Menus */
.style-scope.ytmusic-menu-popup-renderer {
background: #fff;
border-color: #DFDFDF !important;
}
.style-scope.ytmusic-multi-select-menu-renderer {
background: #fff;
border-color: #ccc !important;
}
.scroller.style-scope.ytmusic-multi-select-menu-renderer {
background: #fff !important;
}
#items.ytmusic-menu-popup-renderer > .ytmusic-menu-popup-renderer:hover {
background: #DFDFDF !important;
}
.icon.ytmusic-menu-navigation-item-renderer, .icon.ytmusic-menu-service-item-renderer, .icon.ytmusic-toggle-menu-service-item-renderer {
fill: #303030;
}
#title.ytmusic-multi-select-menu-renderer {
border-bottom: 1px solid #ccc;
}
#items.ytmusic-multi-select-menu-renderer > ytmusic-menu-item-divider-renderer.ytmusic-multi-select-menu-renderer {
border-color: #ccc !important;
}
ytmusic-multi-select-menu-item-renderer:hover {
background: #DFDFDF !important;
}
.icon.ytmusic-multi-select-menu-item-renderer {
fill: #262626;
}
/* Text */
.style-scope.text.ytmusic-menu-navigation-item-renderer {
color: #262626 !important;
}
.style-scope.text.ytmusic-menu-service-item-renderer {
color: #262626 !important;
}
.style-scope.text.ytmusic-toggle-menu-service-item-renderer {
color: #262626 !important;
}
.style-scope.text.ytmusic-multi-select-...