Filling the gap in Minimal's "Light mode High contrast" — right sidebar and tab headers

Custom CSS & Theme Design
1

Filling the gap in Minimal’s “Light mode High contrast” — right sidebar and tab headers

Following up on this older (now closed) thread: “Minimal Theme — Make side bars different background color from the note”

Minimal Theme offers a built-in “Light mode background contrast → High contrast” setting that darkens the left sidebar and the titlebar, giving you the nice side-bar vs. note contrast many users want out of the box.

However, the setting has a few blind spots — the right sidebar, its internal search inputs, and the tab-header containers (both the right sidebar’s and the root editor’s) stay light. Result: visual asymmetry that bugged me every time I opened the right panel.

Below is a CSS snippet that fills those gaps without forcing the editor itself to go dark (the idea is sidebar-dark / note-light, like VS Code’s explorer). Drop it in [Vault]/.obsidian/snippets/right-sidebar-contrast.css and enable it in Settings → Appearance → CSS snippets.

Requirements: Minimal theme installed, Light mode + High contrast background active.

Snippet CSS

/* ============================================================
   Minimal Theme — Right-sidebar & tab-header contrast patch
   For "Light mode background contrast → High contrast" only.
   Fills the gap where Minimal darkens the left sidebar/titlebar
   but leaves the right sidebar and tab headers in light colors.
   ============================================================ */

/* --- 1. Right sidebar body (files list, tags, backlinks, etc.)
   Also covers the right ribbon. Scopes the full dark palette
   locally so inner var(--bg2), var(--tx1)... resolve dark. --- */
.theme-light.minimal-light-contrast .mod-right-split,
.theme-light.minimal-light-contrast .workspace-ribbon.mod-right {
  --accent-l: 60%;
  --base-l: 15%;

  --bg1: hsl(var(--base-h), var(--base-s), var(--base-l));
  --bg2: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 2%));
  --bg3: hsla(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), 0.12);
  --ui1: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 6%));
  --ui2: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 12%));
  --ui3: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%));
  --tx1: hsl(var(--base-h), calc(var(--base-s) - 10%), calc(var(--base-l) + 67%));
  --tx2: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 45%));
  --tx3: hsl(var(--base-h), calc(var(--base-s) - 10%), calc(var(--base-l) + 20%));
  --hl1: hsla(var(--accent-h), 50%, 40%, 30%);

  --background-primary: var(--bg1);
  --background-primary-alt: var(--bg2);
  --background-secondary: var(--bg2);
  --background-secondary-alt: var(--bg1);
  --background-modifier-border: var(--ui1);
  --background-modifier-border-hover: var(--ui2);
  --background-modifier-hover: var(--bg3);
  --background-modifier-active-hover: var(--bg3);

  --text-normal: var(--tx1);
  --text-muted: var(--tx2);
  --text-faint: var(--tx3);

  --interactive-normal: var(--bg3);
  --icon-color: var(--tx2);
  --icon-color-hover: var(--tx2);
  --icon-color-active: var(--tx1);
  --icon-color-focused: var(--tx1);

  --nav-item-color: var(--tx2);
  --nav-item-color-hover: var(--tx1);
  --nav-item-color-active: var(--tx1);
  --nav-item-background-hover: var(--bg3);
  --nav-item-background-active: var(--bg3);

  --tab-text-color: var(--tx2);
  --tab-text-color-focused-active: var(--tx1);
  --divider-color: var(--ui1);
  --tab-outline-color: var(--ui1);
}

/* --- 2. Search bars and text inputs inside the right sidebar
   (tag search, backlinks search, etc.) --- */
.theme-light.minimal-light-contrast .mod-right-split input,
.theme-light.minimal-light-contrast .mod-right-split input[type="text"],
.theme-light.minimal-light-contrast .mod-right-split input[type="search"],
.theme-light.minimal-light-contrast .mod-right-split .search-input-container input,
.theme-light.minimal-light-contrast .mod-right-split textarea {
  background-color: var(--bg2);
  color: var(--tx1);
  border-color: var(--ui1);
  caret-color: var(--tx1);
}

/* Placeholder text ("Type to start searching...") */
.theme-light.minimal-light-contrast .mod-right-split input::placeholder,
.theme-light.minimal-light-contrast .mod-right-split .search-input-container input::placeholder {
  color: var(--tx3);
}

/* Focused input state — no heavy glow */
.theme-light.minimal-light-contrast .mod-right-split input:focus,
.theme-light.minimal-light-contrast .mod-right-split .search-input-container input:focus {
  border-color: var(--ui2);
  box-shadow: none;
}

/* Magnifier icon and "clear search" (x) button */
.theme-light.minimal-light-contrast .mod-right-split .search-input-container::before,
.theme-light.minimal-light-contrast .mod-right-split .search-input-clear-button {
  background-color: var(--tx2);
}

/* --- 3. Buttons, dropdowns, and other interactive elements --- */
.theme-light.minimal-light-contrast .mod-right-split button,
.theme-light.minimal-light-contrast .mod-right-split .clickable-icon,
.theme-light.minimal-light-contrast .mod-right-split .dropdown {
  background-color: var(--bg2);
  color: var(--tx1);
  border-color: var(--ui1);
}

.theme-light.minimal-light-contrast .mod-right-split button:hover,
.theme-light.minimal-light-contrast .mod-right-split .clickable-icon:hover {
  background-color: var(--bg3);
}

/* --- 4. Right sidebar's top tab-header container
   (Minimal doesn't override --tab-container-background here,
   so it falls back to the light body-scope value. We force it.) --- */
.theme-light.minimal-light-contrast .mod-right-split .workspace-tab-header-container,
.theme-light.minimal-light-contrast .mod-right-split .workspace-tabs.mod-top {
  --tab-container-background: var(--bg2);
  background-color: var(--bg2) !important;
}

/* --- 5. Root tab-header container (tab strip above the editor).
   We scope variables ONLY on the header container, NOT on .mod-root,
   so the editor body itself stays light. VS Code-style split. --- */
.theme-light.minimal-light-contrast .mod-root .workspace-tab-header-container {
  --base-l: 15%;

  --bg1: hsl(var(--base-h), var(--base-s), var(--base-l));
  --bg2: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 2%));
  --bg3: hsla(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), 0.12);
  --ui1: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 6%));
  --tx1: hsl(var(--base-h), calc(var(--base-s) - 10%), calc(var(--base-l) + 67%));
  --tx2: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 45%));

  --tab-container-background: var(--bg2);
  background-color: var(--bg2) !important;

  --tab-text-color: var(--tx2);
  --tab-text-color-focused: var(--tx2);
  --tab-text-color-active: var(--tx1);
  --tab-text-color-focused-active: var(--tx1);
  --tab-text-color-focused-active-current: var(--tx1);
  --minimal-tab-text-color: var(--tx2);
  --minimal-tab-text-color-active: var(--tx1);

  --icon-color: var(--tx2);
  --icon-color-hover: var(--tx1);
  --icon-color-active: var(--tx1);
  --icon-color-focused: var(--tx1);

  --tab-outline-color: var(--ui1);
  --background-modifier-hover: var(--bg3);
}

Credit where it’s due: this was built iteratively by DOM-inspecting the missed elements (Ctrl+Shift+I on the white zones) — fix the selector, reload snippet, repeat. If you find more leftover light spots in your layout, the same approach works. Claude Code Opus 4.7 by my side.

1 Like