Set theme color based on YouTube header's background color, and make the header color stay persistent when theater mode is toggled. (Works both for dark and light mode)
// ==UserScript==
// @name YouTube blend webapp window decoration/theme color with header
// @namespace https://greasyfork.org/users/1257389
// @version 1.0.00
// @description Set theme color based on YouTube header's background color, and make the header color stay persistent when theater mode is toggled. (Works both for dark and light mode)
// @author dvirzxc
// @match https://www.youtube.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Function to check if YouTube is in dark mode
function isDarkMode() {
return document.documentElement.getAttribute('dark') !== null;
}
// Function to inject CSS based on mode
function injectCSS() {
const darkModeCSS = `
div.style-scope.ytd-masthead {
background-color: #212121 !important;
}
yt-icon {
color: #f3f3f3 !important;
}
div.style-scope.ytd-searchbox {
background-color: #212121 !important;
}
`;
const lightModeCSS = `
div.style-scope.ytd-masthead {
background-color: #ffffff !important;
}
yt-icon {
color: #000000 !important;
}
div.style-scope.ytd-searchbox {
background-color: #ffffff !important;
}
`;
const style = document.createElement('style');
style.type = 'text/css';
if (isDarkMode()) {
style.textContent = darkModeCSS;
} else {
style.textContent = lightModeCSS;
}
// Remove any previously injected style elements
document.querySelectorAll('style[name="YouTubeDarkModeToggle"]').forEach(styleElement => {
styleElement.remove();
});
// Inject the new style element
style.setAttribute('name', 'YouTubeDarkModeToggle');
document.head.appendChild(style);
}
// Check and inject CSS when the page loads
injectCSS();
// Listen for changes in dark mode and inject CSS accordingly
const observer = new MutationObserver(injectCSS);
observer.observe(document.documentElement, { attributes: true });
})();