☰

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