GDOC & GSHEET DARK THEME
GDOC_DARK by dec-iade
Details
Authordec-iade
LicenseNo License
Categorygdoc
Created
Updated
Size15 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name GDOC_DARK
@namespace https://github.com/DEC-IADe
@description GDOC Dark mode
@author IADe (https://github.com/DEC-IADe)
@version 1.0.0
@license Open Source
==/UserStyle== */
/* adegard 2021
Stylus_GDOC_GSHEET_DARK_MODE.css
***
This code allows to switch google doc&sheet in Dark Mode to save your eyes.
***
It can be installed with Stylus Chrome extension.
https://userstyles.world/style/279/gdoc-dark
*/
/* Sheet color */
@-moz-document url-prefix("https://docs.google.com/") {
:root {
--gray-50: #dddddd;
--gray-100: #bdbdbd;
--gray-150: #646464;
--gray-200: #555555;
--gray-300: #373434;
--gray-400: var(--gray-600);
--gray-500: #1C1C1C;
/*USED FOR BACKGROUND*/
--gray-600: #1d2023;
/*USED FOR FONT*/
--white-100: #98b3b4;
--white-200: #ededed;
--white-300: #e3e3e3;
}
/* Pop up windows */
.docs-docos-activitybox,
.docos-streampane-content,
.docos-streampane-header {
background-color: var(--gray-300) !important;
border-color: var(--gray-300) !important;
}
/* Menu searching when toolbar is hidden */
.docs-omnibox-input {
background-color: var(--gray-300) !important;
border: 1px solid var(--gray-400) !important;
color: var(--white-100) !important;
}
.docs-omnibox-input::placeholder {
color: var(--white-100) !important;
}
.ac-renderer {
background-color: var(--gray-300) !important;
}
.ac-active {
background-color: var(--gray-100) !important;
}
.ac-row > div > div > .docs-icon {
background-color: transparent !important;
}
/* Menus for different toolbar options */
.goog-menu,
.goog-menuitem {
background-color: var(--gray-400) !important;
color: var(--white-100) !important;
}
.goog-menuitem-highlight > *,
.goog-option > * {
color: var(--white-100) !important;
font-weight: bold !important;
}
/* Icons for some toolbar options */
.goog-menuitem-icon {
background-color: var(--gray-50) !important;
border-radius: 2px !important;
}
/* Navigation tab LEFT */
.docs-navigation-tab-button {
background-color: var(--gray-100) !important;
border-color: var(--white-100) !important;
filter: invert(100%) !important;
}
.docs-ruler-mask {
background-color: #1e2642 !important;
}
/* Navigation tab expanded */
.navigation-widget {
background-color: var(--gray-400) !important;
}
#navigation-widget-hat-list-icon {
background-color: var(--gray-100) !important;
border-radius: 3px;
}
.navigation-widget-hat-title,
.navigation-item-content {
color: var(--white-100) !important;
}
.goog-button-hover > * {
color: var(--gray-400) !important;
font-weight: bold !important;
background-color: var(--gray-150) !important;
}
.navigation-widget-hat-close-button-icon {
background-color: var(--gray-50);
border-radius: 50%;
}
/* Top toolbar with File, Edit.. options */
#docs-chrome {
background-color: var(--gray-400) !important;
}
/* Share, user pic.. wrapper */
.docs-titlebar-buttons {
background-color: var(--gray-400) !important;
}
/* Comment button */
#docs-docos-commentsbutton {
background-color: var(--gray-100) !important;
filter: invert(100%) !important;
}
.jfk-button-checked > .docs-icon,
.jfk-button-active > .docs-icon {
filter: invert(100%) !important;
}
.docs-docos-activitybox {
background-color: var(--gray-300) !important;
}
.docos-new-comment-button {
height: auto !important;
background-color: var(--gray-400) !important;
}
.goog-flat-menu-button {
background-color: var(--gray-400) !important;
}
.docos-ns-caption-text {
color: var(--white-100);
}
/* The input for the document title */
.docs-title-input,
.docs-title-input-label {
background-color: var(--gray-500) !important;
color: #e8d58e !important;
}
.docs-title-input:hover {
border-color: transparent !important;
}
/* Add to Drive icon next to input for document title*/
#docs-folder {
filter: brightness(1.5) !important;
}
/* The star for saving the doc as favorite */
#docs-star {
background-color: var(--gray-500);
border-radius: 5px;
}
/* The File, Edit.. options */
.menu-button {
color: #7b9ad7 !important;
}
.goog-control-hover,
.goog-control-open {
color: var(--gray-500) !important;
}
/* Tool icon wrapper. undo, redo... */
#docs-toolbar-wrapper {
background-color: var(--gray-300) !important;
border-top: 1px solid var(--gray-400) !important;
border-bottom: 1px solid var(--gray-400) !important;
}
/* Tool icons, undo, redo... */
.goog-toolbar-button-inner-box,
.goog-color-menu-button-indicator {
background-color: var(--gray-100) !important;
filter: invert(100%) !important;
}
.docs-toolbar-small-separator,
.goog-toolbar-separator {
border: 1px solid var(--gray-400) !important;
background-color: var(--gray-400) !important;
}
.docs-icon-mode-edit {
filter: invert(100%) !important;
}
.docs-icon-bold {
filter: invert(100%) !important;
}
.docs-icon-bold {
filter: none !important;
}
.goog-toolbar-button-checked > div > div > div,
.goog-toolbar-button-active > div > div > div {
filter: invert(100%) !important;
}
.goog-toolbar-toggle-button,
.goog-toolbar-button {
background-color: var(--gray-400) !important;
}
.goog-toolbar-select {
background-color: var(--gray-400) !important;
}
.goog-toolbar-menu-button {
background-color: var(--gray-400) !important;
}
.goog-toolbar-menu-button-arrow-hidden {
background-color: var(--gray-400) !important;
}
.docs-icon-line-spacing {
filter: invert(100%) !important;
}
.docs-icon-image-type {
filter: invert(100%) !important;
}
.goog-toolbar-menu-button-open > div > div > div > div > .docs-icon-line-spacing,
.goog-toolbar-menu-button-open > div > div > div > div > .docs-icon-image-type {
filter: none !important;
}
.goog-toolbar-menu-button-hover > div > div > div > div > .docs-icon-line-spacing {
filter: none !important;
}
/* Combo box input backgrounds*/
.goog-toolbar-combo-button-caption {
background-color: var(--gray-400) !important;
color: var(--white-200) !important;
}
.goog-toolbar-menu-button-caption {
background-color: var(--gray-400) !important;
color: var(--white-200) !important;
text-align: center !important;
}
.goog-toolbar-menu-button-open > div > div > div > div > div > div {
filter: invert(100%) !important;
}
/* Combo boxes, zoom, image format... */
#docs-toolbar-wrapper > .goog-inline-block {
background-color: var(--gray-50) !important;
}
/* Background for large combo boxes */
.goog-toolbar-combo-button {
background-color: var(--gray-400) !important;
}
/* Combo box inputs */
.goog-toolbar-combo-button-input {
color: var(--white-200) !important;
}
.goog-toolbar-combo-button-open > div > div > div > input {
color: var(--white-200) !important;
background-color: var(--gray-200) !important;
}
/* Drop down labels */
.goog-menu.goog-menu-vertical.goog-menu-noaccel > .goog-menuitem > .goog-menuitem-label {
color: var(--white-100) !important;
}
/* Last edited message */
.docs-title-save-label-text {
color: #4f8242 !important;
}
/* Background of the pages */
.kix-appview-editor {
background-color: var(--gray-300) !important;
}
/* Toggleable sidebar RIGHT */
.companion-app-switcher-container,
.docs-companion-app-switcher-container {
background-color: var(--gray-200) !important;
border: none !important;
}
/* Toggeable sidebar RIGHT icons */
.app-switcher-button-icon-container {
background-color: var(--gray-150) !important;
}
/* Explore sidebar RIGHT */
.docs-explore-sidebar {
background-color: var(--gray-400) !important;
}
.docs-explore-sidebar > * {
background-color: var(--gray-400) !important;
color: var(--white-100) !important;
}
.docs-explore-sidebar-title {
border-top: 1px solid var(--gray-400);
border-color: var(--gray-500) !important;
}
.docs-explore-searchbar-labelinput,
.docs-explore-searchbar-ac-row {
background-color: var(--gray-400) !important;
color: var(--white-100) !important;
}
.docs-explore-emptylist-title {
color: var(--white-100) !important;
}
/* Right side scrollbar */
.docs-gm-sidebars ::-webkit-scrollbar-thumb {
background-color: var(--gray-400) !important;
}
/* Rulers */
.docs-ruler {
background-color: var(--gray-200) !important;
border-bottom: 1px solid var(--gray-400) !important;
}
.docs-vertical-ruler {
border-right: 1px solid var(--gray-400) !important;
}
.docs-ruler-face {
background-color: var(--gray-100) !important;
}
.docs-ruler-face-minor-division,
.docs-ruler-face-major-division {
background-color: var(--gray-500) !important;
}
.docs-ruler-face-number {
color: var(--gray-500) !important;
}
/* Bottom left explore icon */
.docs-explore-widg...