Skip to content

YouTube Firefox by lesboy

Screenshot of YouTube Firefox
Write a review Install Get Stylus

Details

Authorlesboy

LicenseNo License

CategoryYouTube

Created

Updated

Size372 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Follows Firefox's default dark theme.

This is my personal theme, so a lot of things that I find annoying about YouTube have been hidden.

Notes

[ October 15 2022 ]

  • Updated the search result side menus that display information about media (games, movies, music).
  • Updated various end card properties to fit the theme better.
  • Updated background color for .googlevideo.com raw video output domains.
  • Made the media player progress color darker as to make it easier to see over brighter videos.

[ October 19 2022 ]

  • Updated "Previous" and "Next" hover elements colors.
  • Miscellaneous other tweaks I forgot lol.

[ October 25 2022 ]

  • Updated video tags to not display view count after recent change.

[ October 26 2022 ]

Halloween came early cause god that UI redesign is a bit messy lol.

  • In the process of updating all elements to be less obtrusive and fit the theme better.

[ October 27 2022 ]

  • Updated skeleton.

[ November 16 2022 ]

  • Minor visual tweaks.

[ November 30 2022 ]

  • Updated arrows.
  • Minor visual tweaks.

[ January 01 2023 ]

  • Minor visual tweaks.

[ January 30 2023 ]

  • Updated Trending Pages BG and Icons
  • Media Player tweaks

[ February 03 2023 ]

  • Updated comments to look and fit nicer
  • Hide Search Results side-bar for (probably) eventual rework

[ February 13 2023 ]

  • Rework to the media side panel that appears when you're watching videos from a playlist (bottom right thing, y'know.)
  • Rework to Playlists to be (mostly) back to pre-redesign. Last version made smaller window views way too stretched, so reverted while I kinda. Scratched my head and worked on other stuff lol
  • Adjusted video panel options to all be of comparable sizes, as to minimize the amount of mis-clicks based on improper alignment.
  • Adjusted comment section sizing and such, as to fit in better with the interface. Weirdly larger text made to look more in place, that kinda deal.
  • Re-added a separator between the main tabs and subscriptions tabs
  • Miscellaneous icon size adjustments, such as with search bar icons for a cleaner look.

Re: If anyone knows how to show more Subscriptions by default, hmu. Lot's of unused space.

  • Miscellaneous spacing adjustments, such as with menus and the like
  • Miscellaneous color adjustments, added borders, etc for consistency

[ March 2 2023 ]

  • Lotta reworks to a buncha pages. Main are User Page(s), End Cards, and Shelfs (think playlists and transcriptions)
  • Too many to list rn, may update later more thuroughly lol
  • NOTE: Some pages may look broken, I think YouTube is rolling out page sizing adjustments.

[ March 3 2023 ]

  • Adjusted the User Page to not be absolutely huge and crammed with info!

[ Aug 7 2023 ]

  • Misc tweaks and fixes

[ Sep 23 2023 ]

  • Misc tweaks and fixes. Mostly updating when needed/broken tbh.
  • Added support for 'mrfdev.com' since YouTube directs to it for Keyboard Shortcuts.

[ Oct 18 2023 ]

  • Tried my best to revert the channel changes w/ banners and such, while keeping what works.
    (thank GOD you can selectively hide tabs like "Store" omfg)
  • Misc tweaks to adjust text sizes and such.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           YouTube Firefox
@namespace      github.com/openstyles/stylus
@version        6.9
@description    Edited to look more in line with Firefox's default dark mode. Based off of my own heavily edited personal theme, which this replaced lol. Feel free to use and edit and everything idc
@author         noelle @transbimbozone
==/UserStyle== */

@-moz-document domain("youtube.com"), url-prefix("https://www.youtube.com/embed"), url-prefix("https://www.youtube-nocookie.com/embed") { 
    
:root {
    --light-purple: #2b2a33;
    --mid-purple: #1c1b22;
    --dark-purple: #131218;
    --discover: #232229;
    --black: #0c0c0d;
    --white: #fff;
    --text-1: #ebe9fb;
    --text-2: #e2e0f3bf;
    --text-3: #e2e0f366;
    --text-4: #c0becd;
    --text-5: #b0afbf;
    --text-5-hover: #85849a;
    --accent: #9f99d5;
    --accent-hover: #8b83d5;
    --accent-scroll: #9f99d570;
    --accent-highlight: #9f99d563;
    --outline-1: #383641;
    --outline-2: #9a99a7;
    --selection-1: #9f99d55c;
    --hover-1: #6d6b7e30;
    --hover-2: #3836424a;
    --hover-3: #373641;
    --hover-4: #b5a4e41a;
    --hover-5: #373641d6;
    --hover-6: #6d6b7e29;
    --hover-7: #201f28a3;
    --overlay-2: #1c1b2296;
    --overlay-4: #1c1b22ed;
    --overlay-5: #1c1b22e0;
    --overlay-7: #1c1b22e3;
    --overlay-9: #08080bc4;
    --border: #e2e0f330;
    --banner: #2b2a3369;
    --banner-hover: #dbd7ff1c;
    --video-settings: #2b2a33e6;
    --visited: #b5b1d9;
    --live-badge: #66637abf;
    --end-card: #131218de;
    --skeleton-1: #78768b61;
    --skeleton-2: #494755;
    --skeleton-3: #78768b38;
    --search-hover: #37364175;
    --offline: #2b2a339c;
    --trans: #fff0;
    --yt-spec-text-secondary: #e2e0f3bf !important;
    --yt-spec-static-brand-red: #9f99d5 !important;
    --yt-spec-static-brand-white: #ebe9fb !important;
    --yt-spec-text-disabled: #e2e0f36b !important;
    --yt-spec-icon-disabled: #e2e0f36b !important;
    
    scrollbar-width: thin !important;
    }
    
html:not(.style-scope)[dark], :not(.style-scope)[dark] {
    --ytd-searchbox-text-color: var(--text-1);
    --yt-spec-text-disabled: var(--text-3);
    --yt-spec-call-to-action: var(--accent);
    --yt-spec-touch-response: var(--trans); /* gets rid of video entry overlays */
    --yt-spec-text-primary: var(--text-1); 
    --yt-spec-10-percent-layer: var(--light-purple);
    --yt-spec-icon-inactive: var(--text-1) !important;
    --yt-live-chat-primary-text-color: var(--text-1);
    --yt-live-chat-secondary-text-color: var(--text-2);
    --yt-spec-brand-icon-inactive: var(--text-1);
    --yt-spec-static-overlay-call-to-action: var(--accent);
    --yt-spec-icon-active-other: var(--text-1);
    --yt-spec-general-background-b: var(--discover);
    --yt-live-chat-deleted-message-color: var(--text-3);
    --yt-emoji-picker-category-background-color: var(--light-purple);
    --yt-emoji-picker-category-color: var(--text-2);
    --yt-spec-brand-button-background: var(--accent);
    --yt-spec-brand-background-primary: var(--light-purple);
    --yt-spec-brand-background-solid: var(--discover);
    --yt-spec-call-to-action-inverse: var(--accent);
    --yt-spec-snackbar-background-updated: var(--discover);
    --yt-spec-themed-blue: var(--accent);
    --yt-spec-general-background-a: var(--mid-purple);
    --yt-spec-brand-link-text: var(--accent) !important;
    --yt-spec-static-overlay-background-brand: var(--accent);
    --ytd-searchbox-legacy-border-color: var(--mid-purple);
    --yt-spec-badge-chip-background: var(--light-purple);
    --yt-spec-button-chip-background-hover: var(--hover-3);
    --ytd-author-comment-badge-name-color: var(--text-1) !important;
    --yt-live-chat-moderator-color: var(--accent);
    --yt-live-chat-overlay-color: var(--overlay-5);
    --yt-spec-static-brand-black: var(--mid-purple);
    --yt-live-chat-paid-message-header-background-color: #fff !important;
    --yt-live-chat-paid-message-header-color: var(--text-1) !important;
    --yt-live-chat-paid-message-secondary-color: var(--text-1) !important;
    --yt-deprecated-white-opacity-lighten-1: var(--text-1);
    --yt-spec-suggested-action: #9f99d52b;
    --yt-spec-static-overlay-text-secondary: var(--text-2);
    --yt-spec-static-overlay-text-primary: var(--text-1);
    --yt-spec-touch-response-inverse: var(--dark-purple);
    --yt-spec-text-primary-inverse: var(--dark-purple);
    --yt-spec-commerce-filled-hover: var(--accent-hover);
    --yt-spec-raised-background: var(--discover);
    --yt-deprecated-white-opacity-lighten-2: var(--text-2);
    --yt-live-chat-sponsor-color: #988dff;
    --yt-spec-mono-filled-hover: #85849a;
    --yt-spec-brand-icon-active: var(--text-1);
    --yt-spec-wordmark-text: var(--text-1);
    
    scrollbar-color: #8d8da3 #2b2a33;
    scrollbar-width: thin !important;

    }
    
html[dark], [dark], html {
    --yt-spec-base-background: var(--mid-purple);
    --yt-spec-static-overlay-touch-response: var(--text-3);
    --yt-spec-static-overlay-filled-hover: var(--text-5); 
    --yt-spec-static-overlay-tonal-hover: var(--hover-3);
    --yt-spec-mono-tonal-hover: var(--hover-3);
    --yt-spec-commerce-tonal-hover: var(--hover-3);
    
    scrollbar-width: thin !important;
    
    }
    
html[system-icons][dark], html[system-icons] [dark] {
    --yt-spec-icon-inactive: var(--text-1);
    --yt-spec-icon-disabled: var(--text-3);
    --yt-spec-brand-icon-inactive: var(--text-1); 
    
    scrollbar-width: thin !important;
    
    }
    
::selection { 
    color: var(--text-1);
 /* background: #8781c4 !important; */
    background: #7f74e7 !important; }
    
/* Main Background */
    
ytd-app {
    --app-drawer-content-container-background-color: var(--dark-purple) !important;
    color: var(--dark-purple) !important; 
    background: var(--mid-purple);
    scrollbar-color: #8d8da3 #2b2a3300; }
    
/*
#content.ytd-rich-item-renderer:active, #content.ytd-rich-item-renderer:focus {
    background-color: #2c2a34 !important;
    box-shadow: 0px -5px 0px 0px #2c2a34, -5px -5px 0px 0px #2c2a34, 5px -5px 0px 0px #2c2a34, -5px 5px 0px 0px #2c2a34, 5px 5px 0px 0px #2c2a34;
    border-radius: 6px; }
*/ 
    
/* Line Thickening */
    
#filter-menu.ytd-search-sub-menu-renderer, #filter-group-name.ytd-search-filter-group-renderer, ytd-video-primary-info-renderer, ytd-video-secondary-info-renderer, #description-container.ytd-channel-about-metadata-renderer, #links-container.ytd-channel-about-metadata-renderer, #right-column.ytd-channel-about-metadata-renderer>yt-formatted-string.ytd-channel-about-metadata-renderer, #details-container.ytd-channel-about-metadata-renderer, #items.ytd-playlist-sidebar-renderer>*.ytd-playlist-sidebar-renderer:not(:last-child), #title.ytd-sub-feed-selector-renderer, ytd-sub-feed-option-renderer.ytd-sub-feed-selector-renderer, ytd-merch-shelf-renderer, yt-community-post-section-renderer, ytd-report-history-table-row-renderer, #table-header.ytd-table-renderer {
    border-bottom: 2px solid var(--yt-spec-10-percent-layer); }
    
ytd-section-list-renderer:not([hide-bottom-separator]):not([page-subtype=history]):not([page-subtype=memberships-and-purchases]):not([page-subtype=ypc-offers]) #contents.ytd-section-list-renderer>*.ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer):not([item-dismissed]).ytd-section-list-renderer:not([has-destination-shelf-renderer]).ytd-section-list-renderer:not(ytd-minor-moment-header-renderer),
ytd-search-sub-menu-renderer[show-bottom-border] #filter-menu.ytd-search-sub-menu-renderer {
    border-bottom: 2px solid var(--yt-spec-10-percent-layer); }
    
ytd-metadata-row-renderer[has-divider-line], ytd-ticket-shelf-renderer, ytd-reel-shelf-renderer.ytd-item-section-renderer {
    border-bottom: 2px solid var(--yt-spec-10-percent-layer); }
    
#buttons.ytd-form-popup-renderer, #action-buttons.yt-sharing-embed-renderer, ytd-reel-shelf-renderer.ytd-item-section-renderer, #unified-report-history.ytd-report-history-section-renderer {
    border-top: 2px solid var(--yt-spec-10-percent-layer); }
    
ytd-shelf-renderer.ytd-item-section-renderer {
    border-top: 2px solid var(--yt-spec-10-percent-layer);
    border-bottom: 2px solid var(--yt-spec-10-percent-layer); }
    
#separator.ytd-ticket-shelf-renderer {
    border-right: 2px solid var(--yt-spec-10-percent-layer); }
    
tp-yt-paper-tab:not(.iron-selected) > .tab-content.tp-yt-paper-tab {
    color: var(--text-2);
    opacity: 1; }
    
ytd-structured-description-content-renderer[inline-structured-description] ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer {
    border-top: 2px solid var(--light-purple); }
    
ytd-video-description-music-section-renderer {
    border-top: 2px solid var(--light-purple); }
    
ytd-report-channel-modal-header-renderer {
    border-top-color: var(--trans);
    border-bottom-color: var(--border); }
    
#masthead-container.ytd-app {
    border-bottom: 1px solid var(--black); }
    
ytd-mini-guide-renderer.ytd-app {
    border-top: 1px solid var(--black);
    border-right: 1px solid var(--black); }
    
#guide-content.ytd-app {
    border-right: 1px solid var(--black); }
    
#sections.ytd-guide-renderer>*.ytd-guide-renderer:first-child {
    margin-top: 10px !important; }
    
#dismissed.ytd-grid-video-renderer {
    border: 1px solid var(--border); 
    border-radius: 8px; }
    
html:not(.style-scope)[dark], :not(.style-scope)[dark] {
    background-color: var(--mid-purple) !important; }
    
    
/* Home Page Loading Skeleton */
    
#home-page-skeleton #home-container-media {
    margin-top: 24px; }
    
.masthead-skeleton-icon:nth-child(2) {
    margin-right: 15px !important; }
    
.masthead-skeleton-icon:nth-child(3) {
    margin-right: 20px ...

Reviews

No reviews yet.