Fixes for YT's Dark Mode. You must select Dark or Device theme from appearance menu.
Youtube × OLED Pro Deep Black Dark theme by greatday
Details
Authorgreatday
LicenseMIT
Categoryyoutube.com
Created
Updated
Size2.4 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This theme is meant for OLED or XDR screens. It gets rid of most of the Youtube branding and other annoyances. Customize it by deleting "display:none" portion of the code.
Source code
/* ==UserStyle==
@name Youtube × OLED Pro Deep Black Dark theme
@namespace github.com/openstyles/stylus
@version 1.0.2
@description Fixes for YT's Dark Mode. You must select Dark or Device theme from appearance menu.
@author GreatDay
@license MIT
==/UserStyle== */
@-moz-document domain("www.youtube.com") {
html:not(.style-scope)[dark],
:not(.style-scope)[dark] {
--main-background: black;
--second-background: black;
--hover-background: #171819;
--main-text: #e2e2e2;
--dimmer-text: #bdc3c7;
--yt-spec-base-background: black;
--yt-spec-brand-background-solid: black;
--yt-spec-brand-background-primary: black;
--yt-spec-general-background-a: black;
--yt-spec-general-background-b: black;
--yt-spec-brand-background-secondary: #7f0000;
}
yt-confirm-dialog-renderer[dialog][dialog][dialog],
tp-yt-paper-dialog {
box-shadow: 0 0 10px 5px var(--yt-spec-brand-background-secondary) !important;
}
#img.style-scope.yt-img-shadow {
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
#img.style-scope.yt-img-shadow:hover {
opacity: 1;
}
#country-code {
/* gets rid of the country code */
display: none;
}
.ytd-topbar-logo-renderer.style-scope > .ytd-logo.style-scope {
/* gets rid of the logo */
display: none;
}
.ytp-show-tiles.videowall-endscreen.ytp-player-content.html5-endscreen {
/* gets rid of the end screen suggestions */
display: none;
}
#clarify-box > .ytd-watch-flexy.style-scope,
.ytd-rich-section-renderer.style-scope > .ytd-rich-shelf-renderer.style-scope {
/* gets rid of minor annoyances */
display: none;
}
/* top header */
#container.style-scope.ytd-masthead {
opacity: 0.5;
transition: opacity 0.3s ease;
}
#container.style-scope.ytd-masthead:hover {
opacity: 1;
}
/* sidebar */
ytd-mini-guide-renderer.style-scope.ytd-app {
opacity: 0.5;
transition: opacity 0.3s ease;
}
ytd-mini-guide-renderer.style-scope.ytd-app:hover {
opacity: 1;
}
/* gets rid of new avatar badge */
.ytd-rich-grid-media.style-scope.yt-simple-endpoint {
display: none;
}
}