YouTube: Styled by misspent

General Questions

🎨 Q: What does this theme do

A: This theme goes above and beyond in its customization options for YouTube. Once applied, it transforms the entire layout of the site, including the sidebar, home page, subscriptions, comments section, and even playlist display. With a highly configurable layout (variables), users can tailor their YouTube experience to their own unique preferences.

🚧 Q: Why doesn't it look like your screenshots

A: You're on an updated/outdated version of YouTube and or your browser (user-agent?) isn't the same as mine, enable Dark Mode in appearance settings too.

💻 Q: Which browsers support Stylus?

A: Stylus is compatible with Google Chrome & Mozilla Firefox.

Usage Questions

🔎 Q: How do I install a theme for Stylus from userstyles.world?

A: Click the "Install" button below the main image at the top of the page, and follow the prompts to add the style to Stylus.

🖌️ Q: Can I modify existing Stylus themes to better suit my preferences?

A: Yes, you can modify existing styles by editing the CSS code directly within Stylus or using a separate text editor. However, updating the theme will more than likely remove what you changed. Make sure you back up or save the parts you edited for future updates if possible.

Troubleshooting Questions

🚫 Q: Why isn't my Stylus theme working on a particular website?

A: Some websites may have built-in style sheets or scripts that can conflict with custom styles applied by Stylus. Try disabling other extensions or modifying the custom style to better match the site's existing design.

❓ Q: How do I modify or remove a Stylus theme that I installed from userstyles.world?

A: To modify or delete a custom style in Stylus, click on the extension icon in your browser toolbar, select "Manage," and locate the style in question under the "Installed styles" tab.

🛡️ Q: Why are certain elements of the YouTube site appearing differently with the theme applied?

A: Custom styles can sometimes conflict with existing site layouts or scripts, which can cause unexpected behavior or visual anomalies. Try modifying the custom style or disabling conflicting extensions to resolve the issue.

📱 Q: Why does my Stylus theme look different on mobile devices?

A: Mobile browsers may use different rendering engines or have different screen resolutions than desktop browsers, which can affect how custom styles are displayed. Try modifying the custom style specifically for mobile devices or using a separate style for mobile browsing.

⌛ Extra Information

• You can disable the other 2 sections to make the results and comment section look “normal”

⌨ Variables

:root, ytd-masthead#masthead, html[dark], [dark], ytd-playlist-panel-renderer {
  --background-primary: #212121;
  --background-secondary: #090909;
  --background-tertiary: #121212;
  --background-hover: #202020;
  --yt-spec-button-chip-background-hover: #202020;
  --background-video-renderer: #101010;
  --background-comment-renderer: #171717; /* Old: rgba(28, 28, 28, 1); */
  --background-title: #151515;
  --background-description: #161616; /* Old: #181818; */
  --title-text: #ccc;
  --yt-spec-base-background: #101010 !important;
  /* Search bar + Dropdown*/
  --ytd-searchbox-background: var(--background-secondary) !important;
  --ytd-searchbox-legacy-border-color: var(--background-hover) !important;
  --ytd-searchbox-legacy-button-color: var(--background-title) !important;
  --ytd-searchbox-legacy-button-border-color:  var(--background-hover) !important;
  --yt-spec-raised-background: #151515;
  /* Live Chat */
  --yt-live-chat-vem-background-color: #151515 !important;
  --yt-spec-additive-background: #090909 !important;
  /* Removals */
  --Clip-Button: none;
  --Thanks-Button: none;
  --Join-Button: none;
  --Description-Game-Tile: none;
  --Show-chat-replay: grid;                            /* grid / none */
  --Hashtag-in-title: none;
  --Event-ticket: none;
  --Emojis-in-comments: initial;                       /* initial / none */
  --Comment-replies-of-replies-action-buttons: none;
  --Donation-paid-comments: grid;                      /* grid / none */
  --Home-page-mix-playlist: none;                      /* grid / none */
  --Search-page-playlist-and-radio: none;              /* grid / none */
  --Information-box: none;                             /* grid / none */
  /* Global Removals */
  --Live-stream-video-tiles: none;                     /* grid / none */
  --Remove-loading-grey-box-skeletons: none;
  /* Removals | Search page only */
  --Search-right-sidebar: flex;                        /* flex / none */
  --People-also-search-for-card: none;
  --Channel-card: none;                                /* flex / none */
  --Shorts-card: none;
  --Movie-card: none;
  /* Other */
  --yt-spec-menu-background: #101010;
  --background-other: #050505;
  --yt-lightsource-section2-color: #181818 !important;
  /* Toast pop-up */
  --yt-spec-inverted-background: #151515 !important;
  --yt-spec-text-primary-inverse: #ccc !important;
  /* Popup / Checkboxes */
  --paper-dialog-background-color: #101010;
  --paper-checkbox-unchecked-background-color: #090909;
  --paper-checkbox-unchecked-color: #252525;
  --paper-checkbox-checked-color: #0c8a1d;
  /* Actual tweaks to layout */
  --ytd-margin-6x: 16px;            /* Changed */
  --ytd-margin-2x: 8px;
  --zIndex: 1100;
}
html[darker-dark-theme-deprecate], [darker-dark-theme-deprecate] {
  --yt-spec-additive-background: #121212;
  --yt-spec-badge-chip-background: #171717;
  --yt-spec-10-percent-layer: #202020; /* Border color */
  --yt-spec-brand-background-primary: #151515;
  --yt-spec-general-background-a: #101010;
}

⌛ [Optional]: Add this to your "My Filters" page on uBlock Origin dashboard

! ===============================> YouTube <===============================

! Removes Emojis from comments
! youtube.com###comments .yt-core-attributed-string--inline-flex-mod:has(img[src*="emoji"])

! Text animation, overlay animation, reactions, ads, player responses (like reactions, thumbs up, etc) & other stuff.... This oddly speed up YouTube | Use at on risk for now? Do more testing 28/06/24
! Prevent stats (such as likes and views) from live-updating
||youtube.com/youtubei/v1/updated_metadata
! Hide "smartimation" animations
youtube.com##yt-smartimation > :not(.smartimation__content)
youtube.com##yt-animated-action > :not(.animated-action__content-with-background)
youtube.com##:is(.smartimation__content, .animated-action__content-with-background) > :has(> lottie-component)
! Live reaction overlays
www.youtube.com##yt-reaction-control-panel-view-model
www.youtube.com##yt-reaction-control-panel-overlay-view-model
! ads, others / pointless updates
||music.youtube.com^$csp=worker-src 'none'
||www.youtube.com^$csp=worker-src 'none'
youtube.com##+js(json-prune, 2.playerResponse.adPlacements playerResponse.adPlacements playerResponse.playerAds adPlacements playerAds)
youtube.com##+js(json-prune, 2.playerResponse.adPlacements)
youtube.com##+js(json-prune, playerResponse.adPlacements)
youtube.com##+js(json-prune, playerResponse.playerAds)
youtube.com##+js(set, ytInitialPlayerResponse.adPlacements, null)

! Consent warning like "Self-harm" topics etc
youtube.com##+js(trusted-click-element, #player-error-message-container button[aria-label="I understand and wish to proceed"])

! ==================> YouTube Comments Cleaner | This removes those bot comments & More <==================                              |  #comment
! Applies to main comments | (Add "\" before the "'" to make it apply: I\’m subbed) & Comment replies
youtube.com##ytd-page-manager ytd-watch-flexy #primary.ytd-watch-flexy #comment:has-text(/I\'m subbing | I\’m subbed|Buy ONE Get ONE FREE|use my code|Don\'t forget to visit|The sponsor|first purchase|Subscribe/i):upward(ytd-comment-thread-renderer)
youtube.com##ytd-page-manager ytd-watch-flexy #primary.ytd-watch-flexy #replies ytd-comment-view-model:has(#author-text):has-text(/UTTP|NWO|UTube|Police|Troll|ZNTP|CABT/)
! Only applies to replies of comments
youtube.com##ytd-page-manager ytd-watch-flexy #primary.ytd-watch-flexy ytd-comment-thread-renderer #expander-contents ytd-comment-view-model:has-text(/Here is new fu | Here is the fu | This is the clip | Finally it’s here | Finally Here is the fu | Telegram | Teleegram | I forgot to close the camera | LETS BE HONEST WE ALL REMEMBER | ТАР 0N MY РIC | I upload funny | read my name | Read My Profile | you will see it | Claim your prize | Link to the clip | MY CONTENT IS SO | Look at my banner | Lucky prize winners | IM SUBBING EVERYONE | DONT READ MY PROFILE | JJ said my music was fire on my page |first purchase|Don\'t translate| translate | My content is | are better than|Django|your dad|I WANT TO BE THE MOST|parents said if I hit|SI TNETNOC YM|oediv retteb ekam|retteb si tnetnoc ym|content is better|erutam era sdiK|UTTP|UT‎TP|RETTEB‎ YAW‎ SI‎ TNETNOC|erutam‎ era sdiK|IS WAY BETTER|IN MY SERVER|THERE IS A VIDEO|ailihp‎odep‎ ezila‎mroN|I AM WAY BETTER|CONTENT IS BETTER|Tis a bot|shut up bot|in a video|Its finally completed|youtu.be|I MADE A DISS TRACK|use my code|Hi guys|DO NOT REDEEM|WHY DID YOU REDEE/)

! ==========> Remove videos older than x | This is your first time using :upward and regex for this, and it worked out pretty well? <==========
! youtube.com##ytd-page-manager [class*="ytd-"] .ytd-video-meta-block:nth-of-type(2):has-text(/(|5|6|7|8|9|1[0-8]) years/i):upward(ytd-rich-item-renderer)

! ==========> YouTube Keywords blur thumbnail | Home Results, Watching video recommended sidebar & Search Results <==========
youtube.com##ytd-page-manager :is(ytd-rich-item-renderer:has(#meta h3), ytd-video-renderer:has(#meta h3), ytd-compact-video-renderer:has(#video-title)):has-text(/Spoiler|New Boss|Final Boss|Trailer|Teaser|Reveal/) ytd-thumbnail:not(:hover):style(filter: grayscale(100%) blur(8px) opacity(.1))
! ===> YouTube Keywords Whitelist | Add channels you wish to whitelist here <===
youtube.com##ytd-page-manager [class*="ytd-"] :is(#video-title-link, ytd-channel-name):has-text(/Minecraft|Kira/):upward(ytd-rich-item-renderer, ytd-video-renderer, ytd-compact-video-renderer):style(filter: none)

! ==========> Watched video remover | :is([style="width: 39%;"] (different for certain browsers + version) <==========
! youtube.com##ytd-page-manager [class*="ytd-"] #progress:upward(ytd-rich-item-renderer, ytd-video-renderer, ytd-compact-video-renderer)

! ===============> YouTube: Other / Random <===============

! YouTube Consent Popup | YouTube stops videos from playing if you don't "complete" the popup, this does it for you... uBlock = GOD
youtube.com##+js(set, ytInitialData.topbar.desktopTopbarRenderer.interstitial.consentBumpRenderer.forceConsent, false)
youtube.com##+js(json-prune, [].response.topbar.desktopTopbarRenderer.interstitial.consentBumpRenderer)
youtube.com##+js(json-prune, topbar.desktopTopbarRenderer.interstitial.consentBumpRenderer)

! 2021-12-01: When specific videos redirect persistently to consent page try this filter (discussion: https://redd.it/r3ec5x ):
youtube.com##+js(set, ytInitialData.onResponseReceivedEndpoints, undefined)

! 2021-12-14 YT consent v2 https://github.com/uBlockOrigin/uAssets/issues/7636#issuecomment-992858673
youtube.com##+js(set, ytInitialData.topbar.desktopTopbarRenderer.interstitial.consentBumpV2Renderer, undefined)
youtube.com##+js(json-prune, [].response.overlay.consentBumpV2Renderer topbar.desktopTopbarRenderer.interstitial.consentBumpV2Renderer overlay.consentBumpV2Renderer response.overlay.consentBumpV2Renderer)

! 2022-10-16 when navigating directly to #shorts
youtube.com##+js(set, ytInitialData.desktopTopbar.desktopTopbarRenderer.interstitial.consentBumpV2Renderer, undefined)

Changelog: 15/07/24

• Complete Codebase Rewrite: The entire codebase has been rewritten from the ground up to enhance maintainability and readability.
• Improved Code Structure: The new structure is more intuitive and compact, making it easier for developers to navigate and understand.
• Enhanced Loading Speed: Various techniques have been employed to ensure quicker loading, improving the overall user experience.
• Colors: More native colors for basically everything. I've not yet decided which way I want to go about it and how I'll make it so users/myself can change at will rather quickly, so maybe we'll see in the future.
• Responsive Design with CSS Grids and Calc: The user interface now leverages CSS grids and the calc() function to provide a more flexible and responsive layout. This means users will experience a more seamless and adaptive interface without needing to manually adjust core settings.
• QoL Addition: Pretty much all ads, discussions, and annoying "popups" have been completely removed with CSS (only the ones I can), Cleaned a lot of the sidebar, made more odd yet unique snippets that some people may like, and made it easier for myself (maybe others) to edit, update, remove, or use in their own theme.
• Old YouTube code - before re-write | On my GitHub page

Changelog: 20/10/23

• Reduced the size of the comments and removed a lot of unnecessary or out-of-date code to alter the appearance.
• Improved sidebar hover view and maximum theater mode.
• Link errors resolved from lint setting set to CSSLint.

Changelog: 18/10/23

• Simplified the update process for faster and more seamless updates.
• Successfully addressed a long-standing issue for improved functionality.
• Eliminated redundant and unnecessary sections while reorganizing for a more streamlined code structure.
• Enhanced efficiency and readability by streamlining the codebase and improved support for 1080p resolution.
• For any issues or suggestion, please feel free to open an issue on GitHub.

Other

• Removed: Dislike button | The extensions & scripts that add it back are pure guesses/estimations, which defeats the purpose of them. I'd link sources, but they're not that hard to find. Might make it optional at some point. (class: dislike-button-view-model)

⚠️ 15/07/2024: Complete code re-write (changelog is at bottom), screenshots are "outdated", but the design is still very close; it's just "cleaner" now, imo. I've still not received the "new" UI update. Not sure why, but here we are. I'll add support when/if I get it, but till then, nothing I can do.