A dark theme for Youtube
Dracula Pro Theme by foxilated
Details
Authorfoxilated
LicenseMIT
Categorydrac
Created
Updated
Size3.8 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.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: #22212C;
--background-secondary: #21222C;
--background-tertiary: #191A21;
--current-line: #454158;
--selection: #454158;
--foreground: #f8f8f2;
--comment: #786FA7;
--cyan: #84FFF3;
--green: #8AFF80;
--orange: #FCC97F;
--pink: #FF80BF;
--purple: #9882FC;
--red: ##FF9580;
--yellow: ##EDED7A;
}
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: ##FF9580;
--yt-spec-brand-link-text: ##FF9580;
--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: #8AFF80;
--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);
}
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: #9882FC;
}
.sbsb_i {
color: #84FFF3;
}
.sbfl_b {
color: #84FFF3;
}
}