GDOC_DARK by dec-iade

/* ==UserStyle==
@name         GDOC_DARK
@namespace    https://github.com/DEC-IADe
@description  GDOC Dark mode
@author       IADe (https://github.com/DEC-IADe)
@version      1.0.0
@license      Open Source
==/UserStyle== */
/* adegard 2021 
Stylus_GDOC_GSHEET_DARK_MODE.css

***
This code allows to switch google doc&sheet in Dark Mode to save your eyes.
***

It can be installed with Stylus Chrome extension.

https://userstyles.world/style/279/gdoc-dark

*/
/* Sheet color */
@-moz-document url-prefix("https://docs.google.com/") {
    :root {
        --gray-50: #dddddd;
        --gray-100: #bdbdbd;
        --gray-150: #646464;
        --gray-200: #555555;
        --gray-300: #373434;
        --gray-400: var(--gray-600);
        --gray-500: #1C1C1C;

        /*USED FOR BACKGROUND*/
        --gray-600: #1d2023;

        /*USED FOR FONT*/
        --white-100: #98b3b4;

        --white-200: #ededed;
        --white-300: #e3e3e3;
    }

    /* Pop up windows */
    .docs-docos-activitybox,
    .docos-streampane-content,
    .docos-streampane-header {
        background-color: var(--gray-300) !important;
        border-color: var(--gray-300) !important;
    }

    /* Menu searching when toolbar is hidden */
    .docs-omnibox-input {
        background-color: var(--gray-300) !important;
        border: 1px solid var(--gray-400) !important;
        color: var(--white-100) !important;
    }

    .docs-omnibox-input::placeholder {
        color: var(--white-100) !important;
    }

    .ac-renderer {
        background-color: var(--gray-300) !important;
    }

    .ac-active {
        background-color: var(--gray-100) !important;
    }

    .ac-row > div > div > .docs-icon {
        background-color: transparent !important;
    }

    /* Menus for different toolbar options */
    .goog-menu,
    .goog-menuitem {
        background-color: var(--gray-400) !important;
        color: var(--white-100) !important;
    }

    .goog-menuitem-highlight > *,
    .goog-option > * {
        color: var(--white-100) !important;
        font-weight: bold !important;
    }

    /* Icons for some toolbar options */
    .goog-menuitem-icon {
        background-color: var(--gray-50) !important;
        border-radius: 2px !important;
    }

    /* Navigation tab LEFT */
    .docs-navigation-tab-button {
        background-color: var(--gray-100) !important;
        border-color: var(--white-100) !important;
        filter: invert(100%) !important;
    }

    .docs-ruler-mask {
        background-color: #1e2642 !important;
    }

    /* Navigation tab expanded */
    .navigation-widget {
        background-color: var(--gray-400) !important;
    }

    #navigation-widget-hat-list-icon {
        background-color: var(--gray-100) !important;
        border-radius: 3px;
    }

    .navigation-widget-hat-title,
    .navigation-item-content {
        color: var(--white-100) !important;
    }

    .goog-button-hover > * {
        color: var(--gray-400) !important;
        font-weight: bold !important;
        background-color: var(--gray-150) !important;
    }

    .navigation-widget-hat-close-button-icon {
        background-color: var(--gray-50);
        border-radius: 50%;
    }

    /* Top toolbar with File, Edit.. options */
    #docs-chrome {
        background-color: var(--gray-400) !important;
    }

    /* Share, user pic.. wrapper */
    .docs-titlebar-buttons {
        background-color: var(--gray-400) !important;
    }

    /* Comment button */
    #docs-docos-commentsbutton {
        background-color: var(--gray-100) !important;
        filter: invert(100%) !important;
    }

    .jfk-button-checked > .docs-icon,
    .jfk-button-active > .docs-icon {
        filter: invert(100%) !important;
    }

    .docs-docos-activitybox {
        background-color: var(--gray-300) !important;
    }

    .docos-new-comment-button {
        height: auto !important;
        background-color: var(--gray-400) !important;
    }

    .goog-flat-menu-button {
        background-color: var(--gray-400) !important;
    }

    .docos-ns-caption-text {
        color: var(--white-100);
    }

    /* The input for the document title */
    .docs-title-input,
    .docs-title-input-label {
        background-color: var(--gray-500) !important;
        color: #e8d58e !important;
    }

    .docs-title-input:hover {
        border-color: transparent !important;
    }

    /* Add to Drive icon next to input for document title*/
    #docs-folder {
        filter: brightness(1.5) !important;
    }

    /* The star for saving the doc as favorite */
    #docs-star {
        background-color: var(--gray-500);
        border-radius: 5px;
    }

    /* The File, Edit.. options */
    .menu-button {
        color: #7b9ad7 !important;
    }

    .goog-control-hover,
    .goog-control-open {
        color: var(--gray-500) !important;
    }

    /* Tool icon wrapper. undo, redo... */
    #docs-toolbar-wrapper {
        background-color: var(--gray-300) !important;
        border-top: 1px solid var(--gray-400) !important;
        border-bottom: 1px solid var(--gray-400) !important;
    }

    /* Tool icons, undo, redo... */
    .goog-toolbar-button-inner-box,
    .goog-color-menu-button-indicator {
        background-color: var(--gray-100) !important;
        filter: invert(100%) !important;
    }

    .docs-toolbar-small-separator,
    .goog-toolbar-separator {
        border: 1px solid var(--gray-400) !important;
        background-color: var(--gray-400) !important;
    }

    .docs-icon-mode-edit {
        filter: invert(100%) !important;
    }

    .docs-icon-bold {
        filter: invert(100%) !important;
    }

    .docs-icon-bold {
        filter: none !important;
    }

    .goog-toolbar-button-checked > div > div > div,
    .goog-toolbar-button-active > div > div > div {
        filter: invert(100%) !important;
    }

    .goog-toolbar-toggle-button,
    .goog-toolbar-button {
        background-color: var(--gray-400) !important;
    }

    .goog-toolbar-select {
        background-color: var(--gray-400) !important;
    }

    .goog-toolbar-menu-button {
        background-color: var(--gray-400) !important;
    }

    .goog-toolbar-menu-button-arrow-hidden {
        background-color: var(--gray-400) !important;
    }

    .docs-icon-line-spacing {
        filter: invert(100%) !important;
    }

    .docs-icon-image-type {
        filter: invert(100%) !important;
    }

    .goog-toolbar-menu-button-open > div > div > div > div > .docs-icon-line-spacing,
    .goog-toolbar-menu-button-open > div > div > div > div > .docs-icon-image-type {
        filter: none !important;
    }

    .goog-toolbar-menu-button-hover > div > div > div > div > .docs-icon-line-spacing {
        filter: none !important;
    }

    /* Combo box input backgrounds*/
    .goog-toolbar-combo-button-caption {
        background-color: var(--gray-400) !important;
        color: var(--white-200) !important;
    }

    .goog-toolbar-menu-button-caption {
        background-color: var(--gray-400) !important;
        color: var(--white-200) !important;
        text-align: center !important;
    }

    .goog-toolbar-menu-button-open > div > div > div > div > div > div {
        filter: invert(100%) !important;
    }

    /* Combo boxes, zoom, image format... */
    #docs-toolbar-wrapper > .goog-inline-block {
        background-color: var(--gray-50) !important;
    }

    /* Background for large combo boxes */
    .goog-toolbar-combo-button {
        background-color: var(--gray-400) !important;
    }

    /* Combo box inputs */
    .goog-toolbar-combo-button-input {
        color: var(--white-200) !important;
    }

    .goog-toolbar-combo-button-open > div > div > div > input {
        color: var(--white-200) !important;
        background-color: var(--gray-200) !important;
    }

    /* Drop down labels */
    .goog-menu.goog-menu-vertical.goog-menu-noaccel > .goog-menuitem > .goog-menuitem-label {
        color: var(--white-100) !important;
    }

    /* Last edited message */
    .docs-title-save-label-text {
        color: #4f8242 !important;
    }

    /* Background of the pages */
    .kix-appview-editor {
        background-color: var(--gray-300) !important;
    }

    /* Toggleable sidebar RIGHT */
    .companion-app-switcher-container,
    .docs-companion-app-switcher-container {
        background-color: var(--gray-200) !important;
        border: none !important;
    }

    /* Toggeable sidebar RIGHT icons */
    .app-switcher-button-icon-container {
        background-color: var(--gray-150) !important;
    }

    /* Explore sidebar RIGHT */
    .docs-explore-sidebar {
        background-color: var(--gray-400) !important;
    }

    .docs-explore-sidebar > * {
        background-color: var(--gray-400) !important;
        color: var(--white-100) !important;
    }

    .docs-explore-sidebar-title {
        border-top: 1px solid var(--gray-400);
        border-color: var(--gray-500) !important;
    }

    .docs-explore-searchbar-labelinput,
    .docs-explore-searchbar-ac-row {
        background-color: var(--gray-400) !important;
        color: var(--white-100) !important;
    }

    .docs-explore-emptylist-title {
        color: var(--white-100) !important;
    }

    /* Right side scrollbar */
    .docs-gm-sidebars ::-webkit-scrollbar-thumb {
        background-color: var(--gray-400) !important;
    }

    /* Rulers */
    .docs-ruler {
        background-color: var(--gray-200) !important;
        border-bottom: 1px solid var(--gray-400) !important;
    }

    .docs-vertical-ruler {
        border-right: 1px solid var(--gray-400) !important;
    }

    .docs-ruler-face {
        background-color: var(--gray-100) !important;
    }

    .docs-ruler-face-minor-division,
    .docs-ruler-face-major-division {
        background-color: var(--gray-500) !important;
    }

    .docs-ruler-face-number {
        color: var(--gray-500) !important;
    }

    /* Bottom left explore icon */
    .docs-explore-widg...