Skip to content

YouTube Rainbow UI 🌈 by Blackbird

Screenshot of YouTube Rainbow UI 🌈
Write a review Install Get Stylus

Details

AuthorBlackbird

LicenseNo License

Categoryyoutube.com

Created

Updated

Size4.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Rainbow UI for YouTube to beautify the interface

Notes

🎨 Stylus Style for YouTube: Rainbow UI 🌈

Add a colorful touch to your YouTube experience with this Stylus style that transforms the user interface into a stunning rainbow! 🌈✨

📝 Notes

This Stylus style is designed for customization enthusiasts. It changes the colors of YouTube's main interface elements, giving them a vibrant and dynamic rainbow effect. Perfect for brightening up your YouTube sessions!

🌟 Features

  • Rainbow user interface with a smooth gradient effect.
  • Compatibility with both light and dark YouTube themes.
  • Optimized for the latest versions of YouTube.
  • Lightweight and seamless design for lag-free navigation.

📋 Requirements

🚀 Installation Instructions

  1. Install the Stylus extension if you haven’t already.
  2. Download or copy the style code from this link.
  3. Paste the code into a new style in Stylus.
  4. Apply the style to www.youtube.com.
  5. Enjoy your new colorful YouTube interface! 🎉

🔗 Useful Links

🛠️ Changelog

Version 1.0.0

  • Initial release with a rainbow effect.
  • Compatibility with both light and dark themes.

🎉 Enjoy your vibrant new YouTube Rainbow UI! 🌈

Source code

/* ==UserStyle==
@name       www.youtube.com
@version    20250109.19.59
@namespace  ?
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/") {
.badge-style-type-live-now-alternate.ytd-badge-supported-renderer {
   background: hsla(28, 90%, 56%, 1);

background: linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

background: -moz-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F48A2C", endColorstr="#E91778", GradientType=1 );
}

.ytmPaidContentOverlayLink{
    display:none;
}

.yt-spec-avatar-shape--cairo-refresh.yt-spec-avatar-shape--live-ring::after {
background: hsla(28, 90%, 56%, 1);

background: linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

background: -moz-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F48A2C", endColorstr="#E91778", GradientType=1 );
}

.yt-spec-avatar-shape--cairo-refresh .yt-spec-avatar-shape__live-badge {
background: hsla(28, 90%, 56%, 1);

background: linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

background: -moz-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F48A2C", endColorstr="#E91778", GradientType=1 );
}

.yt-spec-icon-badge-shape--type-notification-refresh .yt-spec-icon-badge-shape__badge {
  color: #fff !important;
  background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
}


#search-icon-legacy.ytd-searchbox:hover{
    transition: all 0.3s;
    background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
}

#voice-search-button.ytd-masthead:hover {
transition: all 0.3s;
    background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
}

ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-web] #progress.ytd-thumbnail-overlay-resume-playback-renderer {
  background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
}

ytd-thumbnail-overlay-resume-playback-renderer {
  background-color: #fff;
}

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
    color: #fff;
}

.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill {
  background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
}


.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover {
  background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
    color: #d3d3d3;
}

yt-icon.ytd-badge-supported-renderer {
  background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ytp-cairo-refresh-signature-moments .ytp-play-progress {
    background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
}

.badge-style-type-simple.ytd-badge-supported-renderer {
  background: -webkit-linear-gradient(70deg, hsla(28, 90%, 56%, 1) 0%, hsla(332, 83%, 50%, 1) 41%, hsla(195, 100%, 44%, 1) 100%);
  color: #fff;
}

.ytp-cairo-refresh .ytp-swatch-background-color {
  background-color: #06a2f9;
}
}

Reviews

No reviews yet.