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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
#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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
//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 :
