Youtube Colored Bar – Change Skin of Youtube with CSS

youtube purple colored bar

youtube purple colored bar

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;
}
If you have installed Stylish, you can directly apply this theme from here
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;

youtube green colored bar

Or red scheme with @theme-color: #f44336;

youtube green colored bar
Buy me a cup of coffee

Useful links :

Leave a Reply

Your email address will not be published. Required fields are marked *