First you will need a plugin/extension for your browser to add CSS, like for Chrome you can use User JavaScript and CSS or Stylish. Here is the CSS code :
#guide-icon.ytd-masthead,
#masthead yt-icon,
#logo-icon-container svg path,
#logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer {
fill: #fff;
}
#guide-content polygon {
fill: #fff;
}
yt-img-shadow.ytd-topbar-menu-button-renderer {
border: 1.5px solid #fff;
}
#country-code.ytd-topbar-logo-renderer {
color: #fff;
}
#search-form #container {
background: rgba(255, 255, 255, 0.2);
border: 0;
box-shadow: none;
border-radius: 6px 0 0 6px;
}
#search-form #container #search {
color: #fff;
}
#search-form #container #search::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
ytd-searchbox[mode="legacy"] #search-icon-legacy.ytd-searchbox {
background: rgba(255, 255, 255, 0.2);
border: 0;
border-radius: 0 6px 6px 0;
box-shadow: none;
transition: 0.3s;
}
ytd-searchbox[mode="legacy"] #search-icon-legacy.ytd-searchbox:hover,
ytd-searchbox[mode="legacy"] #search-icon-legacy.ytd-searchbox:focus {
background: rgba(255, 255, 255, 0.4);
box-shadow: none;
}
ytd-searchbox[mode="legacy"] #search-icon-legacy.ytd-searchbox yt-icon {
transition: 0.3s;
}
#masthead-container {
box-shadow: 0 3px 16px rgba(186, 104, 200, 0.7);
}
#masthead {
background: linear-gradient(to top left, #ba68c8, #863694);
}
polygon {
fill: #863694;
}
#guide-content #logo-icon-container svg path,
#guide-content #logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer,
polygon {
fill: #2e6f69;
}
polygon {
fill: #863694;
}
#guide-content #guide-icon.ytd-masthead,
#guide-content #masthead yt-icon,
#guide-content #logo-icon-container svg path,
#guide-content #logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer,
#guide-content ytd-guide-entry-renderer[active] .yt-icon {
fill: #ba68c8;
}
#guide-content #country-code.ytd-topbar-logo-renderer {
color: #ba68c8;
}
Or you can use LESS to generate CSS :
//written in LESS
@theme-color: #ba68c8; //purple
@theme-color-dark: darken(@theme-color, 20);
#guide-icon.ytd-masthead,
#masthead yt-icon,
#logo-icon-container svg path,
#logo-icon-container.ytd-topbar-logo-renderer
#youtube-paths.ytd-topbar-logo-renderer
path.ytd-topbar-logo-renderer {
fill: #fff;
}
#guide-content polygon {
fill: #fff;
}
yt-img-shadow.ytd-topbar-menu-button-renderer {
border: 1.5px solid #fff;
}
#country-code.ytd-topbar-logo-renderer {
color: #fff;
}
#search-form #container {
background: rgba(255, 255, 255, 0.2);
border: 0;
box-shadow: none;
border-radius: 6px 0 0 6px;
#search {
color: #fff;
&::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
}
}
}
ytd-searchbox[mode="legacy"] #search-icon-legacy.ytd-searchbox {
background: rgba(255, 255, 255, 0.2);
border: 0;
border-radius: 0 6px 6px 0;
box-shadow: none;
transition: 0.3s;
&:hover,
&:focus {
background: rgba(255, 255, 255, 0.4);
box-shadow: none;
}
yt-icon {
transition: 0.3s;
}
}
#masthead-container {
box-shadow: 0 3px 16px fade(@theme-color, 70);
}
#masthead {
background: linear-gradient(to top left, @theme-color, @theme-color-dark);
}
polygon {
fill: @theme-color-dark;
}
#guide-content #logo-icon-container svg path,
#guide-content
#logo-icon-container.ytd-topbar-logo-renderer
#youtube-paths.ytd-topbar-logo-renderer
path.ytd-topbar-logo-renderer,
polygon {
fill: #2e6f69;
}
polygon {
fill: @theme-color-dark;
}
#guide-content {
#guide-icon.ytd-masthead,
#masthead yt-icon,
#logo-icon-container svg path,
#logo-icon-container.ytd-topbar-logo-renderer
#youtube-paths.ytd-topbar-logo-renderer
path.ytd-topbar-logo-renderer,
ytd-guide-entry-renderer[active] .yt-icon {
fill: @theme-color;
}
#country-code.ytd-topbar-logo-renderer {
color: @theme-color;
}
}
You can easily change whole theme color scheme in LESS with one variable @theme-color, for example you can get green color scheme with @theme-color: #66bb6a;
Or red scheme with @theme-color: #f44336;
Useful links :
