theme.css

/* SPDX-License-Identifier: MPL-2.0 */
/*
 * Darkkle - static theme layer.
 *
 * The dynamic engine in content.js mirrors Google's own stylesheets, which handles the bulk of the
 * interface. This file covers what stylesheets cannot express and what needs to be decided rather than
 * derived: scrollbars, native controls, a flash-free first paint, and the interaction states (hover,
 * selection, focus) that Google draws as faint tints which are invisible on a black background.
 *
 * Everything is scoped to html[data-sheets-night="on"] so turning the theme off removes it completely.
 * Colours come from the variables published by content.js:
 *   --sn-bg            page background
 *   --sn-text          primary text
 *   --sn-dim           secondary text
 *   --sn-line          the grid's own lines (user configurable; used by the canvas engine)
 *   --sn-edge          structural edges: menu borders, toolbar rules, separators
 *   --sn-edge-strong   scrollbar thumb
 *   --sn-outline       hairline accent outline for hover states
 *   --sn-accent        accent colour (user configurable)
 *   --sn-hover         hover background, built from the accent
 *   --sn-selected      selected background, built from the accent
 *   --sn-surface       raised surface (menus, dialogs)
 */

html[data-sheets-night="on"] {
  color-scheme: dark;
  background-color: var(--sn-bg, #000) !important;
}

html[data-sheets-night="on"] body {
  background-color: var(--sn-bg, #000) !important;
}

/* ---------- scrollbars ---------- */
html[data-sheets-night="on"] ::-webkit-scrollbar {
  background-color: var(--sn-bg, #000);
  width: 12px;
  height: 12px;
}
html[data-sheets-night="on"] ::-webkit-scrollbar-track,
html[data-sheets-night="on"] ::-webkit-scrollbar-corner {
  background-color: var(--sn-bg, #000);
}
html[data-sheets-night="on"] ::-webkit-scrollbar-thumb {
  background-color: var(--sn-edge-strong, #5a5a5a);
  border-radius: 6px;
  border: 2px solid var(--sn-bg, #000);
}
html[data-sheets-night="on"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--sn-accent, #8ab4f8);
}
html[data-sheets-night="on"] ::selection {
  background-color: var(--sn-selected, #26405c);
  color: var(--sn-text, #fff);
}

/* ---------- large containers (belt and braces) ---------- */
html[data-sheets-night="on"] #docs-chrome,
html[data-sheets-night="on"] #docs-header-container,
html[data-sheets-night="on"] .docs-titlebar-container,
html[data-sheets-night="on"] #docs-titlebar-container,
html[data-sheets-night="on"] #docs-toolbar-wrapper,
html[data-sheets-night="on"] #docs-editor-container,
html[data-sheets-night="on"] #docs-editor,
/* Only the outer grid container is painted. Layers between it and the canvas are left alone, because
   an opaque layer above the canvas hides the entire grid. */
html[data-sheets-night="on"] #waffle-grid-container,
html[data-sheets-night="on"] .grid-fixed-bottom-bar,
html[data-sheets-night="on"] .grid-bottom-bar,
html[data-sheets-night="on"] .frozen-left-pane,
html[data-sheets-night="on"] .frozen-top-pane,
html[data-sheets-night="on"] .frozen-corner-pane,
html[data-sheets-night="on"] .native-scrollbar-x,
html[data-sheets-night="on"] .native-scrollbar-y,
html[data-sheets-night="on"] .docs-sheet-container-bar,
html[data-sheets-night="on"] .docs-sheet-bar,
html[data-sheets-night="on"] .companion-app-switcher-container,
html[data-sheets-night="on"] .companion-guest-app-switcher,
html[data-sheets-night="on"] .companion-collapser-button-container,
html[data-sheets-night="on"] .docs-companion-app-switcher-container {
  background-color: var(--sn-bg, #000) !important;
}

/* ---------- structural edges ----------
   Deliberately neutral. The colour you choose for cell lines belongs to the grid; letting it bleed into
   menu borders and toolbar rules makes the whole interface look like a warning. */
html[data-sheets-night="on"] #docs-header-container,
html[data-sheets-night="on"] .docs-sheet-container-bar,
html[data-sheets-night="on"] .docs-sheet-bar {
  border-color: var(--sn-edge, #3a3a3a) !important;
}
html[data-sheets-night="on"] .goog-menuseparator,
html[data-sheets-night="on"] .docs-menu-separator,
html[data-sheets-night="on"] .goog-toolbar-separator,
html[data-sheets-night="on"] .docs-toolbar-separator,
html[data-sheets-night="on"] hr {
  border-color: var(--sn-edge, #3a3a3a) !important;
  background-color: var(--sn-edge, #3a3a3a) !important;
}

/* ---------- raised surfaces get an edge, otherwise they dissolve into the page ---------- */
html[data-sheets-night="on"] .goog-menu,
html[data-sheets-night="on"] .goog-submenu,
html[data-sheets-night="on"] .modal-dialog,
html[data-sheets-night="on"] .docs-dialog,
html[data-sheets-night="on"] .docs-bubble,
html[data-sheets-night="on"] .jfk-bubble,
html[data-sheets-night="on"] .docs-material-menu,
html[data-sheets-night="on"] .docs-material-card,
html[data-sheets-night="on"] .goog-tooltip,
html[data-sheets-night="on"] [role="menu"],
html[data-sheets-night="on"] [role="listbox"],
html[data-sheets-night="on"] [role="dialog"] {
  background-color: var(--sn-surface, #121212) !important;
  box-shadow: 0 0 0 1px var(--sn-edge, #3a3a3a), 0 8px 24px rgba(0, 0, 0, 0.8) !important;
}

/* ---------- interaction states ----------
   Google draws hover and selection as faint tints that are invisible on black. One treatment is used
   everywhere instead: a tinted fill, a hairline accent outline drawn inside the element's own box, and
   the same corner radius. Because the outline is inset it never shifts layout or overlaps a neighbour. */
html[data-sheets-night="on"] .goog-menuitem-highlight,
html[data-sheets-night="on"] .goog-menuitem-hover,
html[data-sheets-night="on"] .goog-menuitem:hover,
html[data-sheets-night="on"] .goog-tristatemenuitem-highlight,
html[data-sheets-night="on"] .goog-submenu-highlight,
html[data-sheets-night="on"] .goog-option-hover,
html[data-sheets-night="on"] .docs-material-menu-item:hover,
html[data-sheets-night="on"] [role="menuitem"]:hover,
html[data-sheets-night="on"] [role="menuitemcheckbox"]:hover,
html[data-sheets-night="on"] [role="menuitemradio"]:hover,
html[data-sheets-night="on"] [role="option"]:hover {
  background-color: var(--sn-hover, #223245) !important;
  box-shadow: inset 0 0 0 1px var(--sn-outline, #4d6b90) !important;
  border-radius: 4px;
  outline: none;
}
html[data-sheets-night="on"] .goog-menuitem-highlight *,
html[data-sheets-night="on"] .goog-menuitem-hover *,
html[data-sheets-night="on"] .goog-menuitem:hover *,
html[data-sheets-night="on"] [role="menuitem"]:hover *,
html[data-sheets-night="on"] [role="option"]:hover * {
  color: var(--sn-text, #fff) !important;
}
/* Disabled entries must stay obviously unavailable even while hovered. */
html[data-sheets-night="on"] .goog-menuitem-disabled,
html[data-sheets-night="on"] .goog-menuitem-disabled *,
html[data-sheets-night="on"] [aria-disabled="true"],
html[data-sheets-night="on"] [aria-disabled="true"] * {
  color: var(--sn-dim, #8f8f8f) !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
html[data-sheets-night="on"] .goog-option-selected,
html[data-sheets-night="on"] [role="menuitemcheckbox"][aria-checked="true"],
html[data-sheets-night="on"] [role="menuitemradio"][aria-checked="true"],
html[data-sheets-night="on"] [role="option"][aria-selected="true"],
html[data-sheets-night="on"] [role="tab"][aria-selected="true"],
html[data-sheets-night="on"] [role="menu"] [aria-checked="true"],
html[data-sheets-night="on"] [role="listbox"] [aria-selected="true"] {
  background-color: var(--sn-selected, #2b4562) !important;
  box-shadow: inset 0 0 0 1px var(--sn-accent, #8ab4f8) !important;
  border-radius: 4px;
}

/* Toolbar buttons and icon buttons use the same shape, one step quieter. */
html[data-sheets-night="on"] .goog-toolbar-button-hover,
html[data-sheets-night="on"] .goog-toolbar-menu-button-hover,
html[data-sheets-night="on"] .jfk-button-hover,
html[data-sheets-night="on"] .jfk-button-clear-outline:hover,
html[data-sheets-night="on"] .docs-icon-button:hover,
html[data-sheets-night="on"] .docs-material-button:hover {
  background-color: var(--sn-hover-weak, #182430) !important;
  box-shadow: inset 0 0 0 1px var(--sn-outline, #4d6b90) !important;
  border-color: transparent !important;
  border-radius: 4px;
}
html[data-sheets-night="on"] .goog-toolbar-button-active,
html[data-sheets-night="on"] .goog-toolbar-menu-button-open,
html[data-sheets-night="on"] .goog-toolbar-button-checked,
html[data-sheets-night="on"] .goog-toolbar-button-selected,
html[data-sheets-night="on"] .docs-icon-button-checked {
  background-color: var(--sn-selected, #2b4562) !important;
  box-shadow: inset 0 0 0 1px var(--sn-accent, #8ab4f8) !important;
  border-radius: 4px;
}

/* Sheet tabs: the active tab is obvious, and hover matches everything else. */
html[data-sheets-night="on"] .docs-sheet-tab {
  border-color: var(--sn-edge, #3a3a3a) !important;
}
html[data-sheets-night="on"] .docs-sheet-active-tab {
  background-color: var(--sn-selected, #2b4562) !important;
  box-shadow: inset 0 0 0 1px var(--sn-accent, #8ab4f8) !important;
  border-radius: 4px;
}
html[data-sheets-night="on"] .docs-sheet-tab:hover {
  background-color: var(--sn-hover-weak, #182430) !important;
}
/* The active tab's name is the same bright accent ink the selected row and column headers use. */
html[data-sheets-night="on"] .docs-sheet-active-tab,
html[data-sheets-night="on"] .docs-sheet-active-tab .docs-sheet-tab-name,
html[data-sheets-night="on"] .docs-sheet-active-tab .docs-sheet-tab-caption,
html[data-sheets-night="on"] .docs-sheet-active-tab .docs-icon-img {
  color: var(--sn-accent-ink, #a8c7fa) !important;
}

/* ---------- toolbar controls: one resting state, one interaction state ----------
   Google gives the zoom, font and size widgets a background a few percent off white and a pale border.
   On a white toolbar they read as flat; inverted they read as boxes, while the icon buttons beside them
   have nothing. That mismatch is what makes the row look unfinished. Every control in the toolbar is
   pinned flat at rest here, and every one takes the same ring when you touch it. */
html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"])
  :is(.goog-toolbar-button, .goog-toolbar-menu-button, .goog-toolbar-combo-button, .docs-icon-button,
      .jfk-button, [class*="combo-button"], [class*="inner-box"], [class*="outer-box"]) {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 4px;
}

html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"])
  :is(.goog-toolbar-button-hover, .goog-toolbar-menu-button-hover, .goog-toolbar-combo-button-hover,
      .jfk-button-hover, .goog-toolbar-button:hover, .goog-toolbar-menu-button:hover,
      .goog-toolbar-combo-button:hover, .docs-icon-button:hover) {
  background-color: var(--sn-hover-weak, #182430) !important;
  box-shadow: inset 0 0 0 1px var(--sn-outline, #4d6b90) !important;
  border-radius: 4px;
}

html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"])
  :is(.goog-toolbar-button-open, .goog-toolbar-menu-button-open, .goog-toolbar-combo-button-open,
      .goog-toolbar-button-active, .goog-toolbar-button-checked, .goog-toolbar-button-selected,
      .docs-icon-button-checked) {
  background-color: var(--sn-selected, #2b4562) !important;
  box-shadow: inset 0 0 0 1px var(--sn-accent, #8ab4f8) !important;
  border-radius: 4px;
}

/* Toolbars never show outlines. An outline is painted outside the element's box, so on a row of buttons
   that touch, a state that lights several at once merges into a single scalloped line along the whole
   toolbar. Inside a toolbar, every state, including keyboard focus, uses the inset ring and nothing else. */
html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"]) *,
html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"]) *::before,
html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"]) *::after {
  outline: none !important;
}
html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"])
  :is(.goog-toolbar-button, .goog-toolbar-menu-button, .goog-toolbar-combo-button, .docs-icon-button, .jfk-button):focus-visible {
  box-shadow: inset 0 0 0 1px var(--sn-accent, #8ab4f8) !important;
  border-radius: 4px;
}

/* Keyboard focus elsewhere is a safety feature, so make it unmistakable. */
html[data-sheets-night="on"] :focus-visible {
  outline: 2px solid var(--sn-accent, #8ab4f8) !important;
  outline-offset: -2px;
  border-radius: 4px;
}
/* Anything that clips its children would slice a ring drawn on the outside. */
html[data-sheets-night="on"] .docs-icon-button,
html[data-sheets-night="on"] .goog-toolbar-button,
html[data-sheets-night="on"] .goog-toolbar-menu-button,
html[data-sheets-night="on"] .jfk-button {
  border-radius: 4px;
  background-clip: padding-box;
}

/* ---------- icon sprites (PNG/SVG background sprites cannot be recoloured, so invert them) ----------
   Only the element that carries the sprite is inverted. Inline <svg> and <img> children are handled by
   the sweeper instead, and nested matches are excluded so nothing is inverted twice. */
html[data-sheets-night="on"] .docs-icon-img:not(:has(svg, img, .docs-icon-img)),
html[data-sheets-night="on"] .jfk-button-img:not(:has(svg, img)),
html[data-sheets-night="on"] .goog-menuitem-checkbox:not(:has(svg, img)),
html[data-sheets-night="on"] .goog-menuitem-icon:not(:has(svg, img)),
html[data-sheets-night="on"] .docs-dimension-picker,
html[data-sheets-night="on"] .goog-dimension-picker-unhighlighted,
html[data-sheets-night="on"] .goog-dimension-picker-highlighted {
  filter: invert(1) hue-rotate(180deg);
}
html[data-sheets-night="on"] .docs-icon-img.docs-icon-logo,
html[data-sheets-night="on"] .docs-branding-icon-img,
html[data-sheets-night="on"] .docs-icon-img[class*="logo"],
html[data-sheets-night="on"] .docs-icon-img[class*="branding"] {
  filter: none;
}

/* ---------- things that must keep their real colours ---------- */
html[data-sheets-night="on"] .goog-palette-colorswatch,
html[data-sheets-night="on"] .docs-material-colorpalette-colorswatch,
html[data-sheets-night="on"] .docs-material-colorpalette-cell,
html[data-sheets-night="on"] .goog-color-menu-button-indicator,
html[data-sheets-night="on"] .docs-sheet-tab-color,
html[data-sheets-night="on"] img,
html[data-sheets-night="on"] video {
  filter: none;
}

/* ---------- editing surfaces ----------
   The engine sets the actual colours (so text you coloured yourself survives editing); these rules
   guarantee a readable caret and a dark field even before the first sweep runs. */
html[data-sheets-night="on"] .cell-input,
html[data-sheets-night="on"] .formula-input,
html[data-sheets-night="on"] #t-formula-bar-input,
html[data-sheets-night="on"] #t-formula-bar-input-container,
html[data-sheets-night="on"] #t-name-box,
html[data-sheets-night="on"] .waffle-rich-text-editor {
  caret-color: var(--sn-text, #fff) !important;
  background-color: var(--sn-bg, #000);
}
html[data-sheets-night="on"] #t-formula-bar-input,
html[data-sheets-night="on"] #t-name-box {
  color: var(--sn-text, #fff);
  -webkit-text-fill-color: var(--sn-text, #fff);
}
html[data-sheets-night="on"] input:not([type="checkbox"]):not([type="radio"]),
html[data-sheets-night="on"] textarea,
html[data-sheets-night="on"] select {
  color-scheme: dark;
}
html[data-sheets-night="on"] input::placeholder,
html[data-sheets-night="on"] textarea::placeholder {
  color: var(--sn-dim, #8f8f8f) !important;
}

/* ---------- v2.2.2 interface polish ----------
   Google sometimes focuses the menubar container itself when a menu opens. The container-level ring can
   surround File/Edit/View as one large box. Suppress only that composite ring; individual menu items keep
   their hover/focus treatment for keyboard accessibility. */
html[data-sheets-night="on"] :is(#docs-menubar, .docs-menubar, [role="menubar"]):focus,
html[data-sheets-night="on"] :is(#docs-menubar, .docs-menubar, [role="menubar"]):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Font / zoom dropdowns are nested Google controls. Tint the outer interactive shell only, while inner
   implementation boxes remain transparent; this prevents the visible double-shading state when opened. */
html[data-sheets-night="on"] :is(#docs-toolbar-wrapper, #docs-toolbar, .docs-material-toolbar, [role="toolbar"])
  :is(.goog-toolbar-menu-button, .goog-toolbar-combo-button) :is([class*="inner-box"], [class*="outer-box"]) {
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}