☰

Youtube grayscale all but video itself

grayscale all but video itself

// ==UserScript==
// @name            Youtube grayscale all but video itself
// @namespace       https://greasyfork.org/users/821661
// @match           https://www.youtube.com/*
// @grant           none
// @run-at          document-start
// @version         0.2
// @author          hdyzen
// @description     grayscale all but video itself
// ==/UserScript==
'use strict';

const SHEET = new CSSStyleSheet();

const GRAYSCALE_FACTOR = 0.8;
const SATURATE_FACTOR = 0.4;

const RULES = `
    yt-guide-manager, yt-mdx-manager, yt-playlist-manager, yt-hotkey-manager, #video-preview, #masthead-container, tp-yt-app-drawer, #ytd-browse, #secondary.ytd-watch-flexy, #below.ytd-watch-flexy, #movie_player > :not(.html5-video-container, #ytp-caption-window-container), ytd-browse {
    	filter: grayscale(${GRAYSCALE_FACTOR}) saturate(${SATURATE_FACTOR}) !important;
	}
`;

SHEET.replaceSync(RULES);

document.adoptedStyleSheets = [SHEET, ...document.adoptedStyleSheets];