A Pen by Captain Anonymous on CodePen.
Created
July 10, 2024 06:40
-
-
Save djsnipa1/6a87252f322cfdc94e3be3172724b7e4 to your computer and use it in GitHub Desktop.
YouTube Dark Stylesheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* imo, Roboto is too narrow, this spaces it more nicely */ | |
html, body, | |
ytd-page-manager > *.ytd-page-manager { | |
letter-spacing: 0.2px; | |
background-color: rgba(38, 43, 55, 1) !important; | |
} | |
/* VIDEO TITLE */ | |
.title.ytd-video-primary-info-renderer { | |
color: #dce1eb; | |
font-size: 22px !important; | |
} | |
#video-title.yt-simple-endpoint.ytd-grid-video-renderer { | |
color: #dce1eb; | |
} | |
.title.ytd-guide-entry-renderer { | |
color: #dce1eb; | |
} | |
/* VIDEO DESC */ | |
.content.ytd-video-secondary-info-renderer { | |
color: #cbd1dd; | |
} | |
.count-text.ytd-comments-header-renderer { | |
color: #cbd1dd; | |
} | |
#owner-name.ytd-video-owner-renderer { | |
font-size: 1.6rem; | |
margin-bottom: 4px; | |
} | |
/* VIDEO MENU BTN TEXT */ | |
ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer { | |
font-size: 15px; | |
} | |
/* COMMENT TEXT, RELATED VIDS TITLE TEXT */ | |
#content-text.ytd-comment-renderer, | |
#video-title { | |
color: #cbd1dd; | |
font-size: 14px !important; | |
} | |
/* COMMENT USERNAME, MORE/LESS BTN */ | |
#author-text.yt-simple-endpoint.ytd-comment-renderer, | |
.more-button.ytd-comment-renderer, .less-button.ytd-comment-renderer { | |
color: rgba(140, 202, 255, 0.9); | |
font-size: 13px !important; | |
} | |
/* COMMENT USERNAME (OP) */ | |
ytd-author-comment-badge-renderer.creator { | |
background-color: rgb(72, 122, 235) !important; | |
} | |
ytd-author-comment-badge-renderer.creator yt-formatted-string { | |
color: white !important; | |
} | |
/* NAVBAR, CHANNEL HEADER, NOTIFICATIONS BOX */ | |
#masthead, | |
#channel-header.ytd-c4-tabbed-header-renderer, | |
#tabs-inner-container.ytd-c4-tabbed-header-renderer, | |
ytd-multi-page-menu-renderer { | |
background-color: rgba(21, 25, 36, 1); | |
box-shadow: 0 6px 50px rgba(0, 0, 0, 0.3); | |
} | |
/* POPOVERS */ | |
paper-menu { | |
background-color: rgba(21, 25, 36, 0.94); | |
border-radius: 4px; | |
} | |
.dropdown-content.paper-menu-button { | |
background-color: transparent; | |
} | |
/* THUMBNAILS */ | |
ytd-thumbnail.ytd-compact-video-renderer, | |
ytd-thumbnail.ytd-video-renderer { | |
box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4); | |
} | |
ytd-thumbnail.ytd-compact-video-renderer img, | |
ytd-thumbnail.ytd-video-renderer img { | |
border-radius: 2px; | |
} | |
/* SEARCH */ | |
ytd-searchbox[mode=legacy] #container.ytd-searchbox { | |
background-color: rgba(255, 255, 255, 0.1); | |
border: 1px solid transparent; | |
box-shadow: none; | |
border-radius: 2px; | |
} | |
#search-icon-legacy.ytd-searchbox { | |
background-color: transparent; | |
border: none; | |
border-radius: 3px; | |
width: 50px; | |
} | |
ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:hover > yt-icon { | |
color: rgba(255,255,255,0.8) !important; | |
} | |
ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:hover { | |
background-color: transparent; | |
} | |
/* SIDEBBAR */ | |
ytd-guide-renderer.ytd-app, | |
app-drawer.ytd-app:not([persistent]) #header.ytd-app { | |
background-color: rgb(34, 37, 48); | |
} | |
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover { | |
background-color: rgb(53, 58, 69); | |
} | |
/* MINOR TEXT (off-white) */ | |
#published-time-text.ytd-comment-renderer [is=yt-endpoint], | |
ytd-button-renderer #button.ytd-button-renderer, | |
yt-icon, | |
#metadata-line.ytd-grid-video-renderer, | |
.more-button.ytd-comment-replies-renderer, .less-button.ytd-comment-replies-renderer, | |
.more-button.ytd-video-secondary-info-renderer, .less-button.ytd-video-secondary-info-renderer, | |
.date.ytd-video-secondary-info-renderer, | |
#metadata.ytd-video-meta-block, | |
.view-count, | |
#title.ytd-metadata-row-renderer, | |
#byline.ytd-video-meta-block, | |
#metadata-line.ytd-video-meta-block, | |
#label.ytd-pinned-comment-badge-renderer, | |
paper-tab:not(.iron-selected) > .tab-content.paper-tab, | |
#footer.ytd-guide-renderer #guide-links-primary a, #footer.ytd-guide-renderer #guide-links-secondary a, | |
#autoplay.ytd-compact-autoplay-renderer, | |
#title-annotation.ytd-shelf-renderer, | |
paper-button.yt-next-continuation, | |
#description-text.ytd-video-renderer, | |
ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer, | |
#subtitle.ytd-shelf-renderer, | |
#published-time-text.ytd-comment-renderer { | |
color: rgba(180, 190, 200, 0.8) !important; | |
} | |
/* LIKE BTN */ | |
ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer .style-default-active { | |
color: white !important; | |
} | |
#top-level-buttons ytd-toggle-button-renderer.style-default-active:first-child yt-icon, | |
#like-button .style-default-active > yt-icon { | |
color: #5fd9b1 !important; | |
} | |
#top-level-buttons ytd-toggle-button-renderer.style-default-active:nth-child(2) yt-icon, | |
#dislike-button .style-default-active > yt-icon { | |
color: hsl(3, 100%, 66%) !important; | |
} | |
/* COMMENT BTN */ | |
ytd-button-renderer #button.ytd-button-renderer.style-primary { | |
color: white !important; | |
} | |
paper-button { | |
background-color: transparent; | |
} | |
/* VIEWS */ | |
.view-count { | |
font-size: 18px; | |
} | |
/* RED ICON */ | |
ytd-guide-entry-renderer[active] .guide-icon.ytd-guide-entry-renderer { | |
color: rgba(255, 78, 78, 0.83) !important; | |
} | |
/* RED 'NEW' ICON */ | |
.badge-style-type-simple.ytd-badge-supported-renderer { | |
background-color: rgba(96, 100, 118, 0.83); | |
color: rgba(255, 255, 255, 0.78); | |
} | |
/* LINKS */ | |
[is=yt-endpoint], | |
.yt-simple-endpoint, | |
paper-tab:not(.iron-selected):hover > .tab-content { | |
color: rgba(140, 202, 255, 0.9); | |
} | |
[is=yt-endpoint]:hover, | |
.yt-simple-endpoint:hover { | |
color: rgba(180, 230, 255, 1); | |
} | |
/* SUBSCRIBE BTN */ | |
paper-button.ytd-subscribe-button-renderer { | |
background: linear-gradient(90deg,hsl(341, 80%, 49%), hsl(3, 81.8%, 49.6%)); | |
transition: all 0.2s ease; | |
} | |
paper-button.ytd-subscribe-button-renderer:hover { | |
filter: brightness(1.25); | |
} | |
paper-button[subscribed].ytd-subscribe-button-renderer { | |
background: hsl(0, 0%, 93.3%); | |
} | |
/* VOTE COUNT (on comments) */ | |
#vote-count.ytd-comment-action-buttons-renderer { | |
color: #5fd9b1; | |
} | |
/* LIKE BAR */ | |
#sentiment.ytd-video-primary-info-renderer { | |
width: 255px; | |
height: 3px; | |
margin-top: 6px; | |
} | |
#like-bar.ytd-sentiment-bar-renderer { | |
height: 3px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment