Skip to content

Docs Darkish by dnm1008

Screenshot of Docs Darkish
Write a review Install Get Stylus

Details

Authordnm1008

LicenseNo License

Categorydocs.google.com

Created

Updated

Size167 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

UI experiment

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Dark Docs
@version      2022.10.20
@namespace    userstyles.world/user/winghongchan
@description  A dark theme for Google Docs web, based on the colors used in its mobile app.
@author       winghongchan
@license      No License
@preprocessor less
@var          select document-filter "Document filter" {"none:None": "none", "dim:Dim": "contrast(80%) brightness(90%)", "invert:Invert*": "var(--darkfilter)"}
==/UserStyle== */

@-moz-document url-prefix("https://docs.google.com/document/d/"), url-prefix("https://docs.google.com/document/u/"), url-prefix("https://docs.google.com/sharing/driveshare"), url-prefix("https://docs.google.com/sharing/boq/driveshare"), url-prefix("https://docs.google.com/picker/v2/home?req=%5B%22ireq%22%2C%5Bnull%2C%5B%5B1%5D%2C%5B%5D%2C%5B%5D%2C%5B%5D%2C%"), url-prefix("https://docs.google.com/picker/v2/home?req=%5B%22ireq%22%2C%5Bnull%2C%5B%5B1%2C6%5D%2C%5B%5D%2C%5B%5D%2C%5B%5D%2C%5B2048%2C2048%5D%5D%2C%5B1%5D%2Cnull%2Cnull%2C%5B"), regexp("(https:\\/\\/meet.google.com\\/_\\/frame\\?authUser=\\d+&frameType=2&origin=https%3A%2F%2Fdocs.google.com#cb=pip_frame)") {
/* Colors and Animations */
  :root {
    --palerblue: #8AB4F8; /* For blue text, icons, nearby items that need to be paleblue, and paleblue buttons on hover. */
    --paleblue:#8bd5ca; /* For blue buttons and other wider areas of paleblue. */
    --red: #ed8796;
    --blue-ripple: #181926; /* Background color to indicate that something is active (toggled on or being clicked, for example). */
    --paleblue-icons: hue-rotate(3.6deg) saturate(32.2%) brightness(170%); /* To desaturate blue icons to make them more legible against a dark background. If it is an inline SVG, changing its fill color to palerblue is preferable. */
    --palergreen: #a6da95; /* Mostly for suggesting mode. */
    --green-ripple: #37493F;
    --palegreen-icons: hue-rotate(-2deg) saturate(38%) brightness(182%);
    --paleyellow: #eed49f; /* Mostly for comments. */
    --yellow-ripple: #454134;
    --lightestgray: #cad3f5; /* For slightly less prominent text than white text. */
    --lightergray: #a5adcb;
    --lightgray: #939ab7;
    --gray: #6e738d;
    --mediumdarkgray: #5b6078;
    --darkgray: #494d64; /* Multiple purposes, like outlining dialog boxes to make them separate from what's behind them. */
    --darkergray: #363a4f; /* Presumably for popups */
    --darkestgray: #181926; /* For backgrounds. */
    --white-icons: brightness(240%) saturate(10%);
    --darkfilter: invert(100%) hue-rotate(180deg) contrast(80%);
    --on: background-color 0.05s ease, border-color 0.06s ease, color 0.05s ease, filter 0.05s ease;
    --off: background-color 0.25s ease, border-color 0.1s ease, color 0.25s ease, filter 0.25s ease;
  }
}

@-moz-document url-prefix("https://docs.google.com/document/d/"), url-prefix("https://docs.google.com/sharing/driveshare"), url-prefix("https://docs.google.com/document/u/") {
/* Basic elements */

  body {
    background-color: var(--darkestgray);
    color: var(--lightestgray);
  }

  /* Scrollbar */
  .docs-gm ::-webkit-scrollbar-thumb {
    background-color: var(--lightgray);
  }

  /* BUTTONS */

  /* Filled */
  .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-disabled,
  .docs-gm .modal-dialog .goog-buttonset-action[disabled],
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-disabled,
  .docs-gm .docs-material-bubble .jfk-button-action.jfk-button-disabled {
    background-color: var(--darkgray) !important;
    border-color: var(--darkgray) !important;
    color: var(--darkestgray) !important;
    opacity: 100%;
    transition: var(--off);
  }
  .analytics-btn-fill.jfk-button,
  .docos.docs-gm .jfk-button.jfk-button-action,
  .docs-material-button-fill-primary.docs-material-button,
  .docs-gm #docs-titlebar-share-client-button .jfk-button,
  .docs-gm .modal-dialog .goog-buttonset-action,
  .docs-gm .modal-dialog .jfk-button-action,
  .docs-gm .docs-material-bubble .jfk-button-action,
  .GmFillButton:not(:disabled) {
    background-color: var(--red);
    color: black;
    transition: var(--off);
  }
  .analytics-btn-fill.jfk-button.jfk-button-hover,
  .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-hover,
  .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-focused,
  .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-hover.jfk-button-focused,
  .docs-gm #docs-titlebar-share-client-button .jfk-button.jfk-button-hover,
  .docs-gm #docs-titlebar-share-client-button .jfk-button:focus,
  .docs-gm #docs-titlebar-share-client-button .jfk-button.jfk-button-hover:focus,
  .docs-gm .modal-dialog .goog-buttonset-action:hover:focus,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-hover.jfk-button-focused,
  .docs-gm .modal-dialog .goog-buttonset-action:focus,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-focused,
  .docs-gm .modal-dialog .goog-buttonset-action:hover,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-hover,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-hover,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-focused,
  .docs-material-button-fill-primary.docs-material-button-hover,
  .docs-material-button-fill-primary.docs-material-button-focused.docs-material-button-no-focus-border,
  .docs-material-button-fill-primary.docs-material-button-hover.docs-material-button-focused {
    background-color: var(--red);
    color: black;
    transition: var(--on);
  }
  .analytics-btn-fill.jfk-button.jfk-button-focused.jfk-button-active,
  .docos.docs-gm .jfk-button.jfk-button-action.jfk-button-focused.jfk-button-active,
  .docs-gm #docs-titlebar-share-client-button .jfk-button.jfk-button-focused.jfk-button-active,
  .docs-gm .modal-dialog .goog-buttonset-action:active,
  .docs-gm .modal-dialog .goog-buttonset-action:focus:active,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-active,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-focus.jfk-button-active,
  .docs-gm .docs-material-bubble .jfk-button-action.jfk-button-active,
  .docs-gm .docs-material-bubble .jfk-button-action.jfk-button-focus.jfk-button-active,
  .docs-gm .modal-dialog .jfk-button-action.jfk-button-hover.jfk-button-focused,
  .docs-material-button-fill-primary.docs-material-button-focused.docs-material-button-active {
    background-color: var(--palerblue);
    color: var(--blue-ripple);
  }

  /* Outlined */
  .docs-gm .modal-dialog button[disabled],
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-disabled {
    background-color: var(--darkestgray);
    border-color: var(--darkgray) !important;
    color: var(--darkgray);
    opacity: 100% !important;
    transition: var(--off);
  }
  .analytics-btn-hairline.jfk-button,
  .docs-checkupdialog-button-ignore.docs-material-button-hairline-default.docs-material-button,
  .docs-contentembedding-sidebar-zero-state .docs-contentembedding-sidebar-zero-state-button,
  .docos.docs-gm .jfk-button.jfk-button-standard,
  .docs-gm .docs-image-effect-adjustment-reset-button.jfk-button-standard,
  .docs-gm .modal-dialog button,
  .docs-gm .modal-dialog .jfk-button-standard,
  .docs-material-button-hairline-primary.docs-material-button {
    background-color: transparent;
    border-color: var(--darkgray) !important;
    color: var(--palerblue);
    transition: var(--off);
  }
  .analytics-btn-hairline.jfk-button.jfk-button-hover,
  .docs-checkupdialog-button-ignore.docs-material-button-hairline-default.docs-material-button-hover,
  .docs-checkupdialog-button-ignore.docs-material-button-hairline-default.docs-material-button-focus,
  .docs-contentembedding-sidebar-zero-state .docs-contentembedding-sidebar-zero-state-button:hover,
  .docs-contentembedding-sidebar-zero-state .docs-contentembedding-sidebar-zero-state-button:focus,
  .docs-gm .docs-image-effect-adjustment-reset-button.jfk-button-hover,
  .docs-gm .docs-image-effect-adjustment-reset-button.jfk-button-hover:focus,
  .docs-gm .modal-dialog button:focus,
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-focused,
  .docs-gm .modal-dialog button:hover,
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-hover,
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-focused,
  .docs-gm .modal-dialog button:hover:focus,
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-hover.jfk-button-focused,
  .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-hover,
  .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-focused,
  .docs-material-button-hairline-primary.docs-material-button-hover,
  .docs-material-button-hairline-primary.docs-material-button-focused,
  .docs-material-button-hairline-primary.docs-material-button-hover.docs-material-button-focused,
  .docs-material-button-hairline-primary.docs-material-button-focused.docs-material-button-no-focus-border {
    background-color: var(--darkgray);
    border-color: var(--darkgray) !important;
    transition: var(--on);
  }
  .analytics-btn-hairline.jfk-button.jfk-button-hover.jfk-button-active,
  .docs-checkupdialog-button-ignore.docs-material-button-hairline-default.docs-material-button-active,
  .docs-contentembedding-sidebar-zero-state .docs-contentembedding-sidebar-zero-state-button:active,
  .docs-gm .docs-image-effect-adjustment-reset-button.jfk-button-hover.jfk-button-active,
  .docs-gm .docs-image-effect-adjustment-reset-button.jfk-button-hover.jfk-button-focused.jfk-button-active,
  .docs-gm .modal-dialog button:active,
  .docs-gm .modal-dialog button:focus:active,
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-active,
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-focus.jfk-button-active,
  .docos.docs-gm .jfk-button.jfk-button-standard.jfk-button-focused.jfk-button-hover,
  .docs-gm .modal-dialog .jfk-button-standard.jfk-button-hover.jfk-button-focused,
  .docs-material-button-hairline-primary.docs-material-button-active.docs-material-button-focused {
    background-color: var(--blue-ripple);
    border-color: var(--blue-ripple) !important;
    color: var(...

Reviews

No reviews yet.