☰

[Main] Google Docs Dark Mode

Google Docs Dark Mode - Main

  1. /* ==UserStyle==
  2. @name         [Main] Google Docs Dark Mode
  3. @version      1.4.1
  4. @namespace    theusaf.org
  5. @license      MIT
  6. @description  Google Docs Dark Mode - Main
  7. @author       theusaf
  8. ==/UserStyle== */
  9.  
  10. @-moz-document url-prefix("https://docs.google.com/document") {
  11.  
  12.   /* Custom colors for the dark mode */
  13.  
  14.   :root {
  15.       --gray-50: #dddddd;
  16.       --gray-100: #bdbdbd;
  17.       --gray-150: #646464;
  18.       --gray-200: #555555;
  19.       --gray-300: #444444;
  20.       --gray-400: #313131;
  21.       --gray-500: #1C1C1C;
  22.       --gray-600: #171717;
  23.       --white-100: #f5f5f5;
  24.       --white-200: #ededed;
  25.       --white-300: #e3e3e3;
  26.   }
  27.  
  28.   .modal-dialog-content {
  29.     color: var(--white-200) !important;
  30.   }
  31.  
  32.   /* keyboard shortcuts */
  33.   .apps-shortcutshelpcontentimpl-container {
  34.     background: var(--gray-200) !important;
  35.   }
  36.  
  37.   .apps-navigationwidget-item-hover {
  38.     background: var(--gray-150) !important;
  39.   }
  40.  
  41.   .apps-actiondatawidget-content-element,
  42.   .kix-smart-summary-text-container {
  43.     color: var(--white-200) !important;
  44.   }
  45.  
  46.   .apps-shortcutshelpcontentimpl-dialog-title,
  47.   .apps-navigationwidget-item:not([aria-selected="true"]),
  48.   .apps-actiondatawidget-content-header {
  49.     color: var(--white-300) !important;
  50.   }
  51.  
  52.   .apps-shortcutshelppopup {
  53.     border: 0;
  54.   }
  55.  
  56.   /* page setup fixes */
  57.   .kix-pagesetupdialog-title,
  58.   .kix-pagesetupdialog-orientation-controls,
  59.   .kix-pagesetupdialog-margin-table {
  60.     color: var(--white-100) !important;
  61.   }
  62.  
  63.   /* right button stuff */
  64.   .app-switcher-button-icon {
  65.     fill: var(--white-100);
  66.   }
  67.  
  68.   /* Remove outline gradient */
  69.   #navigation-widget-bottom-fade {
  70.     display: none;
  71.   }
  72.  
  73.   /* Menu item fixes */
  74.   .docs-parent-collections-container-text,
  75.   .ac-highlighted,
  76.   .docs-omnibox-row-content.goog-inline-block {
  77.       color: var(--white-100) !important;
  78.   }
  79.  
  80.   /* Pop up windows */
  81.  
  82.   .docs-docos-activitybox,
  83.   .docos-streampane-content,
  84.   .docos-streampane-header {
  85.       background-color: var(--gray-300) !important;
  86.       border-color: var(--gray-300) !important;
  87.   }
  88.  
  89.   /* Menu searching when toolbar is hidden */
  90.  
  91.   .docs-omnibox-input {
  92.       background-color: var(--gray-300) !important;
  93.       border: 1px solid var(--gray-400) !important;
  94.       color: var(--white-100) !important;
  95.   }
  96.  
  97.   .docs-omnibox-input::placeholder {
  98.       color: var(--white-300) !important;
  99.   }
  100.  
  101.   .ac-renderer {
  102.       background-color: var(--gray-300) !important;
  103.   }
  104.  
  105.   .ac-active {
  106.       background-color: var(--gray-100) !important;
  107.   }
  108.  
  109.   .ac-row>div>div>.docs-icon {
  110.       background-color: transparent !important;
  111.   }
  112.  
  113.   /* Menus for different toolbar options */
  114.  
  115.   .goog-menu,
  116.   .goog-menuitem {
  117.       background-color: var(--gray-400) !important;
  118.       color: var(--white-100) !important;
  119.   }
  120.  
  121.   .ac-active .goog-menu,
  122.   .ac-active .goog-menuitem {
  123.       background-color: var(--gray-100) !important;
  124.   }
  125.  
  126.   .goog-menuitem-highlight>*,
  127.   .goog-option>* {
  128.       color: var(--white-100) !important;
  129.       font-weight: bold !important;
  130.   }
  131.  
  132.   /* Icons for some toolbar options */
  133.  
  134.   .goog-menuitem-icon {
  135.       background-color: var(--gray-50) !important;
  136.       border-radius: 2px !important;
  137.   }
  138.  
  139.   /* Navigation tab LEFT */
  140.  
  141.   .docs-navigation-tab-button {
  142.       background-color: var(--gray-100) !important;
  143.       border-color: var(--white-300) !important;
  144.       filter: invert(100%) !important;
  145.   }
  146.  
  147.   /* Navigation tab expanded */
  148.  
  149.   .navigation-widget {
  150.       background-color: var(--gray-400) !important;
  151.   }
  152.  
  153.   #navigation-widget-hat-list-icon {
  154.       background-color: var(--gray-100) !important;
  155.       border-radius: 3px;
  156.   }
  157.  
  158.   .navigation-widget-hat-title,
  159.   .navigation-item-content {
  160.       color: var(--white-100) !important;
  161.   }
  162.  
  163.   .goog-button-hover>* {
  164.       color: var(--gray-400) !important;
  165.       font-weight: bold !important;
  166.       background-color: var(--gray-150) !important;
  167.   }
  168.  
  169.   .navigation-widget-hat-close-button-icon {
  170.       background-color: var(--gray-50);
  171.       border-radius: 50%;
  172.   }
  173.  
  174.   /* Top toolbar with File, Edit.. options */
  175.  
  176.   #docs-chrome {
  177.       background-color: var(--gray-400) !important;
  178.   }
  179.  
  180.   /* Share, user pic.. wrapper */
  181.  
  182.   .docs-titlebar-buttons {
  183.       background-color: var(--gray-400) !important;
  184.   }
  185.  
  186.   /* Comment button */
  187.  
  188.   #docs-docos-commentsbutton {
  189.       background-color: var(--gray-100) !important;
  190.       filter: invert(100%) !important;
  191.   }
  192.  
  193.   .jfk-button-checked>.docs-icon,
  194.   .jfk-button-active>.docs-icon {
  195.       filter: invert(100%) !important;
  196.   }
  197.  
  198.   .docs-docos-activitybox {
  199.       background-color: var(--gray-300) !important;
  200.   }
  201.  
  202.   .docos-new-comment-button {
  203.       height: auto !important;
  204.       background-color: var(--gray-400) !important;
  205.   }
  206.  
  207.   .goog-flat-menu-button {
  208.       background-color: var(--gray-400) !important;
  209.   }
  210.  
  211.   .docos-ns-caption-text {
  212.       color: var(--white-100);
  213.   }
  214.  
  215.   /* The input for the document title */
  216.  
  217.   .docs-title-input,
  218.   .docs-title-input-label {
  219.       background-color: var(--gray-500) !important;
  220.       color: var(--white-100) !important;
  221.   }
  222.  
  223.   .docs-title-input:hover {
  224.       border-color: transparent !important;
  225.   }
  226.  
  227.   /* Add to Drive icon next to input for document title*/
  228.  
  229.   #docs-folder {
  230.       filter: brightness(1.5) !important;
  231.   }
  232.  
  233.   /* The star for saving the doc as favorite */
  234.  
  235.   #docs-star {
  236.       background-color: var(--gray-500);
  237.       border-radius: 5px;
  238.   }
  239.  
  240.   /* The File, Edit.. options */
  241.  
  242.   .menu-button {
  243.       color: var(--white-200) !important;
  244.   }
  245.  
  246.   .goog-control-hover,
  247.   .goog-control-open {
  248.       color: var(--gray-500) !important;
  249.   }
  250.  
  251.   /* Tool icon wrapper. undo, redo... */
  252.  
  253.   #docs-toolbar-wrapper {
  254.       background-color: var(--gray-300) !important;
  255.       border-top: 1px solid var(--gray-400) !important;
  256.       border-bottom: 1px solid var(--gray-400) !important;
  257.   }
  258.  
  259.   /* Tool icons, undo, redo... */
  260.  
  261.   .goog-toolbar-button-inner-box,
  262.   .goog-color-menu-button-indicator {
  263.       background-color: var(--gray-100) !important;
  264.       filter: invert(100%) !important;
  265.   }
  266.  
  267.   .docs-toolbar-small-separator,
  268.   .goog-toolbar-separator {
  269.       border: 1px solid var(--gray-400) !important;
  270.       background-color: var(--gray-400) !important;
  271.   }
  272.  
  273.   .docs-icon-mode-edit {
  274.       filter: invert(100%) !important;
  275.   }
  276.  
  277.   .docs-icon-bold {
  278.       filter: invert(100%) !important;
  279.   }
  280.  
  281.   .docs-icon-bold {
  282.       filter: none !important;
  283.   }
  284.  
  285.   .goog-toolbar-button-checked>div>div>div,
  286.   .goog-toolbar-button-active>div>div>div {
  287.       filter: invert(100%) !important;
  288.   }
  289.  
  290.   .goog-toolbar-toggle-button,
  291.   .goog-toolbar-button {
  292.       background-color: var(--gray-400) !important;
  293.   }
  294.  
  295.   .goog-toolbar-select {
  296.       background-color: var(--gray-400) !important;
  297.   }
  298.  
  299.   .goog-toolbar-menu-button {
  300.       background-color: var(--gray-400) !important;
  301.   }
  302.  
  303.   .goog-toolbar-menu-button-arrow-hidden {
  304.       background-color: var(--gray-400) !important;
  305.   }
  306.  
  307.   .docs-icon-line-spacing {
  308.       filter: invert(100%) !important;
  309.   }
  310.  
  311.   .docs-icon-image-type {
  312.       filter: invert(100%) !important;
  313.   }
  314.  
  315.   .goog-toolbar-menu-button-open>div>div>div>div>.docs-icon-line-spacing,
  316.   .goog-toolbar-menu-button-open>div>div>div>div>.docs-icon-image-type {
  317.       filter: none !important;
  318.   }
  319.  
  320.   .goog-toolbar-menu-button-hover>div>div>div>div>.docs-icon-line-spacing {
  321.       filter: none !important;
  322.   }
  323.  
  324.   /* Combo box input backgrounds*/
  325.  
  326.   .goog-toolbar-combo-button-caption {
  327.       background-color: var(--gray-400) !important;
  328.       color: var(--white-200) !important;
  329.   }
  330.  
  331.   .goog-toolbar-menu-button-caption {
  332.       background-color: var(--gray-400) !important;
  333.       color: var(--white-200) !important;
  334.       text-align: center !important;
  335.   }
  336.  
  337.   .goog-toolbar-menu-button-open>div>div>div>div>div>div {
  338.       filter: invert(100%) !important;
  339.   }
  340.  
  341.   /* Combo boxes, zoom, image format... */
  342.  
  343.   #docs-toolbar-wrapper>.goog-inline-block {
  344.       background-color: var(--gray-50) !important;
  345.   }
  346.  
  347.   /* Background for large combo boxes */
  348.  
  349.   .goog-toolbar-combo-button {
  350.       background-color: var(--gray-400) !important;
  351.   }
  352.  
  353.   /* Combo box inputs */
  354.  
  355.   .goog-toolbar-combo-button-input {
  356.       color: var(--white-200) !important;
  357.   }
  358.  
  359.   .goog-toolbar-combo-button-open>div>div>div>input {
  360.       color: var(--white-200) !important;
  361.       background-color: var(--gray-200) !important;
  362.   }
  363.  
  364.   /* Drop down labels */
  365.  
  366.   .goog-menu.goog-menu-vertical.goog-menu-noaccel>.goog-menuitem>.goog-menuitem-label {
  367.       color: var(--white-100) !important;
  368.   }
  369.  
  370.   /* Last edited message */
  371.  
  372.   .docs-title-save-label-text {
  373.       color: var(--white-300) !important;
  374.   }
  375.  
  376.   /* Background of the pages */
  377.  
  378.   .kix-appview-editor {
  379.       background-color: var(--gray-300) !important;
  380.   }
  381.  
  382.   /* Toggleable sidebar RIGHT */
  383.  
  384.   .companion-app-switcher-container,
  385.   .docs-companion-app-switcher-container {
  386.       background-color: var(--gray-200) !important;
  387.       border: none !important;
  388.   }
  389.  
  390.   /* Toggeable sidebar RIGHT icons */
  391.  
  392.   .app-switcher-button-icon-container {
  393.       background-color: var(--gray-150) !important;
  394.   }
  395.  
  396.   /* Explore sidebar RIGHT */
  397.  
  398.   .docs-explore-sidebar {
  399.       background-color: var(--gray-400) !important;
  400.   }
  401.  
  402.   .docs-explore-sidebar>* {
  403.       background-color: var(--gray-400) !important;
  404.       color: var(--white-100) !important;
  405.   }
  406.  
  407.   .docs-explore-sidebar-title {
  408.       border-top: 1px solid var(--gray-400);
  409.       border-color: var(--gray-500) !important;
  410.   }
  411.  
  412.   .docs-explore-searchbar-labelinput,
  413.   .docs-explore-searchbar-ac-row {
  414.       background-color: var(--gray-400) !important;
  415.       color: var(--white-100) !important;
  416.   }
  417.  
  418.   .docs-explore-emptylist-title {
  419.       color: var(--white-100) !important;
  420.   }
  421.  
  422.   /* Right side scrollbar */
  423.  
  424.   .docs-gm-sidebars ::-webkit-scrollbar-thumb {
  425.       background-color: var(--gray-400) !important;
  426.   }
  427.  
  428.   /* Rulers */
  429.  
  430.   .docs-ruler {
  431.       background-color: var(--gray-200) !important;
  432.       border-bottom: 1px solid var(--gray-400) !important;
  433.   }
  434.  
  435.   .docs-vertical-ruler {
  436.       border-right: 1px solid var(--gray-400) !important;
  437.   }
  438.  
  439.   .docs-ruler-face {
  440.       background-color: var(--gray-100) !important;
  441.   }
  442.  
  443.   .docs-ruler-face-minor-division,
  444.   .docs-ruler-face-major-division {
  445.       background-color: var(--gray-500) !important;
  446.   }
  447.  
  448.   .docs-ruler-face-number {
  449.       color: var(--gray-500) !important;
  450.   }
  451.  
  452.   /* Bottom left explore icon */
  453.  
  454.   .docs-explore-widget {
  455.       background-color: var(--gray-400) !important;
  456.   }
  457.  
  458.   .docs-explore-icon>svg {
  459.       filter: invert(100%) !important;
  460.   }
  461.  
  462.   .docs-explore-widget-text {
  463.       color: var(--white-100) !important;
  464.   }
  465.  
  466.   /* Edit image options */
  467.  
  468.   .docs-tiled-sidebar,
  469.   .docs-tiled-sidebar>div {
  470.       background-color: var(--gray-400) !important;
  471.   }
  472.  
  473.   .docs-tiled-sidebar-header {
  474.       border-color: var(--gray-400) !important;
  475.   }
  476.  
  477.   .docs-sidebar-header-text {
  478.       color: var(--white-100) !important;
  479.       font-weight: bold !important;
  480.   }
  481.  
  482.   .docs-sidebar-tile-header {
  483.       background-color: var(--gray-300) !important;
  484.       color: var(--white-100) !important;
  485.   }
  486.  
  487.   .docs-sidebar-tile-controls {
  488.       background-color: var(--gray-500) !important;
  489.       color: var(--white-100) !important;
  490.       padding-top: 15px !important;
  491.   }
  492.  
  493.   .docs-material-gm-select-outer-box {
  494.       background-color: var(--gray-400) !important;
  495.       border-color: var(--gray-200) !important;
  496.       color: var(--white-100) !important;
  497.   }
  498.  
  499.   .docs-image-effect-recolor-caption {
  500.       color: var(--white-100) !important;
  501.   }
  502.  
  503.   .docs-sidebar-tile-label {
  504.       color: var(--white-100) !important;
  505.   }
  506.  
  507.   .docs-image-effect-adjustment-reset-button {
  508.       transform: translateX(-50%);
  509.       left: 50%;
  510.       background-color: var(--gray-100) !important;
  511.       border-color: var(--gray-100) !important;
  512.       color: var(--gray-500) !important;
  513.   }
  514.  
  515.   /* Equation toolbar */
  516.  
  517.   #docs-equationtoolbar {
  518.       background-color: var(--gray-200) !important;
  519.       border-bottom: 1px solid var(--gray-400) !important;
  520.   }
  521.  
  522.   #docs-equationtoolbar .goog-toolbar-menu-button,
  523.   #docs-equationtoolbar .goog-toolbar-menu-button-caption {
  524.       background-color: var(--gray-50) !important;
  525.   }
  526.  
  527.   #docs-equationtoolbar .goog-toolbar-button-inner-box {
  528.       background-color: var(--gray-400) !important;
  529.       color: white !important;
  530.       filter: none !important;
  531.   }
  532.  
  533.   .kix-equation-toolbar-palette-icon {
  534.       background-color: var(--gray-100) !important;
  535.       border: 1px solid var(--gray-500) !important;
  536.   }
  537.  
  538.   /* Special character modal */
  539.  
  540.   .modal-dialog,
  541.   .modal-dialog div,
  542.   .modal-dialog input[type="text"] {
  543.       background-color: var(--gray-300) !important;
  544.   }
  545.  
  546.   .modal-dialog input[type="text"] {
  547.       background-color: var(--white-100) !important;
  548.   }
  549.  
  550.   .modal-dialog .goog-flat-button {
  551.       background-color: var(--gray-100) !important;
  552.       border: 1px solid var(--gray-500) !important;
  553.   }
  554.  
  555.   .modal-dialog .modal-dialog-title-text,
  556.   .modal-dialog .goog-flat-menu-button-caption {
  557.       color: var(--white-100) !important;
  558.   }
  559.  
  560.   .modal-dialog .goog-flat-menu-button {
  561.       border-color: var(--gray-500) !important;
  562.   }
  563.  
  564.   /* Word counter */
  565.  
  566.   .kix-documentmetricsdialog-table td {
  567.       color: var(--white-200);
  568.       border-bottom: var(--gray-100) 2px solid;
  569.   }
  570.  
  571.   .docs-material-gm-labeled-checkbox-label {
  572.       color: var(--white-200) !important;
  573.   }
  574.  
  575.   .docs-material-gm-labeled-checkbox-checkbox {
  576.       border-color: var(--gray-100);
  577.   }
  578.  
  579.   .modal-dialog-title-close {
  580.       background-color: var(--gray-50) !important;
  581.   }
  582.  
  583.   .modal-dialog-title-close:hover {
  584.       background-color: var(--white-100);
  585.   }
  586.  
  587.   .kix-documentmetrics-widget {
  588.       border-color: var(--gray-300) !important;
  589.       background-color: var(--gray-500) !important;
  590.   }
  591.  
  592.   .kix-documentmetrics-widget .docs-material-gm-select-outer-box {
  593.       background-color: var(--gray-400) !important;
  594.   }
  595.  
  596.   .docs-material-gm-select-dropdown.docs-gm-arrow.goog-inline-block.docs-material .docs-icon.goog-inline-block {
  597.       background-color: var(--gray-100);
  598.       border-radius: 4px;
  599.   }
  600.  
  601.   .docs-material-gm-select-caption {
  602.       color: var(--white-100) !important;
  603.   }
  604.  
  605.   .kix-documentmetrics-widget {
  606.       box-shadow: 0 2px 6px 2px rgba(255, 255, 255, .1);
  607.   }
  608.  
  609. }