Skip to content

YouTube Late 2017-Mid 2019 Polymer Colors by magma_craft

Screenshot of YouTube Late 2017-Mid 2019 Polymer Colors

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

Reverts back to the old polymer colors before September 2019.

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;
    }
}
}

Reviews

No reviews yet.