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
Size12 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.3.10
@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 "Video Info Styling" 1
@var checkbox Blur "Blur for Search and Account" 0
@var checkbox RedesignSearchResults "Redesigned Search Results" 1
@var checkbox fakepremium "Fake Premium" 0
==/UserStyle== */
@-moz-document domain("www.youtube.com") {
:root {
--my-selected-button: #3a3a3a;
--border-radius: 10px;
--round20: 20px;
--darker-background: inherit;
/*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-30: blur(60px); /* Blur for UI elements */
}
html[dark],
[dark] {
color-scheme: dark;
}
if (VideoInfoStyle == 0) {
#below {
background-color: unset!important;
padding: 0!important;
}
}
if (Blur == 1) {
ytd-multi-page-menu-renderer[menu-style=multi-page-menu-style-type-system] {
backdrop-filter: var(--blur-30) contrast(0.5)!important;
background: #000000c4 !important;
}
html[dark] .sbsb_a, ytd-menu-popup-renderer {
background: var(--bg-90-gray) !important;
backdrop-filter: var(--blur-30) saturate(2.5) contrast(1.5);
}
}
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-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: #0c0c0c;
border-radius: 8px 8px 0 0;
}
.playlist-items.ytd-playlist-panel-renderer {
background-color: #181818;
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: 0 4px 32px 0 rgb(0 0 0 / 44%);
}
#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: #ffffff0f !important;
}
.gsfs {
fill: #fff;
color: #fff !important;
}
ytd-thumbnail-overlay-time-status-renderer[overlay-style = "SHORTS"] #text.ytd-thumbnail-overlay-time-status-renderer {
color: #fff !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 {
opacity: 0;
}
#search-icon-legacy.ytd-searchbox {
opacity: 0;
transition: all cubic-bezier(0, 0.79, 0.58, 1) 0.2s;
border: none !important;
background-color: transparent!important;
position: absolute;
right: 45px;
width: auto;
height: auto;
padding: 4px;
}
#sections.ytd-multi-page-menu-renderer > *.ytd-multi-page-menu-renderer {
padding: 6px 0 !important;
}
ytd-thumbnail.ytd-rich-grid-media:before {
background-color: transparent !important;
}
ytd-multi-page-menu-renderer[scrollbar-rework] .menu-container.ytd-multi-page-menu-renderer {
padding: 5px 10px !important;
}
ytd-multi-page-menu-renderer[scrollbar-rework] .menu-container.ytd-multi-page-menu-renderer {
padding: 10px;
}
paper-ripple {
border-radius: 35px !important;
}
tp-yt-paper-tab.iron-selected.ytd-c4-tabbed-header-renderer {
background-color: var(--my-selected-button) !important;
border-radius: 35px !important;
margin-top: 5px;
padding: 0 20px;
}
#tabsContent.tp-yt-paper-tabs > :not(#selectionBar) {
/*padding: 0 20px !important; */
/* Since YouTube is changed the look of the tabs, this is no longer needed */
}
.selection-bar.tp-yt-paper-tabs {
display: none !important;
}
ytd-button-renderer.style-primary[is-paper-button],
tp-yt-paper-button.ytd-subscribe-button-renderer {
background-color: #ffffff14 !important;
color: #fff !important;
border-radius: var(--border-radius) !important;
}
ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer {
background-color: var(--bg-1-200);
padding: 15px;
border-radius: var(--round20);
}
#below {
background-color: var(--bg-1-200);
padding: 15px;
margin: 15px 0;
border-radius: var(--round20);
}
ytd-watch-flexy[flexy] #player-container-inner.ytd-watch-flexy {
border-radius: var(--round20);
}
ytd-backstage-poll-renderer:not([is-image-poll]) .choice-info.ytd-backstage-poll-renderer {
border: 1px solid var(--yt-spec-10-percent-layer);
}
iframe.gstl_50.sbdd_c {
display: none;
} /* hide white iframe in search results */
if (fakepremium == 1) {
html[dark] #logo-icon,
html[dark] #logo-icon-container {
width: 98px !important;
content: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='SVGRoot' version='1.1' viewBox='0 0 846 174' height='24px' width='98px'%3E%3Cdefs id='defs855'%3E%3Cstyle id='style2' /%3E%3C/defs%3E%3Cmetadata id='metadata858'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cg id='layer1'%3E%3Cg transform='translate(0,0.36)' data-name='Layer 2' id='Layer_2'%3E%3Cg data-name='Layer 1' id='Layer_1-2'%3E%3Cpath style='fill:%23ff0000' id='path6' d='M 242.88,27.11 A 31.07,31.07 0 0 0 220.95,5.18 C 201.6,0 124,0 124,0 124,0 46.46,0 27.11,5.18 A 31.07,31.07 0 0 0 5.18,27.11 C 0,46.46 0,86.82 0,86.82 c 0,0 0,40.36 5.18,59.71 a 31.07,31.07 0 0 0 21.93,21.93 c 19.35,5.18 96.92,5.18 96.92,5.18 0,0 77.57,0 96.92,-5.18 a 31.07,31.07 0 0 0 21.93,-21.93 c 5.18,-19.35 5.18,-59.71 5.18,-59.71 0,0 0,-40.36 -5.18,-59.71 z' /%3E%3Cpath style='fill:%23ffffff' id='path8' d='M 99.22,124.03 163.67,86.82 99.22,49.61 Z' /%3E%3Cpath style='fill:%23ffffff' id='path10' d='m 358.29,55.1 v 6 c 0,30 -13.3,47.53 -42.39,47.53 h -4.43 v 52.5 H 287.71 V 12.36 H 318 c 27.7,0 40.29,11.71 40.29,42.74 z m -25,2.13 c 0,-21.64 -3.9,-26.78 -17.38,-26.78 h -4.43 v 60.48 h 4.08 c 12.77,0 17.74,-9.22 17.74,-29.26 z m 81.22,-6.56 -1.24,28.2 c -10.11,-2.13 -18.45,-0.53 -22.17,6 v 76.26 H 367.52 V 52.44 h 18.8 L 388.45,76 h 0.89 c 2.48,-17.2 10.46,-25.89 20.75,-25.89 a 22.84,22.84 0 0 1 4.42,0.56 z M 441.64,11...