Are you tired of the same boring colors on Youtube? Then try this modern color style based on the Dracula theme
Dracula for Youtube by druxorey
Details
Authordruxorey
LicenseGNU General Public License v3.0
CategoryYoutube
Created
Updated
Size41 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Official Dracula Theme Website: https://draculatheme.com/
Github Project: https://github.com/druxorey/StylusThemes/blob/main/Styles/dracula-for-youtube
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Dracula for Youtube
@namespace https://userstyles.world/user/druxorey
@version 1.0
@description "Are you tired of the same boring colors on Youtube? Then try this modern color style based on the Dracula theme"
@author Modified by Druxorey; Made by isabelroses
@homepageURL https://github.com/druxorey/StylusThemes/blob/main/Styles/dracula-for-youtube
@license GNU General Public License v3.0
@preprocessor less
@var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"]
@var checkbox logo "Logo" 0
@var checkbox oledOn "Enable black bars" 0
==/UserStyle== */
@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {
/* youtube.com */
:root[dark] {
#dracula(@darkTheme, @accentColour);
#oled(@oledOn);
#logo(@logo);
}
:root {
#dracula(@lightTheme, @accentColour);
#oled(@oledOn);
#logo(@logo);
}
/* for oled monitors */
#oled(@oled) when (@oled =0) {
#ytd-player #container {
background: @base !important;
}
}
#logo(@logo) {
ytd-topbar-logo-renderer.style-scope a svg > g,
svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) {
path[fill="#FF0000"] {
fill: @accent-colour !important;
}
path[fill="white"] {
fill: @base !important;
}
}
& when (@logo =1) {
ytd-topbar-logo-renderer,
svg.ytd-consent-bump-v2-lightbox {
display: none;
}
}
}
#dracula(@lookup, @accent) {
@rosewater: @dracula[@@lookup][@rosewater];
@flamingo: @dracula[@@lookup][@flamingo];
@pink: @dracula[@@lookup][@pink];
@mauve: @dracula[@@lookup][@mauve];
@red: @dracula[@@lookup][@red];
@maroon: @dracula[@@lookup][@maroon];
@peach: @dracula[@@lookup][@peach];
@yellow: @dracula[@@lookup][@yellow];
@green: @dracula[@@lookup][@green];
@teal: @dracula[@@lookup][@teal];
@sky: @dracula[@@lookup][@sky];
@sapphire: @dracula[@@lookup][@sapphire];
@blue: @dracula[@@lookup][@blue];
@lavender: @dracula[@@lookup][@lavender];
@text: @dracula[@@lookup][@text];
@subtext1: @dracula[@@lookup][@subtext1];
@subtext0: @dracula[@@lookup][@subtext0];
@overlay2: @dracula[@@lookup][@overlay2];
@overlay1: @dracula[@@lookup][@overlay1];
@overlay0: @dracula[@@lookup][@overlay0];
@surface2: @dracula[@@lookup][@surface2];
@surface1: @dracula[@@lookup][@surface1];
@surface0: @dracula[@@lookup][@surface0];
@base: @dracula[@@lookup][@base];
@mantle: @dracula[@@lookup][@mantle];
@crust: @dracula[@@lookup][@crust];
@accent-colour: @dracula[@@lookup][@@accent];
/* apply everywhere */
&,
[dark],
html,
html[system-icons][dark],
html[system-icons] [dark],
html[darker-dark-theme][dark],
[darker-dark-theme] [dark] {
--yt-spec-white-1: @text !important;
--yt-spec-white-2: @subtext0 !important;
--yt-spec-white-3: @subtext1 !important;
--yt-spec-white-4: darken(@subtext1, 5%) !important;
--yt-spec-black-1: @overlay1 !important;
--yt-spec-black-2: @overlay0 !important;
--yt-spec-black-3: @surface2 !important;
--yt-spec-black-4: @surface1 !important;
--yt-spec-black-pure: @surface0 !important;
--yt-spec-grey-1: @text !important;
--yt-spec-grey-2: @subtext0 !important;
--yt-spec-grey-3: @subtext1 !important;
--yt-spec-grey-4: @overlay2 !important;
--yt-spec-grey-5: @overlay1 !important;
--yt-brand-youtube-red: @accent-colour !important;
--yt-brand-medium-red: @accent-colour !important;
--yt-brand-light-red: @accent-colour !important;
--yt-spec-red-30: @peach !important;
--yt-spec-red-70: @red !important;
--yt-spec-pale-blue: @sky !important;
--yt-spec-light-blue: @sky !important;
--yt-spec-dark-blue: @sapphire !important;
--yt-spec-navy-blue: @teal !important;
--yt-spec-light-green: @green !important;
--yt-spec-dark-green: @green !important;
--yt-spec-yellow: @peach !important;
--yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important;
--yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important;
--yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important;
--yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important;
--yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important;
--yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important;
--yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important;
--yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important;
--yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important;
--yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important;
--yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important;
--yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important;
--yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important;
--yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important;
--yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important;
--yt-brand-medium-red-alpha-90: fadeout(@accent-colour, 0.9) !important;
--yt-brand-medium-red-alpha-30: fadeout(@accent-colour, 0.3) !important;
--yt-brand-light-red-alpha-30: fadeout(@accent-colour, 0.3) !important;
--yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important;
--yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important;
--yt-spec-base-background: @base !important;
--yt-spec-raised-background: @mantle !important;
--yt-spec-menu-background: @mantle !important;
--yt-spec-inverted-background: @text !important;
--yt-spec-additive-background: fadeout(@surface0, 0.1) !important;
--yt-spec-outline: @surface0 !important;
--yt-spec-shadow: fadeout(@crust, 0.25) !important;
--yt-spec-text-primary: @text !important;
--yt-spec-text-secondary: @subtext0 !important;
--yt-spec-text-disabled: @subtext1 !important;
--yt-spec-text-primary-inverse: @crust !important;
--yt-spec-call-to-action: @accent-colour !important;
--yt-spec-call-to-action-inverse: @accent-colour !important;
--yt-spec-suggested-action: @surface1 !important;
--yt-spec-suggested-action-inverse: @text !important;
--yt-spec-icon-active-other: @overlay0 !important;
--yt-spec-icon-inactive: @overlay1 !important;
--yt-spec-icon-disabled: @overlay2 !important;
--yt-spec-button-chip-background-hover: @surface1 !important;
--yt-spec-touch-response: @surface0 !important;
--yt-spec-touch-response-inverse: @accent-colour !important;
--yt-spec-brand-icon-active: @accent-colour !important;
--yt-spec-brand-icon-inactive: @overlay1 !important;
--yt-spec-brand-button-background: @accent-colour !important;
--yt-spec-brand-link-text: @sapphire !important;
--yt-spec-wordmark-text: @text !important;
--yt-spec-error-indicator: @red !important;
--yt-spec-themed-blue: @sky !important;
--yt-spec-themed-green: @green !important;
--yt-spec-ad-indicator: @teal !important;
--yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important;
--yt-spec-commerce-badge-background: @green !important;
--yt-spec-static-brand-red: @accent-colour !important;
--yt-spec-static-brand-white: @text !important;
--yt-spec-static-brand-black: @base !important;
--yt-spec-static-clear-color: fadeout(@crust, 0) !important;
--yt-spec-static-clear-black: fadeout(@crust, 0) !important;
--yt-spec-static-ad-yellow: @peach !important;
--yt-spec-static-grey: @subtext0 !important;
--yt-spec-static-overlay-background-solid: @crust !important;
--yt-spec-static-overlay-background-heavy: @surface0 !important;
--yt-spec-static-overlay-background-medium: fadeout(@crust, 0.6) !important;
--yt-spec-static-overlay-background-medium-light: fadeout(@crust, 0.3) !important;
--yt-spec-static-overlay-background-light: fadeout(@crust, 0.1) !important;
--yt-spec-static-overlay-text-primary: @text !important;
--yt-spec-static-overlay-text-secondary: fadeout(@subtext0, 0.7) !important;
--yt-spec-static-overlay-text-disabled: fadeout(@subtext0, 0.3) !important;
--yt-spec-static-overlay-call-to-action: @accent-colour !important;
--yt-spec-static-overlay-icon-active-other: @text !important;
--yt-spec-static-overlay-icon-inactive: @surface1 !important;
--yt-spec-static-overlay-icon-disabled: @surface2 !important;
--yt-spec-static-overlay-button-primary: @accent-colour !important;
--yt-spec-static-overlay-button-secondary: @surface0 !important;
--yt-spec-static-overlay-touch-response: @overlay1 !important;
--yt-spec-static-overlay-touch-response-inverse: @surface1 !important;
--yt-spec-static-overlay-background-brand: @accent-colour !important;
--yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important;
--yt-spec-assistive-feed-themed-gradient-2: @lavender !important;
--yt-spec-assistive-feed-themed-gradient-3: @red !important;
--yt-spec-brand-background-solid: @base !important;
--yt-spec-brand-background-primary: @surface0 !important;
--yt-spec-brand-background-secondary: @mantle !important;
--yt-spec-general-background-a: @base !important;
--yt-spec-general-backg...