stylus.gsuite_darkmode.css

/* Stylus - Google G Suite dark mode */

/* Get Stylus extension for your browser:
 * https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?pli=1
 * https://addons.mozilla.org/en-US/firefox/addon/styl-us/
 */

/* Create a style, appling to:
 * URLs matching the regexp: https://(drive|docs).google.com/.*
 */


/* Invert everything */
:root,
/* Then un-invert the following so they are normal... */
img,
/* Top left icon. */
#docs-drive-logo,
/* Right bar icons to other gsuite stuff. */
#docs-branding-logo,
.app-switcher-button-icon-container,
/* iframe. This includes Drawing editor (page inside the frame has this css applied too). */
iframe,
/* Invert link previews back. This applies when you hover a youtube chip. */
div.docs-link-bubble-card,
div.docs-icon-img {
    /* Invert and rotate hues, so reds stay red. Just inverting black & white. */
    /* Like invert, hue-rotate-180 twice is a no-op. */
    filter: invert(100%) hue-rotate(180deg);
}

/* Docs modal
 * Pop up backgrounds originaly make the lower layer darker.
 * Inverting them makes it lighter.
 * Make popup backgrounds darker again (more bright + invert = less bright).
 *
 * (Doesn't work for drive modal)
 */
.modal-dialog-bg {
    filter: invert(100%) brightness(200%);
}