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.3 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

Requires this script here for the late 2019-mid 2020 YouTube layout: https://userstyles.world/style/6311/

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.

Source code

/* ==UserStyle==
@name         YouTube Late 2017-Mid 2019 Polymer Colors
@version      20231217.05.27
@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-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;
}

#tabs-divider.ytd-c4-tabbed-header-renderer {
  border-bottom: 0px !important;
}

if watchBackground {
    div.style-scope.ytd-watch-flexy {
      background-color: var(--yt-app-background) !important;
    }
}
}

Reviews

No reviews yet.