YouTube blend webapp window decoration/theme color with header

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)

  1. // ==UserScript==
  2. // @name YouTube blend webapp window decoration/theme color with header
  3. // @namespace https://greasyfork.org/users/1257389
  4. // @version 1.0.00
  5. // @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)
  6. // @author dvirzxc
  7. // @match https://www.youtube.com/*
  8. // @grant none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // Function to check if YouTube is in dark mode
  16. function isDarkMode() {
  17. return document.documentElement.getAttribute('dark') !== null;
  18. }
  19.  
  20. // Function to inject CSS based on mode
  21. function injectCSS() {
  22. const darkModeCSS = `
  23. div.style-scope.ytd-masthead {
  24. background-color: #212121 !important;
  25. }
  26. yt-icon {
  27. color: #f3f3f3 !important;
  28. }
  29. div.style-scope.ytd-searchbox {
  30. background-color: #212121 !important;
  31. }
  32. `;
  33.  
  34. const lightModeCSS = `
  35. div.style-scope.ytd-masthead {
  36. background-color: #ffffff !important;
  37. }
  38. yt-icon {
  39. color: #000000 !important;
  40. }
  41. div.style-scope.ytd-searchbox {
  42. background-color: #ffffff !important;
  43. }
  44. `;
  45.  
  46. const style = document.createElement('style');
  47. style.type = 'text/css';
  48.  
  49. if (isDarkMode()) {
  50. style.textContent = darkModeCSS;
  51. } else {
  52. style.textContent = lightModeCSS;
  53. }
  54.  
  55. // Remove any previously injected style elements
  56. document.querySelectorAll('style[name="YouTubeDarkModeToggle"]').forEach(styleElement => {
  57. styleElement.remove();
  58. });
  59.  
  60. // Inject the new style element
  61. style.setAttribute('name', 'YouTubeDarkModeToggle');
  62. document.head.appendChild(style);
  63. }
  64.  
  65. // Check and inject CSS when the page loads
  66. injectCSS();
  67.  
  68. // Listen for changes in dark mode and inject CSS accordingly
  69. const observer = new MutationObserver(injectCSS);
  70. observer.observe(document.documentElement, { attributes: true });
  71. })();