Modern Dark Mode for Google Docs. This is (probably) the most up-to-date dark mode for Google Docs out there right now.
Google Docs Customizations by vivianemallow
Details
Authorvivianemallow
LicenseNo License
Categorydocs.google.com
Created
Updated
Size35 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
There are still a few issues, but we're always working to fix them. If you find an issue, let us know and we'll try to fix it as soon as possible!
Google has an annoying habit of changing their stylesheets and class names, which breaks most dark modes. Considering how we use this ourselves, we're going to try to keep up
Includes source code from a few other projects to fix a few issues. This allows us to have the best experience to provide to our users
Created by Psychon Development Studios
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Google Docs Dark Mode
@namespace docs.google.com
@version 1.1.5
@description Darkens the UI and fixes a few issues. Includes source code from a few other projects to fix a few issues
@author psychonnight
==/UserStyle== */
/* This sheet MUST be enabled if you're using the Google Docs Dark UI or display is unordered! */
/* In addition, this file implements a few customizations not found in the Google Docs Dark UI file */
@-moz-document url-prefix("https://docs.google.com/") {
:root {
/* Custom backgrounds */
--bw: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
--default: #eceaea;
--dark: #2b2b2b;
--rainbow: linear-gradient(90deg, rgba(168,0,0,1) 0%, rgba(154,137,0,1) 25%, rgba(0,153,56,1) 50%, rgba(24,0,149,1) 75%, rgba(128,0,101,1) 100%);
--hunter: url("https://psychon-night.github.io/network-fs/allRightsReserved/hunter.gif");
--hunterGrave: url("https://psychon-night.github.io/network-fs/allRightsReserved/hunterGrave.gif");
--ranbooSpinny: url("https://psychon-night.github.io/network-fs/allRightsReserved/ranbooChairSpinny.gif");
/* Which one of the above values should the background be? */
--background: var(--dark);
}
/* Document UI (Basic) */
.docs-text-ui-cursor-blink {
animation: none !important;
}
.docs-text-ui-cursor-blink {
animation: none !important;
}
.kix-appview-editor {
background: var(--background)!important;
background-size: 11%!important;
background-repeat: repeat!important;
}
@keyframes rainbowlogo {
0% {filter: hue-rotate(0deg)}
10% {filter: hue-rotate(36deg)}
20% {filter: hue-rotate(72deg)}
30% {filter: hue-rotate(180deg)}
40% {filter: hue-rotate(144deg)}
50% {filter: hue-rotate(180deg)}
60% {filter: hue-rotate(216deg)}
70% {filter: hue-rotate(252deg)}
80% {filter: hue-rotate(288deg)}
90% {filter: hue-rotate(384deg)}
100% {filter: hue-rotate(360deg)}
}
/* Animations */
@keyframes rainbow {
0% {border-color: #ff000075;;}
15% {border-color: #ffa500ba;}
30% {border-color: #ffe13587;}
45% {border-color: #0080009c;}
60% {border-color: #87ceeb9e;}
80% {border-color: #80008099;}
100% {border-color: #e30b5ca1;}
}
@keyframes backgroundFadeEffect {
0% {background: #2b2b2b}
50% {background: #3c3b3b}
90% {background: #2b2b2b}
100% {background: #363636}
}
@keyframes spin {
0% {transform: rotate(0deg);left:0px;}
20% {transform: rotate(0deg);left:0px;}
80% {transform: rotate(-360deg);left:0px;}
100% {transform: rotate(-360deg);left:0px;}
}
@keyframes rainbowSpin {
0% {
border-color: red;
transform: rotate(-360deg);left:0px;
}
15% {border-color: #ffa500b0;}
30% {border-color: #bfa822c2;}
45% {border-color: #008000c9;}
50% {transform: rotate(0deg);left:0px}
60% {border-color: #add8e6c2;}
80% {border-color: #800080b0;}
100% {
border-color: #e30b5cba;
transform: rotate(-360deg);left:0px;
}
}
@keyframes darkStatic {
0% {border-color: #2b2b2b}
100% {border-color: #2b2b2b}
}
#docs-branding-logo,.jfk-butterBar-warning {
animation-name:rainbowlogo!important;
animation-duration:10s!important;
animation-iteration-count:infinite!important;
}
/* Overwriting default styles */
.kix-cursor-caret[style*="rgb(0, 0, 0)"] {
border-width: 6px;
animation-name: rainbow;
animation-duration: 5s;
animation-iteration-count: infinite;
transition: all 1s ease-out;
}
.kix-cursor-caret[style*="rgb(0, 0, 0)"]:hover {
border-width: 15px;
animation: rainbow;
animation-duration: 8s;
animation-iteration-count: infinite;
cursor: none;
}
.docs-companion-app-switcher-container, .docs-explore-widget-button, .docs-activity-indicator-container, .kix-document-top-shadow, #docs-editor{
z-index: 0;
position: absolute;
}
.goog-flat-menu-button,.goog-tab {
background: var(--dark)!important;
border: #444 1px solid;
}
.goog-tab-selected, .goog-tab-hover, selected .goog-tab-hover, .goog-tab-bar-top .goog-tab-selected, div #pub-dialog-link-tab, .pub-dialog-tab.goog-tab.goog-tab-selected.goog-tab-hover, div #pub-dialog-embed-tab .pub-dialog-tab.goog-tab.goog-tab-selected.goog-tab-hover, div #pub-dialog-embed-tab .pub-dialog-tab, .goog-tab, .goog-tab-selected, .goog-tab-hover, div #pub-dialog-publish-button .goog-inline-block, .jfk-button, .jfk-button-standard, .jfk-button-hover {
background: #3e3e3e!important
}
.docs-printpreview-toolbar {
border:none;
}
.docs-hs-tmp-sch, .docs-hs-tmp-sch-content, .docs-hs-tmp-sch-ns, .docs-hs-tmp-contractedcontentholder, .docs-hs-overflow {
background: #36393F!important;
}
.docs-hs-tmp-contractedheader-text, .docs-homescreen-templates-templateview-title, #\32 orkew\:1wf\.contentEl .kix-pagesetupdialog-canvas-description-text, .goog-tab, div .docs-icon-img-container.docs-icon-img.docs-zippy-closed,div #pub-dialog-settings-header .pub-dialog-zippy-header, .goog-zippy-header, .goog-zippy-expanded {
color: white!important;
}
.docs-homescreen-templates-templateview-style, .docs-details-value, .docs-details-field {
color:lightgray!important
}
.docs-homescreen-list-header, .docs-homescreen-list-header, .docs-homescreen-list-container-vertical, .docs-material-button.docs-material-button-focused.docs-material-button-no-focus-border{
background: #36393F!important;
fill: #36393F!important
}
.docs-homescreen-list-item {
transition-duration: 1s
}
.modal-dialog-title-close {
fill:white!important;
}
.docs-homescreen-list-item:hover {
box-shadow: 0px 5px 15px #7289DA;
transition-duration: 1s
}
/* Makes popups dark */
.modal-dialog, .docs-dialog, .docs-preferencesdialog-modal { /* Background */
background-color: var(--dark)!important;
opacity: 100%;
}
.modal-dialog-title, .modal-dialog-title-draggable { /* Titlebar */
background-color: var(--dark)!important;
}
/* Content */
.docs-preferencesdialog-tabbed-menu-tabbar, .docs-preferencesdialog-tabbed-menu-tabbar-horizontal, .docs-preferencesdialog-tabbed-menu-tabbar-top, .docs-preferencesdialog-tabbed-menu-tabbar-active, .docs-preferencesdialog-submenu-container, .docs-preferencesdialog-list-body, .docs-preferencesdialog-input, .jfk-textinput, .docs-tabbar-tablabel, .kix-documentmetricsdialog-row, .kix-documentmetricsdialog-counts, .kix-documentmetricsdialog-control, .kix-documentmetricsdialog-lastrow, .modal-dialog-content, .docs-docos-activitybox-inner, .docos-streampane-header.docos-streampane-header-round-top-corners, .docos-comment-text.docos-comment-header-title, #docos-stream-view, .docos.docos-stream-view.docos-stream-view-height.docs-gm, .docos.docos-stream-view.docos-stream-view-height.docs-gm, .docs-printpreview-toolbar {
background-color: var(--dark)!important;
fill: var(--dark)!important;
color: white!important;
}
.docs-material-gm-checkbox-checked {
background: #7289DA!important;
}
/* Fix broken borders */
.goog-toolbar-combo-button-input, .jfk-textinput {
border: 1px solid white!important;
}
.kix-canvas-tile-content, .docs-material-gm-dialog {
filter:invert(0.9)
}
.kix-canvas-tile-content image {
filter:invert(1)
}
}
/* Additional dark mode stuff from a different project, used as a base */
@-moz-document domain("docs.google.com") {
.docs-homescreen-floater-header, .docs-homescreen-list-header, .goog-menuitem-highlight .goog-menuitem-content, .goog-option-selected .goog-menuitem-content, .yn-wq-hc.yn-Th-bj, .a-Yh.a-Yh-w > div, .Wi-Gi-Kc.Wi-Mj-Hi, .qj-Rl-cb, .gb_je.gb_ee, .docs-title-input-label.docs-title-untitled, .menu-button.goog-control.goog-inline-block:hover, .docs-homescreen-leftmenu-hidefocusfeedback .docs-homescreen-leftmenu-menuitem:hover, .docs-menubar .goog-control-open, .jfk-button.docs-submenuitem-splitbutton:hover, .jfk-button-standard.jfk-button-clear-outline.jfk-button-checked, .goog-menuitem.apps-menuitem.goog-submenu.goog-submenu-open.goog-menuitem-highlight .goog-submenu-arrow, .docs-sheet-active-tab, #t-formula-bar-input > .cell-input, .goog-menuitem.goog-submenu.goog-submenu-open.goog-menuitem-highlight .goog-submenu-arrow, .docs-title-input-label, .csogb-personal, .waffle-assistant-entry-opened .waffle-assistant-entry-label, .gb_Re.gb_9e .gb_af, .gb_sf.gb_mf .gb_af, .gb_ne.gb_ie, .gb_Ta svg, .gb_mc svg .gb_bf, .gb_Se.gb_af .gb_bf, .gb_Se.gb_af button svg, .docs-revisions-sidebar-date-group, .docs-revisions-authorwidget-hat, .gb_je.gb_oe, .gb_Te.gb_bf button svg, .gb_Te.gb_bf .gb_cf, .docs-homescreen-gb-container header > div:nth-child(2) svg, .docs-homescreen-gb-container header > div:nth-child(2) form input, .Mf-If-tc, .Mf-ml-Zb-Cf-Yb-wj .a-Cf, .docs-revisions-sidebar, .errorMessage, .docs-gm-sidebars .docs-revisions-chromecover-content-color-default, .docs-gm-sidebars .docs-revisions-sidebar-header, .docs-homescreen-gb-container header > div:nth-child(2) span, header > div:nth-child(2) > div:nth-child(n-2) > a, .docs-homescreen-grid-item-title, .docs-gm-sidebars .docs-explore-sidebar-title, .docs-gm-sidebars .docs-explore-emptylist-title, .docs-explore-searchbar-labelinput, .docos, .docs-gm-sidebars .navigation-widget-hat-title, .docs-gm-sidebars .navigation-item[class*="navigation-item-"], [class*="gb_4d gb_"], .kix-wordhtmlgenerator-word-node, .navigation-widget-hat-title, .simple-sharing-link-heading, .modal-dialog-title-text, .simple-sharing-people-heading, .simple-sharing-manage-permissions-link, .toggle-link-label, .docs...