Two colors and a background image.
→ Good performance.
Choose a default theme (Nyan Cat,Genshin[Zhongli,Keqing,Eula..],Xenoblade,ROG)
Or create your own!
Customisable Youtube Theme V3 by mixcraftio
Details
Authormixcraftio
LicenseNo License
Categoryyoutube
Created
Updated
Size10 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
(😉 Check my other youtube music theme!)
✅The new simple Youtube theme.
Two color options and a background image.
✨Now with default themes and better code using directly the variables of the youtube page and the LESS preprocessor.
👨🏫You just have to choose whether you want one of the default themes (Nyan Cat, Genshin Characters, Keqing, Eula, Xenoblade Chronicles 3) or create your own by choosing two colors and a background image.
⚠️Particular instructions⚠️:
DO NOT forget to put single quotes around your URL if you use a custom image.
3.x
⚠️ The blur option is still broken on secondary pages (As it displaces elements the feature is limited to some elements in order to not break anything) and causes flickers to appear.
3.1
- Various ui fixes
- Proper version bump
- Update theme links
3.0
- Added option to use ligther color for YT's logo
- Disable blur option by default because it causes flickers with hardware acceleration
- ✨ 6 new default themes 🥳!
- Genshin characters (x2)
- Xenoblade theme (x2) [1 animated]
- ROG Translucid
- Mixcraftio theme! (not narcissistic)
- Added theming to some missing elements
2.x
2.8
- YT live chat colors fix
2.7
- YT shorts view up arrow placement fix
2.6
- Added the "Cinematic lighting" functionality, which can be disabled through the YouTube's player settings (Works best with dark backgrounds)
- Reformatted patch notes
2.5
- Added option to use default background images when creating custom theme (To choose between them cycle through "Default themes" when having the "Use default themes" disabled and "Use default backgrounds" enabled)
- ✨ Added Oled(animated) default style
2.4
- Various bug fixes for stability 😎
- ✨ Added Eula default style
- Modified Keqing colors (OLD colors available in code)
2.3
- Added option to disable Blur as it breaks some pages
- Changed yt icons to match any color (better readability)
2.2
- Added Default Styles list in desc
- YT new UI fix
2.1
- ✨ Added Xenoblade Chronicles 3 default style
- Delegation of the image storage to Imgur
2.0
- First version upload
- Migration to userstyles.world
- The V1 is available at userstyles.org and won't be updated in the future
- ✨ Added Keqing default style
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Customisable Youtube Theme V3
@namespace github.com/Mixcraftio
@version 3.1
@description A simple customizable YouTube style
@author Mixcraftio
@preprocessor less
@var select separator0 "----Global----" {" ":""}
@var checkbox coloriseYT "Personalised color for YT logo" 0
@var checkbox useBlur "Use Blurry Background (Experimental)" 0
@var number blur "Blur amount (background)" [5, 0, 50, 1, 'px']
@var number pbo "Miniplayer progress bar opacity" [0.5, 0, 1, 0.05]
@var select separator1 "" {" ":""}
@var select separator2 "----Themes----" {" ":""}
@var checkbox useDefaultThemes "Use default themes" 1
@var select theme "Default Theme" ["nyan:Nyan Cat", "oled:Oled Gif (animated)", "genshin:Genshin Characters", "genshin2:Genshin Characters 2", "genshin3:Genshin Characters 3", "zhongli:Zhongli", "keqing:Keqing", "eula:Eula", "xenoblade:Xenoblade Chronicles Series (animated)", "xenoblade3:Xenoblade Chronicles 3", "xenobladegirls:Xenoblade Chronicles Girls", "rogtranslucid:ROG Translucid", "mixcraftio:Mixcraftio"]
@var select separator3 "----Custom----" {" ":""}
@var checkbox useDefaultBackgrounds "Use default backgrounds" 0
@var text bgImage "Background Image URL" "'https://example.com/path/image.jpg'"
@var color color-dark "Dark color" #212121
@var color color-light "Bright color" #303030
==/UserStyle== */
@-moz-document domain("www.youtube.com") {
/*Stylus variables*/
:root{
--blur: @blur;
& when (@useDefaultThemes = 1) or (@useDefaultBackgrounds = 1){
& when (@theme = nyan){
--color-dark: #001132;
--color-light: #0A1B3C;
--bg-url: url("https://i.imgur.com/aCidU9q.jpg");
}
& when (@theme = oled){
--color-dark: #000;
--color-light: #0c0c0c;
--bg-url: url("https://imgur.com/AfZCqiR.gif");
}
& when (@theme = genshin){
--color-dark: #1e598c;
--color-light: #2a7abf;
--bg-url: url("https://i.imgur.com/hZtLxWi.jpg");
}
& when (@theme = genshin2){
--color-dark: #f6dacc75;
--color-light: #1b72a675;
--bg-url: url("https://i.imgur.com/hEfYsd9.jpg");
}
& when (@theme = genshin3){
--color-dark: #30426a75;
--color-light: #ab8e8f80;
--bg-url: url("https://i.imgur.com/wulHyyI.jpg");
}
& when (@theme = zhongli){
--color-dark: #8c5715;
--color-light: #b26e1a;
--bg-url: url("https://i.imgur.com/YqtyWtj.jpg");
}
& when (@theme = keqing){
--color-dark: #0c0c18; //OLD: #7e7dcb
--color-light: #323264; //OLD: #b6abe3
--bg-url: url("https://i.imgur.com/j15HrO4.jpg");
}
& when (@theme = eula){
--color-dark: #0b0b18;
--color-light: #2e2e64;
--bg-url: url("https://i.imgur.com/3hVFlqy.jpg");
}
& when (@theme = xenoblade){
--color-dark: #062c6175;
--color-light: #a3a3a375;
--bg-url: url("https://mixcraftio.mywire.org/static/img/Xenoblade.avif");
}
& when (@theme = xenoblade3){
--color-dark: #134469;
--color-light: #195c8f; //OLD: #7a7a7a
--bg-url: url("https://i.imgur.com/I9gMJUX.jpg");
}
& when (@theme = xenobladegirls){
--color-dark: #0000;
--color-light: #0005;
--bg-url: url("https://i.imgur.com/B9qdsjv.jpg");
}
& when (@theme = rogtranslucid){
--color-dark: #0005;
--color-light: #000c;
--bg-url: url("https://dlcdnrog.asus.com/rog/media/1680805635602.webp");
}
& when (@theme = mixcraftio){
--color-dark: #31471d;
--color-light: #4f732e;
--bg-url: url("https://mixcraftio.mywire.org/static/img/MainCard.png");
}
}
& when (@useDefaultThemes = 0){
--color-dark: @color-dark;
--color-light: @color-light;
& when (@useDefaultBackgrounds = 0){
--bg-url: url(@bgImage);
}
}
& when (@coloriseYT = 1){
[d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"]{
fill: var(--color-light);
}
}
}
html{
&, &[dark], &[darker-dark-theme], &[darker-dark-theme][dark], [dark]{
/*Youtube vars:*/
/*Searchbar*/
--ytd-searchbox-background: var(--color-light) !important;
--ytd-searchbox-legacy-border-color: var(--yt-spec-10-percent-layer);
--ytd-searchbox-legacy-button-border-color: var(--yt-spec-10-percent-layer);
--ytd-searchbox-legacy-button-hover-border-color: var(--yt-spec-10-percent-layer);
/*Theme*/
--yt-spec-menu-background: var(--color-light) !important;
--yt-spec-brand-background-solid: var(--color-dark) !important;
--yt-spec-brand-background-primary: var(--color-dark) !important;
--yt-spec-general-background-a: var(--color-light) !important;
--yt-spec-general-background-b: var(--color-dark) !important;
--yt-spec-general-background-c: var(--color-light) !important;
--yt-spec-base-background: var(--color-dark) !important;
--yt-spec-raised-background: var(--color-light) !important;
.tp-yt-paper-tooltip{background-color: var(--color-light) !important;}
/*Live Chat*/
--yt-live-chat-header-background-color: var(--color-dark) !important;
--yt-live-chat-action-panel-background-color: var(--color-dark) !important;
--yt-live-chat-background-color: var(--color-light) !important;
yt-live-chat-app ::-webkit-scrollbar-track, yt-live-chat-kevlar-container ::-webkit-scrollbar-track{background:var(--color-dark) !important;}
--yt-live-chat-banner-gradient-scrim: linear-gradient( var(--color-dark), transparent );
--yt-live-chat-vem-background-color: var(--color-dark) !important;
}
/*Background Image*/
&:after{
content: '';
width: 100%;
height: 100%;
position: fixed;
background: var(--bg-url) no-repeat var(--color-light);
background-size: cover;
will-change: transform;
z-index: -1;
}
}
ytd-app{
background: rgba(0,0,0,0.5) !important;
}
[page-subtype="home"] #contents.ytd-rich-grid-renderer{
margin: 0;
padding-top: 24px;
}
[page-subtype="home"] #header.ytd-rich-grid-renderer{
width: 100%;
& #chips-wrapper{padding-left:20px;}
}
/*Blur*/
html when (@useBlur = 1){
ytd-watch-flexy, ytd-shorts, ytd-search, #contents:not([page-subtype="history"] #contents, [page-subtype="WEB_PAGE_TYPE_SETTINGS"] #contents, [page-subtype="memberships-and-purchases"] #contents){
backdrop-filter: blur(var(--blur));
}
}
/*Youtube Icons*/
yt-icon, .guide-icon.ytd-guide-entry-renderer{
color: rgba(255,255,255,0.75) !important;
}
/*Search Suggestions*/
.sbsb_a, .sbfl_b{
background: var(--color-light);
}
.sbsb_d{
background: var(--color-dark);
}
.sbdd_b{
border: 2px solid var(--color-dark);
}
[dark] .gsfs{
color: white;
}
/*Watchpage Sliding Tags*/
yt-related-chip-cloud-renderer.ytd-watch-next-secondary-results-renderer{
border: 1px solid var(--yt-spec-10-percent-layer);
background: var(--color-light);
border-radius: 4px;
#scroll-container{
height: 48px;
margin: auto 10px;
}
}
yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected]{
background-color: var(--color-dark) !important;
}
yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected]{
background-color: var(--color-light) !important;
}
/*Scrollbar (for subwindows ex:chapters)*/
::-webkit-scrollbar-thumb{
border-radius: 8px !important;
border: 4px solid transparent !important;
background-clip: content-box !important;
background-color: var(--yt-spec-text-secondary) !important;
}
/*Miniplayer Progress Bar*/
ytd-miniplayer .ytp-progress-bar{
opacity: @pbo;
&:hover{
opacity: 1;
}
}
/*Skeleton (page-load)*/
#masthead.shell, #guide-skeleton, #home-chips, .skeleton-bg-color{
background: var(--color-dark) !important;
}
#home-container-skeleton, .masthead-skeleton-icon{
background: var(--color-light) !important;
}
/*Player "Cinematic lighting"*/
#cinematics canvas{
-webkit-mask-image: -webkit-radial-gradient(black 50%, transparent 60%);
mask-image: radial-gradient(black 50%, transparent 60%);
}
}
@-moz-document regexp(".*youtube.com/shorts.*") {
ytd-miniplayer{
display: none !important;
}
#navigation-button-up....