☰

[Main] Google Docs Dark Mode

Google Docs Dark Mode - Main

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

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