YouTube Frontend Invidious Full Dark Theme (Even when you're in Light mode)
Invidious - Dark Theme [Redesign] by tsyron
![Screenshot of Invidious - Dark Theme [Redesign]](https://userstyles.world/preview/8147/4.jpeg)
Details
Authortsyron
LicenseGPLv3
CategoryInvidious
Created
Updated
Size26 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Invidious - Dark Theme
@namespace https://github.com/Tsyron/Invidious-Theme
@version 1.1.0
@license GPLv3
@description Invidious Website In Dark Theme/Style
@author Tsyron
@preprocessor stylus
@var select select-color "Colours" ["Colourful", "Light"]
@var range range-corners "Corner Radius" [18, 0, 35, "px"]
@var range range-searchbox "Searchbox Corner Radius" [18, 0, 18, "px"]
@var checkbox checkbox-borders "Borders" 0
@var select select-font "Font" ["YouTube", "Default", "Monospace"]
@var range range-font "Font Size" [11, 8, 16, "pt"]
@var range range-screen-width "Screen Width" [95, 48, 170, "em"]
@var checkbox checkbox-shadow "Shadow" 1
@var checkbox checkbox-theatre "Theatre Mode at Screen Width (experimental)" 0
==/UserStyle== */
@-moz-document url-prefix("https://invidious."),
url-prefix("https://inv."),
url-prefix("https://invidio."),
url-prefix("https://invidious-"),
url-prefix("https://iv."),
url-prefix("https://vid."),
url-prefix("https://y.com."),
url-prefix("https://yt"),
url-prefix("https://tube."),
domain("watch.thekitty.zone"),
domain("onion.tube"),
domain("not-ytb.blocus.ch"),
domain("yewtu.be"),
domain("youtube.076.ne.jp"),
domain("youtube.owacon.moe"),
domain("sea1.iv.ggtyler.dev"),
domain("am74vkcrjp2d5v36lcdqgsj2m6x36tbrkhsruoegwfcizzabnfgf5zyd.onion"),
domain("c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion"),
domain("euxxcnhsynwmfidvhjf6uzptsmh4dipkmgdmcmxxuo7tunp3ad2jrwyd.onion"),
domain("grwp24hodrefzvjjuccrkw3mjq4tzhaaq32amf33dzpmuxe7ilepcmad.onion"),
domain("kbjggqkzv65ivcqj6bumvp337z6264huv5kpkwuv6gu5yjiskvan7fad.onion"),
domain("ng27owmagn5amdm7l5s3rsqxwscl5ynppnis5dqcasogkyxcfqn7psid.onion"),
domain("osbivz6guyeahrwp2lnwyjk2xos342h4ocsxyqrlaopqjuhwn2djiiyd.onion"),
domain("u2cvlit75owumwpy4dj2hsmvkq7nvrclkpht7xgyye2pyoxhpmclkrad.onion"),
domain("w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion"),
domain("invbp.pjsfkvpxlinjamtawaksbnnaqs2fc2mtvmozrzckxh7f3kis6yea25ad.onion"),
domain("invidiousge2cq2qegp4vdzsfu6mvpqdf6dtcyzmqbv7yx2spvkkajad.onion"),
domain("inv.vern.i2p"),
domain("pjsfhqamc7k6htnumrvn4cwqqdoggeepj7u5viyimgnxg3gar72q.b32.i2p"),
domain("pjsfi2szfkb4guqzmfmlyq4no46fayertjrwt4h2uughccrh2lvq.b32.i2p") {
/* Darker Tints */
bg-1=#232323
bg-2=lighten(bg-1, 10%)
bg-2-disabled=rgba(bg-2, 0.5)
bg-3=lighten(bg-1, 25%)
bg-4=lighten(bg-1, 40%)
/* Lighter Tints */
fg-1=#fff
fg-2=darken(fg-1, 10%)
fg-3=darken(fg-1, 20%)
fg-4=darken(fg-1, 30%)
/* Linked */
link=fg-3
link-h=fg-4
red-1=#ff4343
red-1-h=rgba(red-1, 0.9)
red-1-watched=rgba(red-1, 0.4)
red-2=#ff6969
red-2-h=rgba(red-2, 0.9)
red-3=#ff9898
red-3-h=rgba(red-3, 0.9)
light-1=fg-3
light-1-h=fg-4
light-1-watched=rgba(light-1, 0.4)
light-2=fg-3
light-2-h=fg-4
light-3=fg-3
light-3-h=fg-4
/* Shadow */
shadow=rgba(0, 0, 0, 0.3)
:root {
/* Colours */
if select-color=="Colourful" {
--Color1: red-1;
--Color1Hover: red-1-h;
--Color1Watched: red-1-watched;
--Color2: red-2;
--Color2Hover: red-2-h;
--Color3: red-3;
--Color3Hover: red-3-h; }
if select-color=="Light" {
--Color1: light-1;
--Color1Hover: light-1-h;
--Color1Watched: light-1-watched;
--Color2: light-2;
--Color2Hover: light-2-h;
--Color3: light-3;
--Color3Hover: light-3-h; }
if select-font=="YouTube" {
--Font: Roboto, Arial, sans-serif !important; }
if select-font=="Default" {
--Font: inherit; }
if select-font=="Monospace" {
--Font: monospace; } }
.dark-theme,
.no-theme,
.light-theme {
/* Main Theme : The Dark Theme */
body,
.pure-g,
.pure-form legend {
background: bg-1;
color: fg-1; }
/* Clickable Links */
a:not(.navbar .index-link),
a:active:not(.navbar .index-link),
a:visited:not(.navbar .index-link),
summary,
a:not([data-id]) > .icon,
a:link:not(.pure-button):not(.channel-owner) {
color: link; }
footer a {
color: link !important; }
a:hover,
footer a:hover,
summary:hover,
a:not([data-id]) > .icon:hover {
color: link-h !important; }
/* Multiple option Select Box */
.pure-form {
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
box-shadow: transparent 0px 1px 3px inset;
border: transparent;
border-radius: range-corners;
background-color: bg-2;
color: fg-1; } }
/* General Button */
.pure-button-primary,
.pure-button-secondary,
.pure-button-primary:focus,
.pure-button-secondary:focus {
border: transparent;
background-color: bg-2 !important;
color: fg-1 !important; }
.pure-button-primary:hover,
.pure-button-secondary:hover {
background-color: bg-3 !important;
color: fg-1 !important; }
/* Checkbox & Radio: Background color */
input[type="checkbox"],
input[type="checkbox"]:before,
input[type="checkbox"]:checked:before,
input[type='radio'],
input[type='radio']:before,
input[type='radio']:checked:before {
color: fg-1; }
input[disabled] {
background-color: bg-2-disabled; }
/* Checkbox & Radio: Color check */
input[type="checkbox"]:checked,
input[type='radio']:checked {
background-color: bg-3 !important; }
/* Range slider: Background */
input[type='range'] {
background-color: bg-2; }
/* Home Screen: Clickable links colors */
p,
p.video-data:hover {
color: fg-1; }
/* Home Screen: Donate/Popular/Trending */
a.feed-menu-item.pure-menu-heading {
color: link; }
/* Home Screen: Only Highlights YouTube Video's */
a[href^="/watch?v="] p:not(.length):hover {
color: fg-2; }
/* Home Screen: Watched */
.watched {
background-color: bg-2;
color: fg-1; }
/* Home Screen: Length Time*/
.length,
p.length {
color: fg-1;
background-color: bg-2; }
p.channel-name {
color: link; }
p.channel-name:hover {
color: link-h; }
/* Search: Filters */
#filters-box {
background: bg-1 !important; }
/* Searchbox: background color */
.pure-form input[type="search"] {
border: transparent;
background-color: bg-2;
color: fg-1; }
/* Video Player */
.video-js {
/* Video player: play button: color */
.vjs-big-play-button .vjs-icon-placeholder {
color: fg-1; }
/* Video player: Controls: Color */
.vjs-control-bar,
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: bg-1;
color: fg-1; }
/* Button Hover */
button:hover {
color: fg-1; }
/* Video player: Controls: Hovering Over Selected Option colors */
.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover {
background-color: var(--Color1Hover);
color: fg-1; }
/* Video player: Controls: The Selected option colors */
.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover {
background-color: var(--Color1);
color: fg-1; }
/* Video player: Share Links */
.vjs-share__short-link,
.vjs-share__btn,
.vjs-share__short-link-wrapper {
font-family: sans-serif;
background-color: bg-2;
color: fg-1; }
.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button,
.vjs-share__subtitle,
.vjs-share__title {
font-family: sans-serif;
color: fg-1; }
.vjs-videojs-share_open .vjs-modal-dialog .vjs-modal-dialog-content,
.vjs-modal-dialog {
background: bg-1; }
.vjs-modal-dialog .vjs-modal-dialog-content,
.vjs-modal-dialog,
.vjs-modal-dialog-content {
background: bg-1 !important; }
/* Video player: Settings */
.vjs-text-track-settings legend {
color: fg-1; }
/* Video Player: Text */
.vjs-icon-placeholder,
.vjs-icon-share {
color: fg-1; }
/* Video Player: Sliders */
.vjs-play-progress,
.vjs-volume-level {
color: fg-1; }
/* Video Player: Tooltip */
.vjs-time-tooltip {
font-family: sans-serif;
border-radius: range-corners;
top: -3.8em;
background-color: bg-...