Youtube Colorize All by hdyzen

/* ==UserStyle==
@name           	Youtube Colorize
@namespace      	yup
@version        	1.0.8.2
@description    	change youtube color
@author         	hdyzen
@preprocessor		stylus

@var color bgk	'Base color' #0f0f0f
@var range bgkT	'Base transparency' [100, 0, 100, 1, '%']
@var range alphaS 'Dropwdown search alpha' [100, 0, 100, 1, '%']
@var checkbox toPlaylist 'Apply color to selected item in playlist' 1
@var checkbox toPlayerC	 'Apply to player controls' 0
@var checkbox toProgress 'Apply to video progress bar' 0
@var checkbox toLogoProg 'Apply to logo and others progress bar' 1
@var checkbox skeleton 'Skeleton gradient' 1

==/UserStyle== */
@-moz-document domain("youtube.com") {
	i=!important;
	bgkTH=alpha(bgk, bgkT);
	html[dark], [dark], :root {
		--yt-spec-base-background: bgkTH i;
		--ytd-searchbox-background: lighten(bgkTH, 1%) i;
		--yt-spec-menu-background: lighten(bgkTH, 10%) i;
		--paper-tooltip-background: lighten(bgkTH, 32%) i;
		--yt-spec-raised-background: lighten(alpha(bgkTH, alphaS), 7%) i;
		--yt-spec-text-primary: lighten(bgkTH, 89%) i;
		--yt-spec-text-secondary: lighten(bgkTH, 61%) i;
		--yt-spec-text-disabled: lighten(bgkTH, 38%) i;
		--yt-spec-text-primary-inverse: bgkTH i;
		--yt-spec-icon-inactive: lighten(bgkTH, 94%) i;
		--yt-spec-icon-disabled: lighten(bgkTH, 38%) i;
		--yt-spec-brand-icon-inactive: lighten(bgkTH, 94%) i;
		--ytd-searchbox-legacy-border-color: lighten(bgkTH, 13.83%) i;
		--ytd-searchbox-legacy-button-border-color: lighten(bgkTH, 13.83%) i;
		--ytd-searchbox-legacy-button-color: alpha(lighten(bgkTH, 100%), 0.08) i;
		--ytd-searchbox-legacy-button-hover-color: alpha(lighten(bgkTH, 100%), 0.1) i;
		--yt-spec-static-overlay-background-heavy: alpha(lighten(bgkTH, 4%), bgkT - 20%) i;
		--yt-live-chat-vem-background-color: lighten(bgkTH, 18%) i;
		--yt-spec-10-percent-layer: lighten(bgkTH, 10%) i;
		if toLogoProg {
			--yt-spec-static-brand-red: saturation(lighten(bgkTH, 50%), 80%) i;
		}
	}
	if toPlaylist {
		ytd-playlist-panel-renderer {
			--yt-lightsource-section2-color: alpha(lighten(bgk, 85%), bgkT - 95%) i;
		}
	}
	if toPlayerC {
		.ytp-button path {
			fill: lighten(bgkTH, 85%) i;
			color: lighten(bgkTH, 85%) i;
		}
		.ytp-volume-slider-handle::before, .ytp-volume-slider-handle {
			background: lighten(bgkTH, 85%) i;
		}
		.ytp-tooltip.ytp-preview:not(.ytp-text-detail) {
			background: lighten(bgkTH, 85%) i;
		}
		path.ytp-large-play-button-bg {
			fill: var(--yt-spec-base-background) i;
		}
		.ytp-playlist-menu {
			background: lighten(alpha(bgkTH, alphaS - 20%), 1%) i;
		}
	}
	html[dark] {
		background: bgkTH i;
		#home-container-skeleton, #guide-skeleton, #home-chips, ytd-masthead.shell.dark, ytd-masthead.shell.theater {
			background: bgkTH i;
		}
	}
	html[dark] .watch-skeleton .skeleton-bg-color {
		background: lighten(bgkTH, 10%) i;
	}
	.ytp-popup {
		background: alpha(bgkTH, 0.9) i;
	}
	.masthead-skeleton-icon {
		background: lighten(bgkTH, 10%) i;
	}
	if toProgress {
		.ytp-swatch-background-color {
			background-color: saturation(lighten(bgkTH, 50%), 80%) i;
		}
	}
	if toLogoProg {
		[d^="M27.9727 3.12324C27.6435"] {
			fill: saturation(lighten(bgkTH, 50%), 80%) i;
		}
	}
	#home-page-skeleton .skeleton-bg-color {
		if skeleton {
			background: linear-gradient(90deg, lighten(bgkTH, 10%) 0%, lighten(bgkTH, 12%) 45%, lighten(bgkTH, 14%) 100%) i;
		}
		background: lighten(bgkTH, 10%) i;
	}
}