Skip to content

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

some changes made to make the theme work

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;   
}
}

Reviews

No reviews yet.