Skip to content

Saaf YouTube by coding-manuel

Mirrored from https://raw.githubusercontent.com/coding-manuel/Saaf-YouTube/main/src/saaf-youtube.user.css

Screenshot of Saaf YouTube

Details

Authorcoding-manuel

LicenseMIT

CategoryYouTube

Created

Updated

Size53 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

"Saaf YouTube," a sleek and customizable userstyle that brings style and personalization to your YouTube experience.

Notes

Saaf YouTube

The Saaf YouTube theme is designed to enhance the visual appearance and customization options of the YouTube website. It offers several features to enhance your browsing experience and make the user interface (UI) more stylish. Let's explore each feature in detail:

Custom Font

The theme allows you to apply a custom font to the text displayed on the YouTube website. This feature gives you the flexibility to choose a font that suits your preferences and enhances readability while using YouTube.

Instructions

  1. Enable Custom Font Checkbox
  2. Write the name of the font
  3. Get the static link of the font:
    1. Find the font from Google fonts
    2. In your terminal, write this curl <font-src-link>
    3. Get the static font link
  4. Paste the font link with double quotes "< static-font-link >"

Multiple Themes

Saaf YouTube provides multiple themes to choose from, allowing you to change the overall color scheme and appearance of the YouTube website. Each theme has its own unique style, color combinations, and visual elements, giving you the freedom to personalize your YouTube experience.

Brown

Light Mode

Dark Mode

Red

Light Mode

Dark Mode

Default

Light Mode

Dark Mode

Custom Accent Color

In addition to the pre-defined themes, Saaf YouTube offers extensive customization options. You can input the custom accent color from the color picker, so you can set a custom accent color that complements your chosen theme, further enhancing the visual appeal of the UI.

Disable Items

To make the YouTube page cleaner and less cluttered, Saaf YouTube allows you to disable specific items. This feature enables you to hide certain elements that you may not find useful or want to remove for a cleaner browsing experience. The notification pane or the upload icon button can be removed. By selectively disabling items, you can tailor the YouTube UI to your specific preferences.

All the things you can disable using the configuration menu:

image

image

image

Notification

image

image

Upload

image

Stylish UI

Saaf Youtube aims to make the YouTube user interface more stylish and visually appealing. The combination of custom fonts, multiple themes, and customizable accent colors contribute to an enhanced aesthetic experience. By applying the theme, you can transform the default YouTube UI into a more elegant and visually appealing design.

Overall, the Saaf YouTube theme provides a range of features that enhance the appearance and customization options of the YouTube website. Whether you prefer a specific font, want to choose from various themes, customize accent colors, or make the UI cleaner, this theme offers a stylish and personalized browsing experience on YouTube.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name Saaf YouTube 
@namespace github.com/coding-manuel/Saaf-YouTube
@homepageURL https://github.com/coding-manuel/Saaf-YouTube
@version 1.0.2
@description "Saaf YouTube," a sleek and customizable userstyle that brings style and personalization to your YouTube experience.
@author coding-manuel
@license MIT
@preprocessor less
@var select primaryColor  "Primary Theme Color" ["brown: Brown", "red: Red", "cyberpunk: Cyberpunk", "def: Default"]
@var checkbox showCustomAccent "Custom Accent Color" 0
@var color accentColor "Accent color" #123456
@var checkbox showCustomLogo "Show Custom Logo" 1
@advanced text logoUrl "Custom Logo Url (PNG or GIF)" "'https://i0.wp.com/www.printmag.com/wp-content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?fit=476%2C280&ssl=1'"
@var select fontFace "Font Face" {
	"Space Grotesk": "Space Grotesk",
	"JetBrains Mono": "JetBrains Mono",
	"Fira Sans": "Fira Sans",
	"Default": "Roboto",
}
@var checkbox useCustomFont "Custom Font" 0
@advanced text customFontName "Custom Font Name" "Archivo"
@advanced text fontUrl "Custom Font Url (ttf)" "'https://fonts.gstatic.com/s/archivo/v18/k3k6o8UDI-1M0wlSV9XAw6'"
@var checkbox useCustomBorderRadius "Custom Border Radius" 0
@var text borderRadius "Border Radius (px)" 16px
@var checkbox showBlurThumbnail "Show Blur on Video Cards (Beta)" 0
@var checkbox showSidebarSubscriptions "Show Sidebar Subscriptions" 0
@var checkbox showSidebarExplore "Show Sidebar Explore" 0
@var checkbox showSidebarMore "Show Sidebar More" 0
@var checkbox showNotification "Show Notification" 0
@var checkbox showVoiceSearch "Show Voice Search" 0
@var checkbox showSearchButton "Show Search Button" 0
@var checkbox showUpload "Show Upload" 0
==/UserStyle== */
@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {

	@font-face {
		font-family: 'Space Grotesk';
		font-style: normal;
		font-weight: 500;
		src: url(https://fonts.gstatic.com/s/spacegrotesk/v15/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUUsj.ttf) format('truetype');
	}

	@font-face {
		font-family: 'JetBrains Mono';
		font-style: normal;
		font-weight: 500;
		src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0) format('truetype');
	}

	@font-face {
		font-family: 'Fira Sans';
		font-style: normal;
		font-weight: 500;
		src: url(https://fonts.gstatic.com/s/firasans/v17/va9E4kDNxMZdWfMOD5VfkA.ttf) format('truetype');
	}

	@font-face {
		font-family: @customFontName;
		font-style: normal;
		font-weight: 500;
		src: url(@fontUrl) format('truetype');
	}

	body,
	a,
	span,
	::placeholder,
	yt-formatted-string {
		font-family: if((@useCustomFont =1), @customFontName, @fontFace), "Arial", "Helvetica", "sans-serif" !important;
	}

	/* youtube.com */
	:root[dark] {
		#theme-object('dark-theme', @primaryColor, @accentColor);
	}
	:root {
		#theme-object('light-theme', @primaryColor, @accentColor);
	}

	#theme-object(@theme, @primary, @accent) {
		@red: @catppuccin[@@primary][@@theme][@red];
		@green: @catppuccin[@@primary][@@theme][@green];
		@blue: @catppuccin[@@primary][@@theme][@blue];
		@text: @catppuccin[@@primary][@@theme][@text];
		@disabled: @catppuccin[@@primary][@@theme][@disabled];
		@subtext1: @catppuccin[@@primary][@@theme][@subtext1];
		@subtext0: @catppuccin[@@primary][@@theme][@subtext0];
		@overlay2: @catppuccin[@@primary][@@theme][@overlay2];
		@overlay1: @catppuccin[@@primary][@@theme][@overlay1];
		@overlay0: @catppuccin[@@primary][@@theme][@overlay0];
		@surface2: @catppuccin[@@primary][@@theme][@surface2];
		@surface1: @catppuccin[@@primary][@@theme][@surface1];
		@surface0: @catppuccin[@@primary][@@theme][@surface0];
		@base: @catppuccin[@@primary][@@theme][@base];
		@mantle: @catppuccin[@@primary][@@theme][@mantle];
		@crust: @catppuccin[@@primary][@@theme][@crust];
		@accent-colour: if((@showCustomAccent =1), @accent, @catppuccin[@@primary][@@theme][@primaryColor]);
		@border-radius: if((@useCustomBorderRadius =1), @borderRadius, @catppuccin[@@primary][@borderRad]);


		/* apply everywhere */
		&,
		[dark],
		html,
		html[system-icons][dark],
		html[system-icons] [dark],
		html[darker-dark-theme][dark],
		[darker-dark-theme] [dark] {
			--yt-spec-white-1: @text !important;
			--yt-spec-white-2: @subtext0 !important;
			--yt-spec-white-3: @subtext1 !important;
			--yt-spec-white-4: darken(@subtext1, 5%) !important;
			--yt-spec-black-1: @overlay1 !important;
			--yt-spec-black-2: @overlay0 !important;
			--yt-spec-black-3: @surface2 !important;
			--yt-spec-black-4: @surface1 !important;
			--yt-spec-black-pure: @surface0 !important;
			--yt-spec-grey-1: @text !important;
			--yt-spec-grey-2: @subtext0 !important;
			--yt-spec-grey-3: @subtext1 !important;
			--yt-spec-grey-4: @overlay2 !important;
			--yt-spec-grey-5: @overlay1 !important;
			--yt-brand-youtube-red: @accent-colour !important;
			--yt-brand-medium-red: @accent-colour !important;
			--yt-brand-light-red: @accent-colour !important;
			--yt-spec-red-30: @red !important;
			--yt-spec-red-70: @red !important;
			--yt-spec-pale-blue: @blue !important;
			--yt-spec-light-blue: @blue !important;
			--yt-spec-dark-blue: @blue !important;
			--yt-spec-navy-blue: @blue !important;
			--yt-spec-light-green: @green !important;
			--yt-spec-dark-green: @green !important;
			--yt-spec-yellow: @red !important;
			--yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important;
			--yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important;
			--yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important;
			--yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important;
			--yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important;
			--yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important;
			--yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important;
			--yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important;
			--yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important;
			--yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important;
			--yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important;
			--yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important;
			--yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important;
			--yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important;
			--yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important;
			--yt-brand-medium-red-alpha-90: fadeout(@accent-colour, 0.9) !important;
			--yt-brand-medium-red-alpha-30: fadeout(@accent-colour, 0.3) !important;
			--yt-brand-light-red-alpha-30: fadeout(@accent-colour, 0.3) !important;
			--yt-spec-light-blue-alpha-30: fadeout(@blue, 0.3) !important;
			--yt-spec-dark-blue-alpha-30: fadeout(@blue, 0.3) !important;

			--yt-spec-base-background: @base !important;
			--yt-spec-raised-background: @mantle !important;
			--yt-spec-menu-background: @mantle !important;
			--yt-spec-inverted-background: @text !important;
			--yt-spec-additive-background: fadeout(@surface0, 0.1) !important;
			--yt-spec-outline: @surface0 !important;
			--yt-spec-shadow: fadeout(@crust, 0.25) !important;
			--yt-spec-text-primary: @text !important;
			--yt-spec-text-secondary: @subtext0 !important;
			--yt-spec-text-disabled: @subtext1 !important;
			--yt-spec-text-primary-inverse: @crust !important;
			--yt-spec-call-to-action: @accent-colour !important;
			--yt-spec-call-to-action-inverse: @accent-colour !important;
			--yt-spec-suggested-action: @surface1 !important;
			--yt-spec-suggested-action-inverse: @text !important;
			--yt-spec-icon-active-other: @overlay0 !important;
			--yt-spec-icon-inactive: @overlay1 !important;
			--yt-spec-icon-disabled: @overlay2 !important;
			--yt-spec-button-chip-background-hover: @surface1 !important;
			--yt-spec-touch-response: @surface0 !important;

			--yt-spec-touch-response-inverse: @accent-colour !important;
			--yt-spec-brand-icon-active: @accent-colour !important;
			--yt-spec-brand-icon-inactive: @overlay1 !important;
			--yt-spec-brand-button-background: @accent-colour !important;
			--yt-spec-brand-link-text: @blue !important;
			--yt-spec-wordmark-text: @text !important;
			--yt-spec-error-indicator: @red !important;
			--yt-spec-themed-blue: @blue !important;
			--yt-spec-themed-green: @green !important;
			--yt-spec-ad-indicator: @blue !important;
			--yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important;
			--yt-spec-commerce-badge-background: @green !important;
			--yt-spec-static-brand-red: @accent-colour !important;
			--yt-spec-static-brand-white: @text !important;
			--yt-spec-static-brand-black: @base !important;
			--yt-spec-static-clear-color: fadeout(@crust, 0) !important;
			--yt-spec-static-clear-black: fadeout(@crust, 0) !important;
			--yt-spec-static-ad-yellow: @red !important;
			--yt-spec-static-grey: @subtext0 !important;
			--yt-spec-static-overlay-background-solid: @accent-colour !important;
			--yt-spec-static-overlay-background-heavy: @surface0 !important;
			--yt-spec-static-overlay-background-medium: fadeout(@crust, 0.6) !important;
			--yt-spec-static-overlay-background-medium-light: fadeout(@crust, 0.3) !important;
			--yt-spec-static-overlay-background-light: fadeout(@crust, 0.1) !important;
			--yt-spec-static-overlay-text-primary: @text !important;
			--yt-spec-static-overlay-text-secondary: fadeout(@subtext0, 0.7) !important;
			--yt-spec-static-overlay-text-disabled: fadeout(@subtext0, 0.3) !important;
			--yt-spec-static-overlay-call-to-action: @accent-colour !important;
			--yt-spec-static-overlay-icon-active-other: @text !important;
			--yt-spec-static-overlay-icon-inactive: @surface1 !important;
			--yt-spec-static-overlay-icon-disabled: @surface2 !important;
			--yt-spec-static-overlay-button-primary: @accent-colour !important;
			--yt-spec-static-overlay-button-secondary: @surface0 !important;
			--yt-spec-static-overlay-touch-response: @overlay1 !important;
			--yt-spec-static-o...

Reviews

No reviews yet.