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
Size50 kB
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.4.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)
cgl=color-green-light
cyl=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)
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)
cgd=color-green-dark
cyd=color-yellow-dark
/* Light Theme */
html,
html[light],
[light],
html[system-icons],
html:not(.style-scope) {
/* --yt-spec-10-percent-layer: fg3l;*/
--yt-spec-ad-indicator: ca1l;
--yt-spec-base-background: bg1l;
--yt-spec-brand-background-primary: bg3l;
--yt-spec-brand-background-solid: bg1l;
--yt-spec-brand-button-background: ca1l;
--yt-spec-brand-icon-active: fg1l;
--yt-spec-brand-icon-inactive: fg1l;
--yt-spec-brand-link-text: ca1l;
--yt-spec-badge-chip-background: fg2l;
--yt-spec-button-chip-background-hover: fg3l;
--yt-spec-call-to-action-hover: cb3l;
--yt-spec-call-to-action-inverse: cb1l;
--yt-spec-call-to-action: cb1l;
--yt-spec-error-background: bg1d;
--yt-spec-error-indicator: ca1l;
--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: fg1l;
--yt-spec-icon-disabled: fg8l;
--yt-spec-icon-inactive: fg1l;
--yt-spec-inverted-background: fg1l;
--yt-spec-menu-background: bg3l;
--yt-spec-additive-background: fg2l;
--yt-spec-outline: fg2l;
--yt-spec-raised-background: bg3l;
--yt-spec-red-indicator: ca1l;
--yt-spec-selected-nav-text: ca1l;
--yt-spec-static-ad-yellow: ca1l;
--yt-spec-static-brand-red: ca1l;
--yt-spec-static-brand-white: bg1l;
--yt-spec-static-overlay-background-brand: ca3l;
--yt-spec-static-overlay-background-heavy: fg11l;
--yt-spec-static-overlay-text-primary: bg1l;
--yt-spec-static-overlay-touch-response: fg1l;
--yt-spec-suggested-action: cb4l;
--yt-spec-suggested-action-inverse: fg1l;
--yt-spec-text-disabled: fg8l;
--yt-spec-text-primary-inverse: var(--yt-spec-base-background);
--yt-spec-text-primary: fg1l;
--yt-spec-text-secondary: fg10l;
--yt-spec-themed-blue: cb1l !important;
--yt-spec-themed-green: cgl;
--yt-spec-themed-overlay-background: bg3l;
--yt-spec-touch-response-inverse: fg1l;
--yt-spec-touch-response: fg1l;
--yt-spec-wordmark-text: fg1l;
--ytd-searchbox-background: bg1l;
--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: fg1l;
--ytd-searchbox-text-color: fg1l;
--yt-live-chat-author-chip-owner-background-color: cyl;
--yt-live-chat-author-chip-owner-text-color: fg1l;
--yt-live-chat-action-panel-background-color: bg1l;
/*--yt-live-chat-panel-pages-border-color: fg5l;*/
--yt-live-chat-background-color: bg1l;
--yt-live-chat-banner-gradient-scrim: linear-gradient(bg2l, transparent);
/*--yt-live-chat-banner-border-color: fg5l;*/
--yt-live-chat-enabled-send-button-color: fg1l;
--yt-live-chat-product-picker-hover-color: var(--yt-spec-badge-chip-background);
--yt-live-chat-tertiary-text-color: fg1l;
--yt-live-chat-text-input-field-inactive-underline-color: fg6l;
--yt-live-chat-toast-background-color: bg1l;
--yt-live-chat-toast-text-color: fg1l;
--yt-live-chat-toast-action-color: cb1l;
--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: cb1l;
--paper-toggle-button-unchecked-button-color: bg1l;
--paper-tooltip-background: fg1l !important;
--paper-tooltip-text-color: bg1l;
--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: fg1l;
--iron-icon-fill-color: fg1l;
scrollbar-color: var(--yt-spec-text-secondary) var(--yt-spec-base-background);
/* YouTube Studio, thanks to: Lesboy */
--ytcp-analytics-overview: ca1l !important;
--ytcp-badge-blue: cb4l !important;
--ytcp-brand-background-solid: bg2l !important;
--ytcp-call-to-action-raised-background: cb1l !important;
--ytcp-call-to-action-raised-disabled-background: fg8l !important;
--ytcp-call-to-action-raised-disabled: bg1l !important;
--ytcp-call-to-action-raised: bg1l !important;
--ytcp-call-to-action: cb1l !important;
--ytcp-container-border-color: fg5l !important;
--ytcp-container-border: 1px solid fg5l;
--ytcp-container-hovered-border-color: fg5l !important;
--ytcp-error-red: ca1l !important;
--ytcp-focus: cb1l !important;
--ytcp-general-background-a: bg1l !important;
--ytcp-general-background-b: bg3l !important;
--ytcp-general-background-c: bg2l !important;
--ytcp-hover-item: var(--yt-spec-badge-chip-background) !important;
--ytcp-icon-disabled: fg8l !important;
--ytcp-icon-inactive: fg1l !important;
--ytcp-line-divider-solid: fg5l !important;
--ytcp-line-divider: fg5l !important;
--ytcp-menu-background: bg3l !important;
--ytcp-selected-item: var(--yt-spec-10-percent-layer) !important;
--ytcp-static-background-inverse: bg1l;
--ytcp-static-brand-red: ca1l;
--ytcp-static-overlay-text-primary: fg...