Skip to content

Instantly share code, notes, and snippets.

@Explosion-Scratch

Explosion-Scratch/CleanTube YouTube Userstyle.user.js

Last active March 29, 2025 22:46
Show Gist options
  • Save Explosion-Scratch/31cf3a9ba922b0288ee82d9bc84ced0b to your computer and use it in GitHub Desktop.
Save Explosion-Scratch/31cf3a9ba922b0288ee82d9bc84ced0b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CleanTube YouTube Userstyle.user.js
// ==UserScript==
// @name CleanTube2
// @namespace mailto:[email protected]
// @version 1.0
// @description A script to clean up and enhance YouTube experience
// @author Explosion Scratch
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==
(function () {
const style = `
/* NOTE: I have basically copy pasted from stylish's website because they didn't let me copy without installing the extension */
/*
* Name: CleanTube v2
* Author: Sardorbek Usmonov
* Version: 2.0.0
*/
/* ============ COLOR PALETTE ============ */
:root {
--blue-day: #306af2;
--blue-night: #4789e5;
--red-day: #f8333c;
--red-night: #ee353e;
--green-day: #28b75c;
--green-night: #20944b;
/* Day */
--day-darker: #7d7d7d;
--day-dark: #b7b7b7;
--day-light: #dddddd;
--day-lighter: #eaeaea;
--day-lightest: #ffffff;
/* Night */
--night-darkest: #1c1f28;
--night-darker: #232733;
--night-dark: #333949;
--night-light: #6b7699;
--night-lighter: #9ca2b7;
}
/* Cream White Theme */
html:not([style-scope]):not(.style-scope) {
--yt-spec-brand-background-primary: var(--day-lightest) !important;
}
ytd-masthead,
app-toolbar.ytd-c4-tabbed-header-renderer {
box-shadow: var(--masterhead-shadow) !important;
}
/* Day */
html:not([style-scope]):not(.style-scope) {
/* CUSTOM */
--watched-bg-color: rgba(255, 255, 255, 0.45);
--masterhead-shadow:
0 5px 12px 5px rgba(228, 9, 9, 0.07), 0 0 0px rgba(0, 0, 0, 0.25);
/* REMAPPED */
--yt-spec-brand-background-primary: var(--day-lighter);
--yt-main-app-background: var(--day-lightest);
--yt-app-background: var(--day-lightest);
--yt-main-app-background-tmp: var(--day-lightest);
--yt-spec-general-background-b: var(--day-lightest);
--yt-spec-general-background-a: var(--day-lightest);
--yt-sidebar-background: var(--day-lightest);
--yt-guide-background: var(--day-lightest);
--yt-dialog-background: var(--day-lightest);
--yt-live-chat-background-color: var(--day-lightest);
--paper-listbox-background-color: var(--day-lightest);
--yt-spec-brand-background-solid: var(--day-lightest);
--darker-bg-color: var(--day-lightest);
--yt-live-chat-vem-background-color: var(--day-lighter);
--yt-std-surface-300: var(--day-lighter);
--yt-simple-menu-header-background: var(--day-lighter);
--yt-featured-channel-title-text-color: var(--day-darker);
--ytd-metadata-line-color: var(--day-darker);
--yt-spec-text-disabled: var(--day-darker);
--yt-spec-text-primary: var(--night-darkest);
--video-title-text-color: var(--night-darker);
--yt-expand-color: var(--day-darker);
--yt-spec-text-secondary: var(--day-darker);
--link-text-color: var(--day-darker);
--ytd-badge-icon-color: var(--day-darker);
--ytd-owner-badge-color: var(--day-darker);
--yt-spec-call-to-action: var(--day-darker);
--badge-bg: var(--red-day);
--badge-color: var(--day-lightest);
--comment-op-bg-color: var(--day-darker);
--iron-icon-fill-color: var(--day-darker);
--comment-op-check-color: var(--day-lightest);
--yt-button-color: var(--day-darker);
--yt-spec-brand-button-background: var(--red-day);
--searchbox-focus-color: var(--red-day);
--searchresults-bg-color: var(--day-lightest);
--searchresults-text-color: var(--day-darker);
--searchresults-text-bg-hovered: var(--day-light);
--searchbox-placeholder-color: var(--day-darker);
--searchresults-searched-text-color: var(--blue-day);
--paper-toggle-button-checked-button-color: var(--blue-day);
--scrollbar-background: var(--day-lightest);
--scrollbar-color: var(--day-light);
--scrollbar-hover: var(--day-dark);
--scrollbar-active: var(--day-darker);
--sidepanel-menu-active: rgb(255, 0, 0, 0.25);
--sidepanel-menu-active-color: red;
--yt-spec-10-percent-layer: var(--day-light);
--yt-spec-icon-disabled: var(--day-light);
--yt-spec-icon-inactive: var(--day-darker);
--skeleton-bg-color: var(--day-lighter);
--paper-toggle-button-unchecked-bar: var(--day-light);
--paper-toggle-button-unchecked-bar-color: var(
--paper-toggle-button-unchecked-bar
);
--url-color: var(--blue-day);
--yt-button-border-radius: 4px !important;
--yt-spec-badge-chip-background: var(--day-lighter);
--yt-menu-hover-backgound-color: var(--yt-spec-badge-chip-background);
--like-dislike-color: var(--blue-day);
--dislike-color: var(--red-day);
--like-color: var(--green-day);
}
/* Night */
html[dark]:not([style-scope]):not(.style-scope),
[dark]:not([style-scope]):not(.style-scope) {
/* CUSTOM */
--watched-bg-color: rgba(0, 0, 0, 0.65);
--masterhead-shadow:
0 5px 12px 5px rgba(36, 36, 36, 0.07), 0 0 0px rgba(0, 0, 0, 0.25);
/* REMAPPED */
--yt-spec-brand-background-primary: var(--night-darker) !important;
--yt-main-app-background: var(--night-darkest);
--yt-app-background: var(--night-darkest);
--yt-main-app-background-tmp: var(--night-darkest);
--yt-spec-general-background-b: var(--night-darkest);
--yt-spec-general-background-a: var(--night-darkest);
--yt-sidebar-background: var(--night-darkest);
--yt-guide-background: var(--night-darkest);
--yt-dialog-background: var(--night-darkest);
--yt-live-chat-background-color: var(--night-darkest);
--paper-listbox-background-color: var(--night-darkest);
--yt-spec-brand-background-solid: var(--night-darkest);
--darker-bg-color: var(--night-darkest);
--yt-live-chat-vem-background-color: var(--night-darker);
--yt-std-surface-300: var(--night-darker);
--yt-simple-menu-header-background: var(--night-darker);
--yt-featured-channel-title-text-color: var(--night-lighter);
--ytd-metadata-line-color: var(--night-lighter);
--yt-spec-text-disabled: var(--night-lighter);
--yt-spec-text-primary: var(--night-lighter);
--video-title-text-color: var(--day-lightest);
--yt-expand-color: var(--night-lighter);
--link-text-color: var(--night-lighter);
--yt-spec-text-secondary: var(--night-lighter);
--ytd-badge-icon-color: var(--night-lighter);
--ytd-owner-badge-color: var(--night-lighter);
--yt-spec-call-to-action: var(--night-lighter);
--badge-bg: var(--red-night);
--badge-color: var(--day-lighter);
--comment-op-bg-color: var(--night-dark);
--iron-icon-fill-color: var(--night-lighter);
--comment-op-check-color: var(--day-lightest);
--yt-button-color: var(--night-lighter);
--yt-spec-brand-button-background: var(--red-night);
--searchbox-focus-color: var(--red-night);
--searchresults-bg-color: var(--night-darker);
--searchresults-text-color: var(--night-lighter);
--searchresults-text-bg-hovered: var(--night-dark);
--searchbox-placeholder-color: var(--night-lighter);
--searchresults-searched-text-color: var(--blue-night);
--paper-toggle-button-checked-button-color: var(--blue-night);
--scrollbar-background: var(--night-darkest);
--scrollbar-color: var(--night-dark);
--scrollbar-hover: var(--night-light);
--scrollbar-active: var(--night-lighter);
--sidepanel-menu-active: var(--night-dark);
--sidepanel-menu-active-color: var(--night-lighter);
--yt-spec-10-percent-layer: var(--night-dark);
--yt-spec-icon-disabled: var(--night-dark);
--yt-spec-icon-inactive: var(--night-lighter);
--skeleton-bg-color: var(--night-darker);
--paper-toggle-button-unchecked-bar: var(--night-dark);
--paper-toggle-button-unchecked-bar-color: var(
--paper-toggle-button-unchecked-bar
);
--url-color: var(--blue-night);
--yt-button-border-radius: 4px !important;
--yt-spec-badge-chip-background: var(--night-darker);
--yt-menu-hover-backgound-color: var(--yt-spec-badge-chip-background);
--like-dislike-color: var(--blue-night);
--dislike-color: var(--red-night);
--like-color: var(--green-night);
}
/* ============ FONTS ============ */
@font-face {
font-family: Google Sans;
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2);
}
@font-face {
font-family: Google Sans;
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2);
}
/* ============ BASE CODE ============ */
body,
html,
#search-input.ytd-searchbox-spt input {
font-family: "Google Sans", Roboto, sans-serif;
font-weight: 400;
}
b {
font-family: "Google Sans", Roboto, sans-serif !important;
font-weight: 500 !important;
}
yt-formatted-string[has-link-only_]:not([force-default-style])
a.yt-simple-endpoint.yt-formatted-string,
#description-text.ytd-video-renderer,
.content.ytd-channel-video-player-renderer,
.deemphasize.yt-formatted-string,
#caption.ytd-toggle-item-renderer,
#label.ytd-pinned-comment-badge-renderer,
.more-button-exp.ytd-comment-renderer,
.less-button-exp.ytd-comment-renderer {
color: var(--link-text-color) !important;
}
yt-icon.ytd-pinned-comment-badge-renderer {
fill: var(--link-text-color) !important;
}
#tabs-inner-container.ytd-c4-tabbed-header-renderer,
#channel-header.ytd-c4-tabbed-header-renderer,
#container #section,
ytd-multi-page-menu-renderer {
background: var(--darker-bg-color) !important;
}
#sections.ytd-multi-page-menu-renderer
> ytd-background-promo-renderer.ytd-multi-page-menu-renderer {
background: var(--darker-bg-color);
margin-bottom: none;
}
paper-button.ytd-subscribe-button-renderer
.deemphasize.yt-formatted-string {
color: white !important;
}
paper-button.ytd-subscribe-button-renderer[subscribed]
.deemphasize.yt-formatted-string {
color: var(--yt-spec-text-secondary) !important;
}
#video-title.yt-simple-endpoint.ytd-grid-video-renderer,
h3.ytd-compact-video-renderer,
ytd-compact-radio-renderer.use-ellipsis
#video-title.ytd-compact-radio-renderer,
#video-title.ytd-playlist-panel-video-renderer,
.title.ytd-video-primary-info-renderer {
color: var(--video-title-text-color) !important;
}
ytd-live-chat-frame#chat,
#search-icon-legacy.ytd-searchbox:hover {
border: none;
box-shadow: none;
}
ytd-author-comment-badge-renderer,
ytd-button-renderer.style-primary[is-paper-button] {
background: var(--comment-op-bg-color) !important;
}
ytd-author-comment-badge-renderer yt-icon {
fill: var(--comment-op-check-color);
}
ytd-guide-entry-renderer[active] {
background-color: var(--sidepanel-menu-active);
border-radius: 0 25px 25px 0;
}
ytd-guide-entry-renderer[active] .guide-icon.ytd-guide-entry-renderer,
ytd-guide-entry-renderer[active] .title.ytd-guide-entry-renderer {
fill: var(--sidepanel-menu-active-color);
color: var(--sidepanel-menu-active-color);
}
app-toolbar.ytd-c4-tabbed-header-renderer {
box-shadow:
0 5px 10px rgba(0, 0, 0, 0.15),
0 0 0px rgba(0, 0, 0, 0.25);
}
ytd-sentiment-bar-renderer[activated_]
#like-bar.ytd-sentiment-bar-renderer {
background: var(--blue-day);
}
#home-page-skeleton .skeleton-bg-color,
.masthead-skeleton-icon,
.watch-skeleton .skeleton-bg-color,
html[dark] #home-page-skeleton .skeleton-bg-color,
html[dark] .masthead-skeleton-icon,
html[dark] .watch-skeleton .skeleton-bg-color {
background-color: var(--skeleton-bg-color) !important;
}
paper-toggle-button[checked]:not([disabled])
.toggle-bar.paper-toggle-button,
.sbsb_d {
background-color: var(--paper-toggle-button-unchecked-bar) !important;
}
#expander
yt-formatted-string[has-link-only_]:not([force-default-style])
a.yt-simple-endpoint.yt-formatted-string,
#description a.yt-simple-endpoint.yt-formatted-string,
#expander a.yt-simple-endpoint.yt-formatted-string {
color: var(--url-color) !important;
}
#container.ytd-sentiment-bar-renderer {
background-color: var(--dislike-color) !important;
}
ytd-sentiment-bar-renderer[activated_] #like-bar.ytd-sentiment-bar-renderer,
#like-bar.ytd-sentiment-bar-renderer {
background: var(--like-color);
}
ytd-toggle-button-renderer.style-default-active[is-icon-button]:first-child,
ytd-toggle-button-renderer.style-default-active[is-icon-button]:nth-child(
3
) {
--yt-spec-call-to-action: var(--like-color) !important;
--iron-icon-fill-color: var(--like-color) !important;
}
ytd-toggle-button-renderer.style-default-active[is-icon-button]:nth-child(
2
),
ytd-toggle-button-renderer.style-default-active[is-icon-button]:nth-child(
5
) {
--yt-spec-call-to-action: var(--dislike-color) !important;
--iron-icon-fill-color: var(--dislike-color) !important;
}
/* ============ SEARCHBOX ============ */
#search-icon-legacy.ytd-searchbox,
#container.ytd-searchbox {
border: none;
background: transparent !important;
}
#container.ytd-searchbox input.ytd-searchbox::placeholder,
input#search::placeholder {
color: var(--searchbox-placeholder-color);
}
ytd-searchbox[has-focus] #container.ytd-searchbox {
border: none;
border-bottom: var(--searchbox-focus-color) solid 1px;
box-shadow: none;
transition: border-bottom 350ms ease-in-out;
-webkit-transition: border-bottom 350ms ease-in-out;
-o-transition: border-bottom 350ms ease-in-out;
}
#container.ytd-searchbox {
box-shadow: none !important;
}
/* ============ SEARCHRESULTS ============ */
.sbdd_b,
.sbsb_a,
.sbfl_b {
background: var(--searchresults-bg-color);
border: none;
}
.gsfs,
.sbfl_a {
color: var(--searchresults-text-color);
}
.sbsb_d {
background: var(--searchresults-text-bg-color-hovered);
}
.sbpqs_a {
color: var(--searchresults-searched-text-color);
}
.sbdd_a {
top: 50px !important;
z-index: 9999 !important;
}
.sbdd_b {
box-shadow:
0 5px 10px rgba(0, 0, 0, 0.15),
0 0 0px rgba(0, 0, 0, 0.25);
}
/* ============ WATCHED BADGE ============ */
ytd-thumbnail-overlay-toggle-button-renderer,
ytd-thumbnail-overlay-time-status-renderer[overlay-style="DEFAULT"] {
z-index: 2;
}
ytd-thumbnail-overlay-resume-playback-renderer,
#progress.ytd-thumbnail-overlay-resume-playback-renderer {
background-color: var(--watched-bg-color);
height: 100%;
width: 100%;
}
#progress.ytd-thumbnail-overlay-resume-playback-renderer:after {
content: "/*[[customwatch]]*/";
left: 0;
top: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.35rem;
letter-spacing: 0.035rem;
height: 21px;
margin: 4px;
padding: 0 3px;
border-radius: 3px;
opacity: 0.8;
color: #fff;
background: #121212;
}
ytd-thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer,
#progress.ytd-thumbnail-overlay-resume-playback-renderer {
height: 0;
}
yt-formatted-string.ytd-thumbnail-overlay-playback-status-renderer {
display: none;
}
/* ============ BADGES ============ */
.badge-style-type-simple.ytd-badge-supported-renderer,
.badge-style-type-live-now.ytd-badge-supported-renderer,
.badge-style-type-red.ytd-badge-supported-renderer,
#privacy-stats yt-icon.ytd-badge-supported-renderer {
background: var(--badge-bg);
color: var(--badge-color);
fill: var(--badge-color);
border: none;
}
/* ============ FROSTED ============ */
ytd-thumbnail-overlay-side-panel-renderer {
--blur: 10px;
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
}
/* ============ SCROLLBAR ============ */
html[hide-scrollbar="true"] ::-webkit-scrollbar,
::-webkit-scrollbar-corner {
display: none;
}
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
background: var(--scrollbar-background);
width: 10px;
height: 10px;
}
#guide-inner-content.ytd-app::-webkit-scrollbar,
#guide-inner-content.ytd-app::-webkit-scrollbar-corner {
background: var(--scrollbar-background);
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button,
#guide-inner-content.ytd-app::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb,
#guide-inner-content.ytd-app::-webkit-scrollbar-thumb {
background: var(--scrollbar-color);
}
::-webkit-scrollbar-thumb:not(:active):hover,
#guide-inner-content.ytd-app::-webkit-scrollbar-thumb:not(:active):hover {
background: var(--scrollbar-hover);
}
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover:active,
#guide-inner-content.ytd-app::-webkit-scrollbar-thumb:active,
#guide-inner-content.ytd-app::-webkit-scrollbar-thumb:hover:active {
background: var(--scrollbar-active);
}
`;
const s = document.createElement("style");
s.textContent = style;
document.head.appendChild(s);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment