A modified version of winghongchan Dark Docs theme and aeoniumsalad docsafterdark theme
Dark Docs Blue by superjk92
Details
Authorsuperjk92
LicenseNo License
Categorydocs.google.com
Created
Updated
Code size515 kB
Code checksum1482e4fb
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 Dark Docs Blue
@version 2025.02.24
@namespace userstyles.world/user/superjk92
@description A modified version of winghongchan Dark Docs theme and aeoniumsalad docsafterdark theme
@author superjk92
@license No License
@preprocessor less
@var select document-filter "Document filter" {"none:None": "none", "dim:Dim": "contrast(80%) brightness(90%)", "invert:Invert*": "var(--darkfilter)"}
==/UserStyle== */
@-moz-document url-prefix("https://docs.google.com/document/d/"),
url-prefix("https://docs.google.com/document/u/"),
url-prefix("https://docs.google.com/sharing/driveshare"),
url-prefix("https://docs.google.com/sharing/boq/driveshare"),
url-prefix("https://docs.google.com/picker/v2/home?req=%5B%22ireq%22%2C%5Bnull%2C%5B%5B1%5D%2C%5B%5D%2C%5B%5D%2C%5B%5D%2C%"),
url-prefix("https://docs.google.com/picker/v2/home?req=%5B%22ireq%22%2C%5Bnull%2C%5B%5B1%2C6%5D%2C%5B%5D%2C%5B%5D%2C%5B%5D%2C%5B2048%2C2048%5D%5D%2C%5B1%5D%2Cnull%2Cnull%2C%5B"),
regexp("(https:\\/\\/meet.google.com\\/_\\/frame\\?authUser=\\d+&frameType=2&origin=https%3A%2F%2Fdocs.google.com#cb=pip_frame)") {
/* Colors and Animations */
:root {
--primary-background-color: #1b1b1b;
--secondary-background-color: #262626;
--menu-background: #1b1b1bf0;
--hover-background-color: #333333;
--input-background-color: #404040;
--button-background-color: #4d4d4d;
--button-background-color-hover: #333333;
--button-background-color-focus: #333333;
--button-two-background-color: #262626;
--button-two-background-color-hover: #333333;
--enabled-background-color: #808080;
--selection-background-color: #999999;
--primary-border-color: #4d4d4d;
--secondary-border-color: #404040;
--lighter-border-color: #808080;
--primary-text-color: #fff;
--secondary-text-color: #fff;
--tertiary-text-color: #fff;
--disabled-text: #fff;
--accent-text: #333333;
--accent-text-hover: #fff;
--palerblue: #333333;
/* For blue text, icons, nearby items that need to be paleblue, and paleblue buttons on hover. */
--paleblue: #333333;
/* For blue buttons and other wider areas of paleblue. */
--red: #ed8796;
--blue-ripple: #181926;
/* Background color to indicate that something is active (toggled on or being clicked, for example). */
--paleblue-icons: hue-rotate(3.6deg) saturate(32.2%) brightness(170%);
/* To desaturate blue icons to make them more legible against a dark background. If it is an inline SVG, changing its fill color to palerblue is preferable. */
--palergreen: #a6da95;
/* Mostly for suggesting mode. */
--green-ripple: #37493F;
--palegreen-icons: hue-rotate(-2deg) saturate(38%) brightness(182%);
--paleyellow: #eed49f;
/* Mostly for comments. */
--yellow-ripple: #454134;
--lightestgray: #333333;
/* For slightly less prominent text than white text. */
--lightergray: #333333;
--lightgray: #939ab7;
--gray: #6e738d;
--mediumdarkgray: #5b6078;
--darkgray: #494d64;
/* Multiple purposes, like outlining dialog boxes to make them separate from what's behind them. */
--darkergray: #363a4f;
/* Presumably for popups */
--darkestgray: #181926;
/* For backgrounds. */
--white-icons: brightness(240%) saturate(10%);
--darkfilter: invert(100%) hue-rotate(180deg) contrast(80%);
--on: background-color 0.05s ease, border-color 0.06s ease, color 0.05s ease, filter 0.05s ease;
--off: background-color 0.25s ease, border-color 0.1s ease, color 0.25s ease, filter 0.25s ease;
--comment-active: #333333;
--comment-hover: #333333;
--gm3-comment-background: #202427;
--gm3-comment-hover: #252D34;
}
}
@-moz-document url-prefix("https://docs.google.com/document/d/"),
url-prefix("https://docs.google.com/sharing/driveshare"),
url-prefix("https://docs.google.com/document/u/") {
/* Basic elements */
/* TEXT COLORS */
.navigation-widget-content {
.navigation-widget-header/* “Document tabs” */
{
color: var(--ddocs-on-surface-variant);
}
.kix-outlines-widget-header-contents/* “Document tabs” container */
{
background: var(--ddocs-background);
}
.kix-outlines-widget-header-add-chapter-button > .jfk-button {
transition: var(--off);
&:hover {
background-color: var(--ddocs-on-surface-variant-hover);
transition: var(--on);
}
&:focus {
background-color: var(--ddocs-on-surface-variant-focus);
}
.docs-icon {
filter: var(--white-icons);
}
}
}
body {
background-color: var(--darkestgray);
color: var(--lightestgray);
}
/* Basic elements */
body {
background-color: var(--darkestgray);
color: var(--lightestgray);
}
/* Scrollbar */
.docs-gm ::-webkit-scrollbar-thumb {
background-color: var(--lightgray);
}
/* BUTTONS */
.outlines-widget .outlines-widget-chaptered .chapter-container .navigation-item .navigation-item-level-0 {
color: #ffff
}
/* Filled */
.docos.docs-gm .jfk-button.jfk-button-action.jfk-button-disabled,
.docs-gm .modal-dialog .goog-buttonset-action[disabled],
.docs-gm .modal-dialog .jfk-button-action.jfk-button-disabled,
.docs-gm .docs-material-bubble .jfk-button-action.jfk-button-disabled {
background-color: var(--darkgray) !important;
border-color: var(--darkgray) !important;
color: var(--darkestgray) !important;
opacity: 100%;
transition: var(--off);
}
.analytics-btn-fill.jfk-button,
.docos.docs-gm .jfk-button.jfk-button-action,
.docs-material-button-fill-primary.docs-material-button,
.docs-gm #docs-titlebar-share-client-button .jfk-button,
.docs-gm .modal-dialog .goog-buttonset-action,
.docs-gm .modal-dialog .jfk-button-action,
.docs-gm .docs-material-bubble .jfk-button-action,
.analytics-btn-fill.jfk-button.jfk-button-hover,
.docos.docs-gm .jfk-button.jfk-button-action.jfk-button-hover,
.docos.docs-gm .jfk-button.jfk-button-action.jfk-button-focused,
.docos.docs-gm .jfk-button.jfk-button-action.jfk-button-hover.jfk-button-focused,
.docs-gm #docs-titlebar-share-client-button .jfk-button.jfk-button-hover,
.docs-gm #docs-titlebar-share-client-button .jfk-button:focus,
.docs-gm #docs-titlebar-share-client-button .jfk-button.jfk-button-hover:focus,
.docs-gm .modal-dialog .goog-buttonset-action:hover:focus,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-hover.jfk-button-focused,
.docs-gm .modal-dialog .goog-buttonset-action:focus,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-focused,
.docs-gm .modal-dialog .goog-buttonset-action:hover,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-hover,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-hover,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-focused,
.docs-material-button-fill-primary.docs-material-button-hover,
.docs-material-button-fill-primary.docs-material-button-focused.docs-material-button-no-focus-border,
.analytics-btn-fill.jfk-button.jfk-button-focused.jfk-button-active,
.docos.docs-gm .jfk-button.jfk-button-action.jfk-button-focused.jfk-button-active,
.docs-gm #docs-titlebar-share-client-button .jfk-button.jfk-button-focused.jfk-button-active,
.docs-gm .modal-dialog .goog-buttonset-action:active,
.docs-gm .modal-dialog .goog-buttonset-action:focus:active,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-active,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-focus.jfk-button-active,
.docs-gm .docs-material-bubble .jfk-button-action.jfk-button-active,
.docs-gm .docs-material-bubble .jfk-button-action.jfk-button-focus.jfk-button-active,
.docs-gm .modal-dialog .jfk-button-action.jfk-button-hover.jfk-button-focused,
.docs-material-button-fill-primary.docs-material-button-focused.docs-material-button-active {
background-color: var(--palerblue);
color: var(--blue-ripple);
}
/* Outlined */
.docs-gm .modal-dialog button[disabled],
.docs-gm .modal-dialog .jfk-button-standard.jfk-button-disabled {
background-color: var(--darkestgray);
border-color: var(--darkgray) !important;
color: var(--darkgray);
opacity: 100% !important;
transition: var(--off);
}
.analytics-btn-hairline.jfk-button,
.docs-checkupdialog-button-ignore.docs-material-button-hairline-default.docs-material-button,
.docs-contentembedding-sidebar-zero-state .docs-contentembedding-sidebar-zero-state-button,
.docos.docs-gm .jfk-button.jfk-button-standard,
.docs-gm .docs-image-effect-adjustment-reset-button.jfk-button-standard,
.docs-gm .modal-dialog button,
.docs-gm .modal-dialog .jfk-button-standard,
.docs-material-button-hairline-primary.docs-material-button {
background-color: transparent;
border-color: var(--darkgray) !important;
color: var(--palerblue);
transition: var(--off);
}
.analytics-btn-hairline.jfk-button.jfk-button-hover,
.docs-checkupdialog-button-ignore.docs-material-button-hairline-default.docs-material-button-hover,
.docs-checkupdialog-button-ignore.docs-material-button-hairline-default.docs-material-button-focus,
.docs-contentembedding-sidebar-zero-state .docs-contentembedding-sidebar-zero-state-button:hover,
.docs-contentembedding-sidebar-zero-state .docs-contentembedding-sidebar-zero-state-button:focus,
.docs-gm .docs-image-effect-adjust...