You can make your own theme by choosing a couple of colours, this userstyle is supposed to look like native YouTube
YouTube - Create Your Theme by tsyron
Mirrored from https://github.com/Tsyron/Create-Your-Theme/blob/main/YouTube/YouTube.user.css
Details
Authortsyron
LicenseAGPLv3
Categoryyoutube
Created
Updated
Code size53 kB
Code checksumac67f63e
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YouTube - Create Your Theme
@namespace github.com/Tsyron/Create-Your-Theme/tree/main/YouTube
@version 1.5.0
@description Create Your Theme by choosing a couple colours
@author Tsyron
@preprocessor stylus
@license AGPLv3
@var color color-background-light "Light Mode: Background" #fff
@var color color-foreground-light "--- Foreground" #0f0f0f
@var color color-accent-light "--- Accent" #f00
@var color color-blue-light "--- Blue" #065fd4
@var color color-green-light "--- Green" #2ba640
@var color color-yellow-light "--- Yellow" #ffd600
@var color color-background-dark "Dark Mode: Background" #0f0f0f
@var color color-foreground-dark "--- Foreground" #f1f1f1
@var color color-accent-dark "--- Accent" #f00
@var color color-blue-dark "--- Blue" #3ea6ff
@var color color-green-dark "--- Green" #2ba640
@var color color-yellow-dark "--- Yellow" #ffd600
@var checkbox checkbox-animations "Animations" 0
==/UserStyle== */
@-moz-document regexp("^https:\\/\\/www\\.youtube\\.com.+"),
domain("music.youtube.com"),
domain("studio.youtube.com") {
/* Light Theme */
bg1l=color-background-light
bg2l=lighten(bg1l, 10%)
bg3l=lighten(bg1l, 20%)
bg4l=darken(bg1l, 2.75%)
bg5l=darken(bg1l, 3%)
bg6l=darken(bg1l, 6.7%)
bg7l=darken(bg1l, 5%)
bg8l=rgba(bg1l, 0.9)
bg9l=rgba(bg1l, 0.2)
bg10l=rgba(bg1l, 0.5)
bg11l=rgba(bg1l, 0.6)
bg12l=rgba(bg1l, 0.7)
fg1l=color-foreground-light
fg2l=rgba(fg1l, 0.05)
fg3l=rgba(fg1l, 0.1)
fg4l=rgba(fg1l, 0.133)
fg5l=rgba(fg1l, 0.2)
fg6l=rgba(fg1l, 0.3)
fg7l=rgba(fg1l, 0.4)
fg8l=rgba(fg1l, 0.5)
fg9l=rgba(fg1l, 0.6)
fg10l=rgba(fg1l, 0.7)
fg11l=rgba(fg1l, 0.8)
fg12l=rgba(fg1l, 0.15)
fg13l=rgba(fg1l, 0.9)
fg14l=rgba(fg1l, 0.75)
ca1l=color-accent-light
ca2l=darken(ca1l, 20%)
ca3l=rgba(ca2l, 0.9)
ca4l=lighten(ca1l, 30%)
cb1l=color-blue-light
cb2l=lighten(cb1l, 32%)
cb3l=darken(cb1l, 10%)
cb4l=rgba(cb1l, 0.1)
cb5l=rgba(cb1l, 0.2)
cb6l=rgba(cb1l, 0.8)
cg1l=color-green-light
cy1l=color-yellow-light
/* Dark Theme */
bg1d=color-background-dark
bg2d=lighten(bg1d, 1.25%)
bg3d=lighten(bg1d, 5%)
bg4d=lighten(bg1d, 7.75%)
bg5d=lighten(bg1d, 10%)
bg6d=lighten(bg1d, 20%)
bg7d=darken(bg1d, 50%)
bg8d=darken(bg1d, 80%)
bg9d=rgba(bg1d, 0.3)
bg10d=rgba(bg1d, 0.5)
bg11d=rgba(bg1d, 0.8)
bg12d=rgba(bg1d, 0.9)
bg13d=rgba(bg1d, 0.08)
bg14d=rgba(bg1d, 0.6)
bg15d=rgba(bg1d, 0.75)
bg16d=rgba(bg1d, 0.1)
fg1d=color-foreground-dark
fg2d=rgba(fg1d, 0.075)
fg3d=rgba(fg1d, 0.1)
fg4d=rgba(fg1d, 0.125)
fg5d=rgba(fg1d, 0.133)
fg6d=rgba(fg1d, 0.2)
fg7d=rgba(fg1d, 0.4)
fg8d=rgba(fg1d, 0.5)
fg9d=rgba(fg1d, 0.7)
fg10d=rgba(fg1d, 0.8)
fg11d=rgba(fg1d, 0.9)
fg12d=rgba(fg1d, 0.6)
fg13d=rgba(fg1d, 0.3)
ca1d=color-accent-dark
ca2d=darken(ca1d, 20%)
ca3d=darken(ca2d, 0.9)
ca4d=lighten(ca1d, 30%)
cb1d=color-blue-dark
cb2d=lighten(cb1d, 10%)
cb3d=rgba(cb2d, 0.25)
cb4d=rgba(cb1d, 0.2)
cb5d=rgba(cb1d, 0.1)
cb6d=rgba(cb1d, 0.8)
cg1d=color-green-dark
cy1d=color-yellow-dark
/* Light Theme */
html,
html[light],
[light],
html[system-icons],
html:not(.style-scope) {
--cyt-background-100: bg1l;
--cyt-foreground-5: fg2l;
--cyt-foreground-10: fg3l;
--cyt-foreground-20: fg5l;
--cyt-foreground-50: fg8l;
--cyt-foreground-90: fg13l;
--cyt-foreground-100: fg1l;
--cyt-blue-darken-10: cb3l;
--cyt-blue-100: cb1l;
--cyt-accent-100: ca1l;
--cyt-yellow-100: cy1l;
--yt-spec-10-percent-layer: var(--cyt-foreground-10);
--yt-spec-ad-indicator: var(--cyt-accent-100);
--yt-spec-base-background: var(--cyt-background-100);
--yt-spec-brand-background-primary: bg3l;
--yt-spec-brand-background-solid: var(--cyt-background-100);
--yt-spec-brand-button-background: var(--cyt-accent-100);
--yt-spec-brand-icon-active: var(--cyt-foreground-100);
--yt-spec-brand-icon-inactive: var(--cyt-foreground-100);
--yt-spec-brand-link-text: var(--cyt-accent-100);
--yt-spec-badge-chip-background: var(--cyt-foreground-5);
--yt-spec-button-chip-background-hover: var(--cyt-foreground-10);
--yt-spec-call-to-action-hover: var(--cyt-blue-darken-10);
--yt-spec-call-to-action-inverse: var(--cyt-blue-100);
--yt-spec-call-to-action: var(--cyt-blue-100);
--yt-spec-error-background: var(--cyt-foreground-100);
--yt-spec-error-indicator: var(--cyt-accent-100);
--yt-spec-filled-button-focus-outline: fg9l;
--yt-spec-filled-button-text: bg2l;
--yt-spec-general-background-a: bg2l;
--yt-spec-general-background-b: bg2l;
--yt-spec-general-background-c: bg2l;
--yt-spec-icon-active-other: var(--cyt-foreground-100);
--yt-spec-icon-disabled: fg8l;
--yt-spec-icon-inactive: var(--cyt-foreground-100);
--yt-spec-inverted-background: var(--cyt-foreground-100);
--yt-spec-menu-background: bg3l;
--yt-spec-additive-background: var(--cyt-foreground-005);
--yt-spec-outline: var(--cyt-foreground-005);
--yt-spec-raised-background: bg3l;
--yt-spec-red-indicator: var(--cyt-accent-100);
--yt-spec-selected-nav-text: var(--cyt-accent-100);
--yt-spec-static-ad-yellow: var(--cyt-accent-100);
--yt-spec-static-brand-red: var(--cyt-accent-100);
--yt-spec-static-brand-white: var(--cyt-background-100);
--yt-spec-static-overlay-background-brand: ca3l;
--yt-spec-static-overlay-background-heavy: fg11l;
--yt-spec-static-overlay-text-primary: var(--cyt-background-100);
--yt-spec-static-overlay-touch-response: var(--cyt-foreground-100);
--yt-spec-suggested-action: cb4l;
--yt-spec-suggested-action-inverse: var(--cyt-foreground-100);
--yt-spec-text-disabled: fg8l;
--yt-spec-text-primary-inverse: var(--yt-spec-base-background);
--yt-spec-text-primary: var(--cyt-foreground-100);
--yt-spec-text-secondary: fg10l;
--yt-spec-themed-blue: var(--cyt-blue-100) !important;
--yt-spec-themed-green: cg1l;
--yt-spec-themed-overlay-background: bg3l;
--yt-spec-touch-response-inverse: var(--cyt-foreground-100);
--yt-spec-touch-response: var(--cyt-foreground-100);
--yt-spec-wordmark-text: var(--cyt-foreground-100);
--ytd-searchbox-background: var(--cyt-background-100);
--ytd-searchbox-border-color: fg5l;
--ytd-searchbox-legacy-border-color: fg5l;
--ytd-searchbox-legacy-border-shadow-color: transparent;
--ytd-searchbox-legacy-button-border-color: fg12l;
--ytd-searchbox-legacy-button-color: bg4l;
--ytd-searchbox-legacy-button-hover-color: bg4l;
--ytd-searchbox-legacy-button-focus-color: bg4l;
--ytd-searchbox-legacy-button-hover-border-color: fg5l;
--ytd-searchbox-legacy-button-icon-color: var(--cyt-foreground-100);
--ytd-searchbox-text-color: var(--cyt-foreground-100);
--yt-live-chat-author-chip-owner-background-color: var(--cyt-yellow-100);
--yt-live-chat-author-chip-owner-text-color: var(--cyt-foreground-100);
--yt-live-chat-action-panel-background-color: var(--cyt-background-100);
/*--yt-live-chat-panel-pages-border-color: fg5l;*/
--yt-live-chat-background-color: var(--cyt-background-100);
--yt-live-chat-banner-gradient-scrim: linear-gradient(bg2l, transparent);
/*--yt-live-chat-banner-border-color: fg5l;*/
--yt-live-chat-enabled-send-button-color: var(--cyt-foreground-100);
--yt-live-chat-product-picker-hover-color: var(--yt-spec-badge-chip-background);
--yt-live-chat-tertiary-text-color: var(--cyt-foreground-100);
--yt-live-chat-text-input-field-inactive-underline-color: fg6l;
--yt-live-chat-toast-background-color: var(--cyt-background-100);
--yt-live-chat-toast-text-color: var(--cyt-foreground-100);
--yt-live-chat-toast-action-color: var(--cyt-blue-100);
--yt-live-chat-vem-background-color: bg6l;
--yt-emoji-picker-category-background-color: bg2l;
--yt-emoji-picker-search-background-color: bg2l;
--paper-input-container-focus-color: bg3l;
--paper-toast-background-color: bg3l !important;
--paper-toggle-button-checked-button-color: var(--cyt-blue-100);
--paper-toggle-button-unchecked-button-color: var(--cyt-background-100);
--paper-tooltip-background: var(--cyt-foreground-100) !important;
--paper-tooltip-text-color: var(--cyt-background-100);
--paper-dialog-background-color: var(--yt-spec-menu-background);
--yt-compact-link-icon-color: c1fl !important;
--yt-deprecated-white-opacity-lighten-1: fg10l;
--yt-deprecated-luna-black-opacity-lighten-2: fg9l;
--yt-deprecated-opalescence-soft-grey: bg6l;
/*--yt-endpoint-color: cb1l;*/
--ytls-menu-header-background: bg3l !important;
--ytd-icon-color: var(--cyt-foreground-100);
--iron-icon-fill-color: var(--cyt-foreground-100);
--yt-frosted-glass-desktop: bg8l;
--yt-frosted-glass-mobile: bg8l;
scrollbar-color: var(--yt-spec-text-secondary) var(--yt-spec-base-background);
/* YouTube Studio, thanks to: Lesboy */
--ytcp-analytics-overview: var(--cyt-accent-100) !important;
--ytcp-badge-blue: cb4l !important;
--ytcp-brand-background-solid: bg2l !impo...