☰

Google Docs Dark Mode

Turn Google Docs into dark mode.

// ==UserScript==
// @name         Google Docs Dark Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Turn Google Docs into dark mode.
// @author       You
// @match        https://docs.google.com/document/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant        GM_addStyle
// @run-at       context-menu
// @license      MIT
// ==/UserScript==

(function () {
    "use strict";

    // Your code here...

    changeClassCss("docs-font-size-inc-dec-combobox", "color", "#FFF");
    changeClassCss("docs-font-size-inc-dec-combobox", "background", "#2B2B39");
    changeClassCss("goog-toolbar-combo-button-input", "color", "#FFF");
    changeClassCss("goog-toolbar-combo-button-input", "background", "#2B2B39");
    changeClassCss("docs-toolbar-zoom-combobox", "color", "#FFF");
    changeClassCss("docs-toolbar-zoom-combobox", "background", "#2B2B39");
    changeClassCss("goog-toolbar-select", "background", "#2B2B39");
    changeClassCss("goog-toolbar-menu-button", "background", "#2B2B39");
    changeClassCss("goog-toolbar-button", "background", "#2B2B39");
    changeClassCss("docs-icon-img-container", "filter", "brightness(2.5)");
    changeClassCss("docs-main-toolbars", "background", "#15151c");
    changeClassCss("docs-main-toolbars", "border-top", "1px solid #303640");
    changeClassCss("docs-main-toolbars", "border-bottom", "1px solid #303640");
    changeClassCss("docs-omnibox-input", "background", "#2B2B39");
    changeClassCss("docs-material", "background", "#15151c");
    changeClassCss("navigation-item-content", "color", "#FFF");
    changeClassCss("left-sidebar-container", "box-shadow", "1px 0 0 0 #070c16");
    changeClassCss("left-sidebar-container", "background", "#15151c");
    changeClassCss("navigation-item-content", "filter", "brightness(2.5)");
    //changeClassCss("docs-ruler-face", "background-color", "#58575e");
    //changeClassCss("docs-ruler-mask", "background-color", "#39393a");
    //changeClassCss("docs-ruler-background", "background-color", "#3F3F40");

    changeClassCss(
        "docs-horizontal-ruler",
        "border-bottom",
        "1px solid #4f5052"
    );

    GM_addStyle(`

        .kix-appview-editor {
            background-color: #2b2b39 !important;
        }
        #kix-horizontal-ruler > div > div.docs-ruler-background {
            background: #3F3F40;
        }
        #kix-horizontal-ruler > div > div.docs-ruler-face {
            background: #58575e;
        }
        #kix-horizontal-ruler {
            background: #39393a;
        }
        .navigation-item-list .navigation-item .navigation-item-content {
            filter: brightness(1.5);
        }
        .navigation-item-list .navigation-item .navigation-item-level-0 {
            filter: brightness(4.5);
            font-size: 18px;
        }
        
        .goog-toolbar-menu-button-inner-box .goog-toolbar-menu-button-caption{
            color: white;
        }

        .goog-toolbar-combo-button-input {
            color: white !important;
        }

        #navigation-widget-top-shadow {
            opacity: 0 !important;
        }

        .menu-button {
            color: white !important;
        }
        

        .docs-title-widget {
            background: #39393a !important;
        
        }

        .docs-title-input {
            color: gray !important;
            background-color: #39393a !important;
        }
        .docs-title-input-label-inner {
            color: white !important;
        }
        .companion-app-switcher-container {
            background-color: transparent !important;
            border-color: transparent !important;
        }

        #qJTzr > div.app-switcher-button-icon-container {
            filter: contrast(0) !important;
        }
        .docs-titlebar-buttons {
            background-color: #15151c !important;
        }

        .goog-toolbar[role=toolbar] .docs-font-size-inc-dec-action-button.goog-toolbar-button,
        #fontSizeSelect.docs-font-size-inc-dec-combobox
        {
            border-color: #303040 !important;
        }

        #docs-meet-in-editors-entrypointbutton {
            background: #1e1e2a !important;
        }
    `);
})();

function changeClassCss(className, property, value) {
    const nodeList = document.querySelectorAll(`.${className}`);
    for (var i = 0; i < nodeList.length; i++) {
        nodeList[i].style.setProperty(property, value, "important");
    }
}