☰

[Main] Google Docs Dark Mode

Google Docs Dark Mode - Main

目前为 2022-03-11 提交的版本。查看 最新版本。

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