☰

Greasy Fork is available in English.

Google Docs Dark Mode

Turn Google Docs into dark mode.

  1. // ==UserScript==
  2. // @name         Google Docs Dark Mode
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Turn Google Docs into dark mode.
  6. // @author       You
  7. // @match        https://docs.google.com/document/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
  9. // @grant        GM_addStyle
  10. // @run-at       context-menu
  11. // @license      MIT
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     "use strict";
  16.  
  17.     // Your code here...
  18.  
  19.     changeClassCss("docs-font-size-inc-dec-combobox", "color", "#FFF");
  20.     changeClassCss("docs-font-size-inc-dec-combobox", "background", "#2B2B39");
  21.     changeClassCss("goog-toolbar-combo-button-input", "color", "#FFF");
  22.     changeClassCss("goog-toolbar-combo-button-input", "background", "#2B2B39");
  23.     changeClassCss("docs-toolbar-zoom-combobox", "color", "#FFF");
  24.     changeClassCss("docs-toolbar-zoom-combobox", "background", "#2B2B39");
  25.     changeClassCss("goog-toolbar-select", "background", "#2B2B39");
  26.     changeClassCss("goog-toolbar-menu-button", "background", "#2B2B39");
  27.     changeClassCss("goog-toolbar-button", "background", "#2B2B39");
  28.     changeClassCss("docs-icon-img-container", "filter", "brightness(2.5)");
  29.     changeClassCss("docs-main-toolbars", "background", "#15151c");
  30.     changeClassCss("docs-main-toolbars", "border-top", "1px solid #303640");
  31.     changeClassCss("docs-main-toolbars", "border-bottom", "1px solid #303640");
  32.     changeClassCss("docs-omnibox-input", "background", "#2B2B39");
  33.     changeClassCss("docs-material", "background", "#15151c");
  34.     changeClassCss("navigation-item-content", "color", "#FFF");
  35.     changeClassCss("left-sidebar-container", "box-shadow", "1px 0 0 0 #070c16");
  36.     changeClassCss("left-sidebar-container", "background", "#15151c");
  37.     changeClassCss("navigation-item-content", "filter", "brightness(2.5)");
  38.     //changeClassCss("docs-ruler-face", "background-color", "#58575e");
  39.     //changeClassCss("docs-ruler-mask", "background-color", "#39393a");
  40.     //changeClassCss("docs-ruler-background", "background-color", "#3F3F40");
  41.  
  42.     changeClassCss(
  43.         "docs-horizontal-ruler",
  44.         "border-bottom",
  45.         "1px solid #4f5052"
  46.     );
  47.  
  48.     GM_addStyle(`
  49.  
  50.         .kix-appview-editor {
  51.             background-color: #2b2b39 !important;
  52.         }
  53.         #kix-horizontal-ruler > div > div.docs-ruler-background {
  54.             background: #3F3F40;
  55.         }
  56.         #kix-horizontal-ruler > div > div.docs-ruler-face {
  57.             background: #58575e;
  58.         }
  59.         #kix-horizontal-ruler {
  60.             background: #39393a;
  61.         }
  62.         .navigation-item-list .navigation-item .navigation-item-content {
  63.             filter: brightness(1.5);
  64.         }
  65.         .navigation-item-list .navigation-item .navigation-item-level-0 {
  66.             filter: brightness(4.5);
  67.             font-size: 18px;
  68.         }
  69.         
  70.         .goog-toolbar-menu-button-inner-box .goog-toolbar-menu-button-caption{
  71.             color: white;
  72.         }
  73.  
  74.         .goog-toolbar-combo-button-input {
  75.             color: white !important;
  76.         }
  77.  
  78.         #navigation-widget-top-shadow {
  79.             opacity: 0 !important;
  80.         }
  81.  
  82.         .menu-button {
  83.             color: white !important;
  84.         }
  85.         
  86.  
  87.         .docs-title-widget {
  88.             background: #39393a !important;
  89.         
  90.         }
  91.  
  92.         .docs-title-input {
  93.             color: gray !important;
  94.             background-color: #39393a !important;
  95.         }
  96.         .docs-title-input-label-inner {
  97.             color: white !important;
  98.         }
  99.         .companion-app-switcher-container {
  100.             background-color: transparent !important;
  101.             border-color: transparent !important;
  102.         }
  103.  
  104.         #qJTzr > div.app-switcher-button-icon-container {
  105.             filter: contrast(0) !important;
  106.         }
  107.         .docs-titlebar-buttons {
  108.             background-color: #15151c !important;
  109.         }
  110.  
  111.         .goog-toolbar[role=toolbar] .docs-font-size-inc-dec-action-button.goog-toolbar-button,
  112.         #fontSizeSelect.docs-font-size-inc-dec-combobox
  113.         {
  114.             border-color: #303040 !important;
  115.         }
  116.  
  117.         #docs-meet-in-editors-entrypointbutton {
  118.             background: #1e1e2a !important;
  119.         }
  120.     `);
  121. })();
  122.  
  123. function changeClassCss(className, property, value) {
  124.     const nodeList = document.querySelectorAll(`.${className}`);
  125.     for (var i = 0; i < nodeList.length; i++) {
  126.         nodeList[i].style.setProperty(property, value, "important");
  127.     }
  128. }