☰

Google Sheets Dark Mode

12/7/2023, 10:09:32 AM

// ==UserScript==
// @name        Google Sheets Dark Mode
// @namespace   Violentmonkey Scripts
// @match       https://docs.google.com/spreadsheets/*
// @grant       none
// @version     1.1
// @author      Lunula
// @description 12/7/2023, 10:09:32 AM
// @license      GPL-3.0 License

// ==/UserScript==

(function() {
    'use strict';

    // Create a <style> element
    const style = document.createElement('style');
    style.type = 'text/css';

    // CSS styles to change background color of various Google Sheets elements
    const css = `
        /* invert the table, formula bar, cell editor, and navbar and dim transparency to soften */
        #waffle-grid-container,
        #formula-bar-name-box-wrapper,
        #docs-chrome,
        #docs-additional-bars,
        div[role="navigation"],
        .cell-input.editable {
            filter: invert();
            opacity: 0.9;
        }

        /* re-invert colors inside inverted parents to restore them */
        .overlay-container-ltr,
        .formula-content > span:not(.default-formula-text-color),
        .docs-gm .docs-sheet-active-tab .docs-sheet-tab-name,
        .docs-gm .docs-sheet-active-tab .docs-icon {
            filter: invert();
        }

        /* invert selection color manually */
        ::selection {
            background-color: #e58c17 !important;
        }

        /* Misc artifacts */
        .autofill-handle {
            border-color: #333;
        }
        .input-box {
            background: #000 !important;
        }
        .cell-input {
            background: #DDD !important;
        }
        .docs-gm .docs-menubar .goog-control-disabled {
            background-color: transparent !important;
            opacity: 0.5;
        }
    `;

    // Append the CSS styles to the <style> element
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    // Append the <style> element to the <head> of the document
    document.head.appendChild(style);
})();