some changes made to make the theme work
Youtube Dracula Theme Fixed by FinzoYFunzo
Details
AuthorFinzoYFunzo
LicenseNo License
Categoryyoutube.com
Created
Updated
Size3.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
"ytd-app[darker-dark-theme]" and "html[dark],[dark]" changed so the theme works
Source code
/* ==UserStyle==
@name Oficial Dracula Theme
@namespace github.com/dracula/youtube
@version 1.0.0
@description A dark theme for Youtube
@supportURL https://github.com/dracula/gitlab/issues
@license MIT
==/UserStyle== */
@-moz-document domain("youtube.com") {
html {
--background-primary: #282a36;
--background-secondary: #21222C;
--background-tertiary: #191A21;
--current-line: #44475a;
--selection: #44475a;
--foreground: #f8f8f2;
--comment: #6272a4;
--cyan: #8be9fd;
--green: #50fa7b;
--orange: #ffb86c;
--pink: #ff79c6;
--purple: #bd93f9;
--red: #ff5555;
--yellow: #f1fa8c;
}
html:not(.style-scope)[dark], :not(.style-scope)[dark]
{
--yt-spec-brand-background-primary: var(--background-secondary);
--yt-spec-brand-background-secondary: var(--background-tertiary);
--yt-spec-brand-background-solid: var(--background-primary);
--yt-spec-general-background-a: var(--background-tertiary);
--yt-spec-general-background-b: var(--background-secondary);
--yt-spec-general-background-c: var(--background-primary);
--yt-spec-error-background: #f9f9f9;
--yt-spec-text-primary: var(--foreground);
--yt-spec-text-primary-inverse: var(--background-primary);
--yt-spec-text-secondary: var(--comment);
--yt-spec-text-disabled: var(--selection);
--yt-spec-call-to-action: var(--purple);
--yt-spec-icon-active-other: var(--purple);
--yt-spec-icon-inactive: var(--comment);
--yt-spec-icon-disabled: var(--selection);
--yt-spec-badge-chip-background: rgba(255, 255, 255, 0.1);
--yt-spec-verified-badge-background: rgba(255, 255, 255, 0.25);
--yt-spec-suggested-action: #252a3a;
--yt-spec-button-chip-background-hover: rgba(255, 255, 255, 0.2);
--yt-spec-touch-response: #fff;
--yt-spec-paper-tab-ink: rgba(255, 255, 255, 0.3);
--yt-spec-filled-button-text: #030303;
--yt-spec-call-to-action-inverse: #065fd4;
--yt-spec-brand-icon-active: #fff;
--yt-spec-brand-icon-inactive: #909090;
--yt-spec-brand-button-background: #ff5555;
--yt-spec-brand-link-text: #ff5555;
--yt-spec-filled-button-focus-outline: rgba(255, 255, 255, 0.7);
--yt-spec-call-to-action-button-focus-outline: rgba(62, 166, 255, 0.3);
--yt-spec-brand-text-button-focus-outline: rgba(255, 78, 69, 0.3);
--yt-spec-inactive-text-button-focus-outline: #606060;
--yt-spec-ad-indicator: #00aaa7;
--yt-spec-brand-subscribe-button-background: var(--yt-spec-brand-button-background);
--yt-spec-wordmark-text: #fff;
--yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1);
--yt-spec-selected-nav-text: #fff;
--yt-spec-themed-blue: #673AB7;
--yt-spec-themed-green: #50fa7b;
--yt-spec-themed-overlay-background: rgba(0, 0, 0, 0.8);
}
tp-yt0app-drawer {
background: var(--background-primary)
}
ytd-masthead
{
--paper-input-container-input-align: baseline;
display: block;
width: 100%;
background: var(--yt-spec-brand-background-primary);
}
ytd-app[darker-dark-theme]{
background: var(--background-tertiary);
}
html[dark],[dark]{
--yt-spec-base-background: var(--background-primary)
}
paper-toggle-button[checked]:not([disabled]) .toggle-bar.paper-toggle-button
{
opacity: 1;
background-color: #5f6282;
}
.guide-entry-badge.ytd-guide-entry-renderer
{
color: var(--yt-spec-brand-link-text);
}
#progress.ytd-thumbnail-overlay-resume-playback-renderer
{
background-color: var(--yt-spec-themed-blue);
}
#notification-count.ytd-notification-topbar-button-renderer
{
background-color: var(--yt-spec-themed-blue);
}
.sbdd_b, .sbsb_a, .sbfl_b, .sbsb_c
{
background: var(--yt-spec-brand-background-primary);
}
.gsfs, .sbfl_b
{
color: #fff;
}
.sbsb_d
{
background-color: var(--yt-spec-general-background-c);
}
.sbdd_b
{
border: 1px solid transparent;
}
.sbpqs_a {
color: #bd93f9;
}
.sbsb_i {
color: #8be9fd;
}
.sbfl_b {
color: #8be9fd;
}
}