A dark theme for YouTube
YouTube - Modern Dark by ayebrian
Mirrored from https://raw.githubusercontent.com/ayebrian/youtube-theme/main/modern-dark.user.css
Details
Authorayebrian
LicenseCC BY-NC-ND 4.0
Categoryyoutube
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Could be buggy!
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 - Modern Dark
@namespace ayebrian
@version 1.5.3
@description A dark theme for YouTube
@author ayebrian
@license CC BY-NC-ND 4.0
@preprocessor stylus
@homepageURL https://github.com/ayebrian/youtube-theme
@var checkbox VideoInfoStyle "Padding for video sections" 1
@var checkbox RedesignSearchResults "Search results redesign" 1
@var checkbox Blur "Blur for all elements" 1
@var checkbox fakepremium "Fake Premium" 0
@var checkbox Enablepip "Enable hidden PiP" 0
@var checkbox DisableSecondaryColumn "Zen mode (Video Player only)" 0
@var checkbox DisableIVbranding "Hide channel branding" 0
@var checkbox disableprogressgradient "Disable the red-to-pink progress bar" 1
@var checkbox enableaccent "Use custom accent color" 0
@var color custom-accent "Select:" "#ef1313"
==/UserStyle== */
@-moz-document domain("www.youtube.com") {
:root {
--my-selected-button: #3a3a3a;
--border-radius: 10px;
--round20: 20px;
--darker-background: inherit;
--blur-30: blur(60px);
/* Blur for UI elements */
--bg-1-100: #767676;
--bg-1-200: #f4f4f4;
--bg-2-popups: #fff;
--bg-90-gray: #e9e9e9d9;
/* For blur */
--search-bg: #8a8a8a1f;
--gray: #272727;
/* moved from search-bg */
--blur-primary-bg: rgba(255, 255, 255, .9);
--blur-secondary-bg: rgba(0, 0, 0, .5);
--shadow-popup-renderer: 0 4px 32px 0 rgba(89, 89, 89, .44);
--search-item-hover: #0000000f;
--playlist-panel-bg: #e8e8e8;
--playlist-panel-bg-alt: #f5f5f5;
--playlist-items-bg: #e8e8e8;
--playlist-items-bg-alt: #f5f5f5;
}
html[dark],
[dark] {
color-scheme: dark;
/*var(--yt-spec-base-background); /*#0f0f0f*/
--bg-1-100: #1c1c1c;
--bg-1-200: #141414;
--bg-2-popups: #101010;
--bg-90-gray: #1c1c1cd9;
/* For blur */
--search-bg: #ffffff1f;
--gray: #272727;
/* moved from search-bg */
--blur-primary-bg: rgba(13, 13, 13, .77);
--shadow-popup-renderer: 0 4px 32px 0 rgba(13, 13, 13, .77);
--search-item-hover: #ffffff0f;
--playlist-panel-bg: #0c0c0c;
--playlist-items-bg: #181818;
}
if (DisableIVbranding==1) {
.iv-branding {
display: none;
}
}
if (DisableSecondaryColumn==1) {
#secondary, #items.ytd-watch-next-secondary-results-renderer {
display: none!important;
}
}
if (Enablepip==1) {
button.ytp-pip-button.ytp-button {
display: inline-block !important;
}}
if (disableprogressgradient==1) {
.ytp-cairo-refresh-signature-moments .ytp-play-progress, ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-web] #progress.ytd-thumbnail-overlay-resume-playback-renderer, .ytp-cairo-refresh .ytp-swatch-background-color {
background: #ef1313;
}
}
if (enableaccent==1) {
.ytp-cairo-refresh-signature-moments .ytp-play-progress, ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-web] #progress.ytd-thumbnail-overlay-resume-playback-renderer, .ytp-cairo-refresh .ytp-swatch-background-color, .yt-spec-icon-badge-shape--type-notification-refresh .yt-spec-icon-badge-shape__badge, .ytp-cairo-refresh .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox, .ytp-cairo-refresh .ytp-chrome-controls .ytp-button[aria-pressed]::after {
background custom-accent;
}
.ytp-cairo-refresh .ytp-settings-button.ytp-4k-quality-badge::after {
background-color custom-accent; // otherwise no text
}
#title-container > h2.style-scope.ytd-reel-shelf-renderer > yt-icon#icon > span.yt-icon-shape.style-scope.yt-icon.yt-spec-icon-shape > div > svg > path:first-of-type {
fill custom-accent; // shorts icon recolor
}
}
if (VideoInfoStyle==0) {
#below {
background-color: unset!important;
padding: 0!important;
}
ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer {
background-color: transparent!important;
padding: 0!important;
}
.header.ytd-playlist-panel-renderer {
background-color: var(--playlist-panel-bg-alt)!important;
}
.playlist-items.ytd-playlist-panel-renderer {
background-color: var(--playlist-items-bg-alt)!important;
}
}
if (Blur==1) {
ytd-multi-page-menu-renderer[menu-style=multi-page-menu-style-type-system],
ytd-multi-page-menu-renderer.style-scope.ytd-popup-container,
#contentContainer[swipe-open][opened]:not([persistent]),
div#ytp-id-18,
div#watch-while-engagement-panel {
backdrop-filter: var(--blur-30) contrast(0.9) !important;
background: var(--blur-primary-bg) !important;
box-shadow: 0 0 24px 12px var(--paper-dialog-shadow-color, rgba(0, 0, 0, 0.15));
}
div#ytp-id-18 {
background: var(--blur-secondary-bg) !important; // video settings popup
}
ytd-voice-search-dialog-renderer[dialog] {
background-color: transparent!important;
}
html[dark] .gstl_50.sbdd_a,
ytd-menu-popup-renderer,
ytd-menu-popup-renderer.style-scope.ytd-popup-container,
tp-yt-paper-dialog {
background: var(--bg-90-gray) !important;
backdrop-filter: var(--blur-30) saturate(2.5) contrast(1.5);
}
.sbsb_a {
background: none!important;
}
.gstl_50.sbdd_a {
overflow: hidden;
border-radius: 10px;
}
#guide-content.ytd-app {
background-color: transparent; // remove first layer bg coloring to show blur
}
#guide-content.ytd-app {
box-shadow: none;
}
}
if (RedesignSearchResults==1) {
.sbsb_a {
border-radius: 10px;
padding: 5px;
}
ul.sbsb_b {
padding: 0;
}
.sbsb_c[dir=ltr] {
padding: 0px 7px 0px 12px;
border-radius: 5px;
}
}
ytd-compact-video-renderer.ytd-item-section-renderer:first-of-type {
margin-top: 0;
} // video section first, fix perfect borders
ytd-voice-search-dialog-renderer[dialog] {
margin: 0!important;
}
tp-yt-paper-dialog:has(ytd-voice-search-dialog-renderer) {
border-radius: 10px;
overflow:hidden;
}
ytd-watch-flexy[rounded-info-panel] #clarify-box.ytd-watch-flexy,
ytd-watch-metadata.ytd-watch-flexy {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
ytd-playlist-sidebar-renderer {
background-color: var(--bg-2-popups) !important;
}
ytd-browse[page-subtype="playlist"] ytd-two-column-browse-results-renderer.ytd-browse,
ytd-browse[page-subtype="show"] ytd-two-column-browse-results-renderer.ytd-browse {
background-color: var(--darker-background);
}
ytd-multi-page-menu-renderer {
border: 0 !important;
background: var(--bg-2-popups) !important;
}
#logo.ytd-primetime-promo-header-renderer > * > img.yt-img-shadow {
border-radius: 0 !important;
}
ytd-rich-section-renderer > * > #action-button.ytd-primetime-promo-panel-renderer {
border-radius: 8px;
margin-top: 8px;
}
#container.ytd-playlist-panel-renderer {
border: none !important;
}
.header.ytd-playlist-panel-renderer {
background-color: var(--playlist-panel-bg);
border-radius: 8px 8px 0 0;
}
.playlist-items.ytd-playlist-panel-renderer {
background-color: var(--playlist-items-bg);
border-radius: 0 0 8px 8px;
}
tp-yt-paper-item.ytd-menu-service-item-renderer:hover {
border-radius: var(--border-radius);
/* hover selection menu in popups*/
}
ytd-menu-popup-renderer {
background: var(--gray);
border-radius: var(--border-radius);
box-shadow: var(--shadow-popup-renderer);
}
#button-container.ytd-about-channel-renderer {
padding-bottom: 12px;
/* Fix missing padding for the share button by the style above */
}
#header.ytd-engagement-panel-title-header-renderer {
margin-top: -10px;
/* Fix ugly position */
}
tp-yt-paper-listbox {
padding: 10px;
}
tp-yt-paper-item.style-scope.ytd-menu-service-item-renderer,
tp-yt-paper-item#primary-entry {
border-radius: calc(var(--border-radius) / 2);
}
ytd-mini-guide-entry-renderer {
background: none !important;
}
#info.ytd-video-primary-info-renderer {
display: flex;
flex-direction: column !important;
/*due bad location for HD and lower resolution */
align-items: flex-start !important;
}
yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"],
yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"],
yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"],
#chips-wrapper.ytd-feed-filter-chip-bar-renderer {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
ytd-app {
display: block;
background: var(--darker-background) !important;
--app-drawer-content-container-background-color: var( --darker-background) !important;
}
ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"] {
background-color: #000000b3;
}
.sbfl_a {
display: none !important;
}
.sbdd_b {
border: none !important;
background: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.sbsb_d {
background: var(--search-item-hover) !important;
}
.gsfs {
fill: var(--yt-spec-text-primary);
color: var(--yt-spec-text-primary) !important;
}
ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"] #text.ytd-thumbnail-overlay-time-status-renderer {
color: var(--yt-spec-text-primary) !important;
}
#search {
display: flex;
justify-content: center;
align-items: center;
}
ytd-searchbox.ytd-masthead {
flex-direction: row;
align-items: center;
position: relative !important;
}
ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
width: 24px !important;
height: auto;
}
#container.ytd-searchbox {
margin-left: 0 !important;
background: var(--search-bg) !important;
border: none !important;
border-radius: 25px !important;
box-shadow: none !important;
padding: 10px 10px 10px 25px !important;
}
#search-icon.ytd-searchbox {
display: none;
transition: all ease-in-out 0.2s;
}
ytd-searchbox.ytd-masthead[has-input] #search-icon-legacy.ytd-searchbox {
opacity: 1;
right: 50px !important;
background-color: unset!important;
border-radius: 50%;
padding: 6px;
}
ytd-searchbox.ytd-masthead[has-focus] #search-icon.ytd-searchbox {
o...