Create Your Theme by choosing a couple colours
Invidious - Create Your Theme [Redesign] by tsyron
Mirrored from https://github.com/Tsyron/Create-Your-Theme/blob/main/Invidious/Invidious_Redesign.user.css
![Screenshot of Invidious - Create Your Theme [Redesign]](https://userstyles.world/preview/13599/1.jpeg)
Details
Authortsyron
LicenseAGPLv3
Categoryyewtu
Created
Updated
Size78 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 - Create Your Theme [Redesign]
@namespace github.com/Tsyron/Create-Your-Theme/tree/main/Invidious
@version 1.0.3
@description Create Your Theme by choosing a couple colours
@author Tsyron
@preprocessor stylus
@license AGPLv3
@var color color-background-light "Light Mode: Background" #fff
@var color color-foreground-light "--- Foreground" #0f0f0f
@var color color-accent-light "--- Accent" #f00
@var color color-links-light "--- Links" #065fd4
@var color color-blue-light "--- Blue" #065fd4
@var checkbox checkbox-subscribe-text-light "--- Subscribe Button Text Inverse" 0
@var color color-background-dark "Dark Mode: Background" #0f0f0f
@var color color-foreground-dark "--- Foreground" #f1f1f1
@var color color-accent-dark "--- Accent" #f00
@var color color-links-dark "--- Links" #3ea6ff
@var color color-blue-dark "--- Blue" #3ea6ff
@var checkbox checkbox-subscribe-text-dark "--- Subscribe Button Text Inverse" 0
==/UserStyle== */
@-moz-document url-prefix("https://iv."),
url-prefix("https://inv"),
url-prefix("https://invidio."),
url-prefix("https://invidious"),
url-prefix("https://vid."),
url-prefix("https://y.com."),
url-prefix("https://yt"),
url-prefix("https://tube."),
domain("yewtu.be"),
domain("watch.thekitty.zone"),
domain("onion.tube"),
domain("not-ytb.blocus.ch"),
domain("youtube.076.ne.jp"),
domain("youtube.owacon.moe"),
domain("sea1.iv.ggtyler.dev"),
domain("anontube.lvkaszus.pl"),
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("inv.vern.i2p"),
domain("pjsfhqamc7k6htnumrvn4cwqqdoggeepj7u5viyimgnxg3gar72q.b32.i2p"),
domain("pjsfi2szfkb4guqzmfmlyq4no46fayertjrwt4h2uughccrh2lvq.b32.i2p") {
/* Light Theme */
bg1l=color-background-light
bg2l=darken(bg1l, 1.5%) /* select focus, .watched buttons */
bg3l=darken(bg1l, 5%) /* Video player: hover controls */
bg5l=darken(bg1l, 2.5%) /* search filter box */
fg1l=color-foreground-light
fg2l=rgba(fg1l, 0.7) /* links hover */
fg3l=rgba(fg1l, 0.2) /* border colour */
fg4l=rgba(fg1l, 0.05) /* button background colour, redirect bg table */
fg5l=rgba(fg1l, 0.1) /* button background hover colour, selection */
fg6l=rgba(fg1l, 0.025) /* checkbox, radio */
fg7l=rgba(fg1l, 0.2) /* progress bar unloaded */
fg8l=rgba(fg1l, 0.8) /* time */
fg9l=rgba(fg1l, 0.75)
fg10l=darken(fg1l, 50%)
fg11l=rgba(fg10l, 0.75)
ca1l=color-accent-light
ca2l=rgba(ca1l, 0.8) /* hover */
ca3l=rgba(ca1l, 0.4) /* thumbnail overlay after watch */
ca4l=rgba(ca1l, 0.675)
cl1l=color-links-light
cl2l=rgba(cl1l, 0.8) /* hover */
cb1l=color-blue-light
cb2l=rgba(cb1l, 0.8) /* hover */
/* Dark Theme */
bg1d=color-background-dark
bg2d=lighten(bg1d, 2.5%) /* select focus, .watched buttons, search filter box */
bg3d=rgba(bg1d, 0.8) /* time */
bg4d=darken(bg1d, 50%)
bg6d=rgba(bg1d, 0.75)
bg7d=rgba(bg4d, 0.75)
fg1d=color-foreground-dark
fg2d=rgba(fg1d, 0.8) /* links hover */
fg3d=rgba(fg1d, 0.2) /* border colour */
fg4d=rgba(fg1d, 0.1) /* button background colour, redirect bg table */
fg5d=rgba(fg1d, 0.15) /* button background hover colour */
fg6d=rgba(fg1d, 0.035) /* checkbox, radio */
fg7d=rgba(fg1d, 0.25) /* selection */
ca1d=color-accent-dark
ca2d=rgba(ca1d, 0.9) /* hover */
ca3d=rgba(ca1d, 0.4) /* thumbnail overlay after watch */
ca4d=rgba(ca1d, 0.8)
cl1d=color-links-dark
cl2d=rgba(cl1d, 0.8) /* hover */
cb1d=color-blue-dark
cb2d=rgba(cb1d, 0.8) /* hover */
/* Border-Radius */
br1=6px
br2=12px
br3=18px
/* Light Theme */
@media (prefers-color-scheme: light) {
.no-theme {
/* Background, Foreground */
body,
.pure-g,
.pure-form legend {
background: bg1l;
color: fg1l; }
/* Links */
summary,
a.feed-menu-item.pure-menu-heading,
a:link:not(.pure-button):not(.channel-owner) {
color: fg2l; }
a,
a:active,
a:visited,
footer a {
color: fg2l !important; }
a.feed-menu-item.pure-menu-heading:hover,
a:link:not(.pure-button):not(.channel-owner):hover {
color: fg1l; }
summary:hover,
summary:focus,
a:hover,
footer a:hover {
color: fg1l !important; }
/* Links Outside of Invidious */
a[href^="https://www.youtube.com"],
a[href^="https://redirect.invidious.io"],
div.pure-u-md-22-24 p[style="white-space:pre-wrap"] a,
#descriptionWrapper a {
color: cl2l !important; }
a[href^="https://www.youtube.com"]:hover,
a[href^="https://redirect.invidious.io"]:hover,
div.pure-u-md-22-24 p[style="white-space:pre-wrap"] a:hover,
#descriptionWrapper a:hover {
color: cl1l !important; }
/* Input, select & textarea */
input,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="text"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
select,
textarea {
border: 1px solid fg3l;
-webkit-border: 1px solid fg3l;
background-color: fg4l;
color: fg1l; }
input:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="submit"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="range"]:focus,
select:focus,
textarea:focus {
border: 1px solid cb1l;
-webkit-border: 1px solid cb1l; }
select {
background-color: fg4l; }
select:focus {
background-color: bg2l; }
/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
background-color: fg6l; }
/* Checkbox & Radio: Color check */
input[type="checkbox"]:before,
input[type="checkbox"]:checked,
input[type="checkbox"]:checked:before,
input[type="radio"]:before,
input[type="radio"]:checked,
input[type="radio"]:checked:before {
background-color: fg4l !important; }
input[type="radio"]:checked:after {
background-color: fg1l !important; }
/* Range */
input[type="range"]::-webkit-slider-thumb {
background: fg4l;
box-shadow: -80px 0 0 75px fg4l;
border-right: 1px solid fg3l !important; }
input[disabled] {
background-color: fg6l; }
/* Button */
.pure-button-primary,
.pure-button-secondary,
.pure-button-primary:hover,
.pure-button-secondary:hover,
.pure-button-primary:focus,
.pure-button-secondary:focus {
border: 1px solid fg3l !important;
color: fg1l !important; }
.pure-button-primary:focus,
.pure-button-secondary:focus {
border: 1px solid cb1l !important; }
.pure-button-primary,
.pure-button-secondary {
background-color: fg4l !important; }
.pure-button-primary:hover,
.pure-button-secondary:hover,
.pure-button-primary:focus,
.pure-button-secondary:focus {
background-color: fg5l !important; }
/* Button: Subscribe */
#subscribe,
#subscribe:hover,
#subscribe:focus {
border: 1px solid fg3l !important;
color: bg1l !important; }
#subscribe:focus {
border: 1px solid cb1l !important; }
#subscribe {
background-color: ca2l !important; }
#subscribe:hover,
#subscribe:focus {
background-color: ca1l !important; }
if checkbox-subscribe-text-light {
#subscribe,
#subscribe:hover,
#subscribe:focus,
.video-js .vjs-big-play-button .vjs-icon-placeholder {
color: fg1l !important; } }
/* Invidious Logo */
.navbar .index-link,
#search-widget #logo .pure-menu-heading {
color: ca2l; }
.navbar {
...