☰

[Main] Google Docs Dark Mode

Google Docs Dark Mode - Main

当前为 2021-11-29 提交的版本，查看 最新版本。

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