Reverts back to the old polymer colors before September 2019.
YouTube Late 2017-Mid 2019 Polymer Colors by magma_craft
Details
Authormagma_craft
LicenseCC Zero
Categoryyoutube
Created
Updated
Size2.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Note: It was required only for the Late 2019-Mid 2020 polymer layout, Non-Rounded Design script (CSS included), and also Revert old colors style script.
Update history:
20220829.18.22 - Intinal Release.
20230202.01.42 - Improved colors for guide and channels.
20230525.01.04 - Fixed a bug with the topbar not being white after update.
20230822.01.35 - Rewrited the entire CSS so it will be less stable from now on.
20231217.05.27 - Added option to revert to the pre-August 2019 watch UI background.
20240812.18.19 - Improved CSS for the channel header UI after update and bug fix for the pre-August 2019 watch UI background.
Source code
/* ==UserStyle==
@name YouTube Late 2017-Mid 2019 Polymer Colors
@version 20240812.18.19
@namespace userstyles.world/user/magma_craft
@description Reverts back to the old polymer colors before September 2019.
@author magma_craft
@license CC Zero
@preprocessor stylus
@var checkbox watchBackground "Use pre-August 2019 watch UI background" 0
==/UserStyle== */
@-moz-document domain("youtube.com") {
html:not([dark]) {
--yt-app-background: hsl(0, 0%, 100%);
--yt-guide-background: hsl(0, 0%, 96%);
--yt-simple-menu-header-background: hsl(0, 0%, 93.3%);
--yt-channel-header-background: hsl(0, 0%, 98%);
}
html[dark] {
--yt-app-background: hsl(0, 0%, 7%);
--yt-guide-background: hsl(0, 0%, 11%);
--yt-simple-menu-header-background: hsla(0, 0%, 53.3%, .4);
--yt-channel-header-background: hsla(0, 0%, 11%, .8);
}
/* Revert pre-September 2019 polymer colors */
#masthead-container.ytd-app::after {
margin-bottom: -5px;
box-shadow: inset 0px 4px 8px -3px rgba(17, 17, 17, .06);
}
ytd-app[hide-header-shadow] #masthead-container.ytd-app::after {
opacity: 1;
}
#guide-content.ytd-app {
background: var(--yt-guide-background) !important;
}
ytd-mini-guide-entry-renderer {
background: var(--yt-guide-background) !important;
}
.guide-icon.ytd-mini-guide-entry-renderer {
color: #909090 !important;
}
ytd-multi-page-menu-renderer {
border: 0px !important;
border-radius: 0px !important;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4) !important;
}
ytd-simple-menu-header-renderer, ytd-active-account-header-renderer.style-scope.ytd-multi-page-menu-renderer {
background-color: var(--yt-simple-menu-header-background) !important;
}
ytd-browse[page-subtype="channels"] {
background: var(--yt-app-background) !important;
}
ytd-c4-tabbed-header-renderer {
--yt-lightsource-section1-color: var(--yt-channel-header-background) !important;
}
#page-header.ytd-tabbed-page-header, #tabs-inner-container.ytd-tabbed-page-header {
background: var(--yt-channel-header-background) !important
}
#tabs-divider.ytd-c4-tabbed-header-renderer, #tabs-divider.ytd-tabbed-page-header {
border-bottom: 0px !important
}
if watchBackground {
ytd-watch-flexy.style-scope.ytd-page-manager.hide-skeleton {
background-color: var(--yt-app-background) !important;
}
}
}