Youtube Dark Mode - Windows 11 Fluent Theme by sobatambyar

Screenshot of Youtube Dark Mode - Windows 11 Fluent Theme

Details

Authorsobatambyar

LicenseGNU General Public License v3.0

Categoryyoutube, yt, ytp, dark mode, fluent, windows 11, tweak, tweaks, design, redesign

Created2 years, 4 months ago

Updated2 years, 2 weeks ago

Size94 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A CSS modification for Youtube, making it look like a Windows 11 Dark Mode Fluent style
Tested on Microsoft Edge (Chromium) and should work on most (if not all) other Chromium based browsers

You need Stylus extension to apply this theme | Download Here
Tampermonkey userscript version (not recommended due to old version & buggy) | Visit Page

If you find a bug, want to help me or want to suggest something, feel free to contact me via Telegram
I made this as a hobby. I'll fix it when I have free time. Please be patient
Don't forget to give me a review in down below

Hope you like it :)

- Okki Dwi | Sobat Ambyar | Nurhadi-

Notes

Version: 4.0

Features:

New UI design inspired by Windows 11 Fluent style
New subtitle appearance
Hide country code location
Hide buttons when the video is paused and show them again when hovered
Returns the video length in the thumbnail
New video watched badge
Show deleted messages in live chat
Displays the current playback time even for live streams
Rainbow live chat usernames

What's New:

Fix the white comment section background bug

Version History:

v4.0 Fix the white comment section background bug
v3.5 Blurry video settings popup (mica material design), subtitle redesign (due to feedback) and video's comment section redesign
v3.1 Bug fixes & subtitle redesign (returns to black background style | due to feedback)
v3.0 Adding new watched badge, show deleted messages in live chat, displays the current playback time even for live streams and rainbow live chat usernames features
v2.5 Improved subtitle appearance for easier viewing, redesign search box and returns voice typing button
v2.0 Fixed CSS code so that the theme was only applied to Youtube (I forgot to set it lol)
v1.5 Adding new subtitle appearance, hide country code location, hide buttons when the video is paused and show them again when hovered, returns the video length in the thumbnail features
v1.0 Initial release (basic Windows 11 Dark Mode Fluent 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         Youtube Dark Mode - Windows 11 Fluent Theme
@version      4.0
@namespace    https://t.me/okkidwi
@description  A CSS modification for Youtube, making it look like a Windows 11 Dark Mode Fluent style. Hope you like it
@author       sobatambyar
@license      GNU General Public License v3.0
@advanced dropdown test "Color of the background" {
	test "Dark" <<<EOT ytd-thumbnail-overlay-resume-playback-renderer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
} EOT;
}
@advanced dropdown crest "Position of WATCHED" {
crest2 "Middle" <<<EOT     
    top: 12%;
    left: 10%; EOT;
}
==/UserStyle== */
@-moz-document domain("youtube.com") {
	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
       
    .paused-mode:not(.unstarted-mode) > div:not(.html5-video-container) {
        opacity: 0
    }
    .paused-mode:hover > div:not(.html5-video-container) {
        opacity: 1

    }
    .ytp-caption-segment {
	    --lt-color-gray-100: #f8f9fc;
	    --lt-color-gray-200: #f1f3f9;
	    --lt-color-gray-300: #dee3ed;
	    --lt-color-gray-400: #c2c9d6;
	    --lt-color-gray-500: #8f96a3;
	    --lt-color-gray-600: #5e636e;
	    --lt-color-gray-700: #2f3237;
	    --lt-color-gray-800: #1d1e20;
	    --lt-color-gray-900: #111213;
	    --lt-shadowDefault: 0 2px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 4px -1px rgba(0, 0, 0, 0.04);
	    --lt-shadowActive: 0 0 8px -2px rgba(0, 0, 0, 0.1), 0 6px 20px -3px rgba(0, 0, 0, 0.2);
	    --lt-color-white: #fff !important;
	    --lt-color-black: #111213 !important;
	    --lt-color-transparent: rgba(255, 255, 255, 0) !important;
	    --lt-color-background-light: var(--lt-color-gray-100) !important;
	    --lt-color-background-default: var(--lt-color-gray-200) !important;
	    --lt-color-background-dark: var(--lt-color-gray-300) !important;
	    --lt-color-border-light: var(--lt-color-gray-200) !important;
	    --lt-color-border-default: var(--lt-color-gray-300) !important;
	    --lt-color-border-dark: var(--lt-color-gray-400) !important;
	    --lt-color-text-very-light: var(--lt-color-gray-500) !important;
	    --lt-color-text-light: var(--lt-color-gray-600) !important;
	    --lt-color-text-default: var(--lt-color-gray-700) !important;
	    --lt-color-text-dark: var(--lt-color-gray-800) !important;
	    --lt-color-overlay-default: #fff !important;
	    --lt-color-overlay-dark: #fff !important;
	    --lt-color-overlay-transparent: rgba(0, 0, 0, 0.1) !important;
	    --lt-shadow-website-overlay: 0 0 7px 0 rgba(0, 0, 0, 0.3) !important;
	    -webkit-font-smoothing: antialiased !important;
	    user-select: none !important;
	    direction: ltr !important;
	    white-space: nowrap !important;
	    text-align: center !important;
	    line-height: normal !important;
	    color: #ffffff !important;
	    text-shadow: 0px 0px 1px #000000, 0px 0px 2px #000000, 0px 0px 3px #000000, 0px 0px 5px #000000, 0px 0px 9px #000000, 0px 0px 20px #000000 !important;
	    font-family: Segoe UI, segoe-ui !important;
	    font-weight: normal !important;
    }
    .ytp-big-mode > div > div > span > span > span {
	    font-size: 32.5px !important;
    }
    .ytp-hide-info-bar > div > div > span > span > span {
	    font-size: 25.5px !important;
    }
    .ytp-caption-segment {
	    background: none !important;
    }
    .caption-window {
	    text-align: center !important;
	    width: 100% !important;
	    height: auto !important;
	    left: 0% !important;
	    margin-left: auto !important;
    }
    .ytp-big-mode > div > .caption-window, .ytp-hide-info-bar > div > .caption-window {
	    bottom: 6.9468% !important;
    }
    .ytp-big-mode.ytp-autohide-active > div > .caption-window, .ytp-autohide > div > .caption-window {
	    bottom: 10% !important;
    }
    
    .ytp-live .ytp-time-current {
        display: inline-block;
        margin-right: 15px;
    }
    
    #author-name.yt-live-chat-author-chip:not([type="moderator"]) {
        -webkit-animation: random 30s infinite ease-in-out!important;
        animation: random 30s infinite ease-in-out!important;
        box-sizing: border-box!important;
        border-radius: 2px!important;
        font-weight: 500!important;
    }
    @keyframes random {
        0% {
            color: #E91E63;
    }
        10% {
            color: #673AB7;
    }
        20% {
            color: #3F51B5;
    }
        30% {
            color: #00BCD4;
    }
        40% {
            color: #009688;
    }
        50% {
            color: #4CAF50;
    }
        60% {
            color: #8BC34a;
    }
        70% {
            color: #FFC107;
    }
        80% {
            color: #FF9800;
    }
        90% {
            color: #FF5722;
    }
        100% {
            color: #E91E63;
    }
}

    yt-live-chat-message-input-renderer {
        padding: 9px!important;
    }

    #avatar.yt-live-chat-message-input-renderer,
        yt-live-chat-author-chip.style-scope.yt-live-chat-message-input-renderer {
        display: none!important;
    }

    /*[[test]]*/

    ytd-thumbnail-overlay-time-status-renderer {
        z-index: 5;
        opacity: 1;
        transition: opacity 0.3s
    }
    ytd-thumbnail:hover ytd-thumbnail-overlay-time-status-renderer {
        opacity: 0;
    }
    
    #progress.ytd-thumbnail-overlay-resume-playback-renderer {
        background: no-repeat   url(data:image/png;base64,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...

Reviews

No reviews yet.