☰

Google Docs blend webapp window decoration/theme color with header

Set theme color based on Google Docs header's background color

  1. // ==UserScript==
  2. // @name         Google Docs 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 Google Docs header's background color
  6. // @author       dvirzxc
  7. // @match        https://docs.google.com/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function getBackgroundColor() {
  16.         const selector = '[class*=docs-grille-]';
  17.         const elementClass = document.querySelector(selector);
  18.         if (elementClass) {
  19.             const element = elementClass.querySelector('#docs-chrome:not(.docs-hub-chrome)');
  20.             if (element) {
  21.                 const style = window.getComputedStyle(element);
  22.                 return style.backgroundColor;
  23.             }
  24.         }
  25.         return '#ffffff'; // Return white when there's no selector to be found
  26.     }
  27.  
  28.     // Function to set the meta tag
  29.     function setChromeThemeColor(color) {
  30.         const metaThemeColor = document.createElement('meta');
  31.         metaThemeColor.setAttribute('name', 'theme-color');
  32.         metaThemeColor.setAttribute('content', color);
  33.         document.head.appendChild(metaThemeColor);
  34.     }
  35.  
  36.     // Run
  37.     const backgroundColor = getBackgroundColor();
  38.     setChromeThemeColor(backgroundColor);
  39. })();