Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/chrisgrieser/shimmering-focus/llms.txt

Use this file to discover all available pages before exploring further.

Shimmering Focus includes five built-in color schemes, each submitted or crafted by community members. Every scheme ships with fully tuned light and dark variants, so you can switch Obsidian’s appearance mode without losing color coherence. Schemes are applied as CSS body classes via the Style Settings plugin, meaning you can change them at any time without editing a single file.

​
Switching Color Schemes

Install the Style Settings plugin, then navigate to: Settings → Style Settings → Colors & shapes → Alternative color schemes The selector is a class-select control that adds one of the following body classes to Obsidian’s root element: colorscheme-gamma, colorscheme-macos-native, colorscheme-coffee, colorscheme-everforest, or colorscheme-grubox.
The Background color tone sliders (bg-hue-light and bg-hue-dark) only appear in Style Settings when the Gamma scheme is active. They accept values from 0 to 360 degrees (HSL hue wheel) and let you tint the background independently for light and dark mode. Both default to 230 (a cool blue-grey).

​
The Five Built-in Schemes

​
Gamma (Default)

Gamma is the default color scheme for Shimmering Focus, created in collaboration with @lkadre. It uses a teal/cyan primary accent paired with a warm-orange secondary and a pink hover highlight — a carefully balanced palette that reads well at any background hue.

Light Mode

  • Accent: hsl(184 79% 35%) — deep teal
  • Alt heading: hsl(232 34% 50%) — slate blue
  • Secondary accent: hsl(28 54% 51%) — warm amber
  • Hover accent: hsl(328 70% 54%) — rose pink
  • Background hue: adjustable (default 230)

Dark Mode

  • Accent: hsl(184 79% 45%) — brighter teal
  • Alt heading: hsl(232 50% 70%) — periwinkle
  • Secondary accent: hsl(28 63% 61%) — light amber
  • Hover accent: hsl(328 80% 64%) — bright rose
  • Background hue: adjustable (default 230)
/* Gamma — dark variant (00_Default.css) */
.theme-dark {
    --bg-sat: 15%;
    --bg-hue: var(--bg-hue-dark);

    /* --color-accent-hsl needs commas, otherwise dependent colors are not displayed correctly */
    --color-accent-hsl: 184, 79%, 45%;
    --color-accent: hsl(184 79% 45%);
    --interactive-accent: hsl(184 79% 30%);
    --alt-heading-color: hsl(232 50% 70%);
    --secondary-accent: hsl(28 63% 61%);
    --hover-accent: hsl(328 80% 64%);
    --link-unresolved-color: hsl(101 42% 51%);
}
Because Gamma is the only scheme with a configurable background hue, it is the best starting point if you want a personalized look without writing any CSS. Use the Background color tone (light mode) and Background color tone (dark mode) sliders in Style Settings to shift the neutral background tint anywhere on the color wheel.

​
macOS Native

The macOS Native scheme strips all background tinting to produce a perfectly neutral grey canvas — matching the system appearance of macOS on both light and dark mode. It deliberately avoids overriding accent colors so that Obsidian’s default accent (set in Settings → Appearance → Accent color) shows through unchanged.

Light Mode

  • Background hue: 0 (no tint)
  • Background saturation: 0% (fully achromatic)
  • Accent colors inherit from Obsidian’s global accent setting

Dark Mode

  • Background hue: 0 (no tint)
  • Background saturation: 0% (fully achromatic)
  • Accent colors inherit from Obsidian’s global accent setting
/* macOS Native — dark variant (macOS-native.css) */
.colorscheme-macos-native {
    &.theme-dark {
        --bg-hue: 0;
        --bg-sat: 0%;
    }
}
This scheme is ideal if you rely on Obsidian’s built-in accent color picker or want the cleanest possible distraction-free environment on a Mac. No theme-specific hue is injected — what you see is pure system grey.

​
Coffee

The Coffee scheme was created by @keara, inspired by the Primary theme by @cecilamay. It wraps the interface in warm parchment and espresso tones, using a golden-yellow accent against earthy greens and dusty blues.

Light Mode

  • Background hue: 36 — warm parchment
  • Accent: hsl(43 100% 42%) — golden yellow
  • Alt heading: hsl(4 56% 48%) — terracotta red
  • Secondary accent: hsl(154 50% 38%) — sage green
  • Hover accent: hsl(198 57% 40%) — steel blue

Dark Mode

  • Background hue: 29 — espresso brown
  • Accent: hsl(50 70% 60%) — warm gold
  • Alt heading: hsl(4 100% 68%) — bright terracotta
  • Secondary accent: hsl(155 83% 24%) — deep green
  • Hover accent: hsl(198 57% 55%) — sky blue
/* Coffee — dark variant (Coffee.css) */
.colorscheme-coffee {
    &.theme-dark {
        --bg-hue: 29;
        --bg-sat: 15%;

        /* --color-accent-hsl needs commas, otherwise dependent colors are not displayed correctly */
        --color-accent-hsl: 50, 70%, 60%;
        --color-accent: hsl(50 70% 60%);
        --interactive-accent: hsl(155 83% 24%);
        --alt-heading-color: hsl(4 100% 68%);
        --secondary-accent: hsl(155 83% 24%);
        --hover-accent: hsl(198 57% 55%);
        --link-unresolved-color: hsl(283 35% 69%);
    }
}

​
Everforest

Everforest was contributed by @neuromancer, porting the beloved Everforest color palette into Shimmering Focus. The light mode uses warm amber-green tones, while the dark mode shifts to a muted, cool-tinted forest palette. Both variants include a custom ::selection highlight that matches the accent color.

Light Mode

  • Background hue: 43 — warm bamboo
  • Accent: hsl(68 99% 32%) — olive green
  • Alt heading: hsl(1 92% 65%) — red
  • Secondary accent: hsl(19 69% 68%) — peach
  • Hover accent: hsl(25 91% 55%) — orange

Dark Mode

  • Background hue: 204 — cool slate
  • Accent: hsl(83 34% 63%) — muted green
  • Alt heading: hsl(359 68% 70%) — soft red
  • Secondary accent: hsl(331 43% 72%) — mauve
  • Hover accent: hsl(19 69% 68%) — peach
/* Everforest — dark variant (Everforest.css) */
.colorscheme-everforest {
    &.theme-dark {
        --bg-hue: 204;
        --bg-sat: 14%;
        --bg-val: 21%;

        /* --color-accent-hsl needs commas, otherwise dependent colors are not displayed correctly */
        --color-accent-hsl: 83, 34%, 63%;
        --color-accent: hsl(83 34% 63%);
        --interactive-accent: hsl(172 31% 62%);
        --alt-heading-color: hsl(359 68% 70%);
        --secondary-accent: hsl(331 43% 72%);
        --hover-accent: hsl(19 69% 68%);
        --link-unresolved-color: hsl(40 56% 68%);
    }
}

​
Gruvbox

The Gruvbox scheme brings the iconic Gruvbox retro-groove palette to Shimmering Focus. The dark variant was contributed by @jasht1 and the light variant by @robrecord. Gruvbox goes furthest in customization depth — it overrides heading colors, text colors, icon colors, selection colors, background scale variables, and navigation file title colors on top of the standard accent variables.

Light Mode

  • Background hue: 39, saturation 0% (relies on --color-base-* scale)
  • Accent: hsl(358 100% 31%) — Gruvbox red
  • Interactive accent: hsl(19 97% 35%) — Gruvbox orange
  • Secondary accent: hsl(190 89% 25%) — Gruvbox blue
  • Hover accent: hsl(24 88% 45%) — deep orange

Dark Mode

  • Background: --color-base-05 (hsl(0 0% 16%))
  • Accent: hsl(6 93% 59%) — Gruvbox red (bright)
  • Interactive accent: hsl(27 99% 55%) — Gruvbox orange (bright)
  • Alt heading: via --color-green (hsl(61 66% 44%))
  • Hover accent: hsl(24 88% 45%) — deep orange
/* Gruvbox — dark variant (Gruvbox.css) */
.colorscheme-grubox.theme-dark {
    --color-red: hsl(6 93% 59%);
    --color-green: hsl(61 66% 44%);
    --color-yellow: hsl(42 95% 58%);
    --color-orange: hsl(27 99% 55%);

    /* Interactive Colours */
    --color-accent: var(--color-red);
    --color-accent-hsl: 358 100% 31%;
    --interactive-accent: var(--color-orange);
    --secondary-accent: var(--color-green);
    --hover-accent: hsl(24 88% 45%);
    --link-unresolved-color: var(--color-cyan);
}
The Gruvbox scheme uses a full --color-base-* scale (00 through 100) to replace Obsidian’s surface hierarchy, giving it the most faithful port of the original Gruvbox palette among all built-in schemes.

​
Creating Your Own Scheme

If none of the built-in schemes match your taste, you can define a fully custom color scheme using a single CSS snippet file — no prior CSS experience required beyond copy-pasting and adjusting HSL values.

Custom Color Scheme

Learn how to create and enable your own color scheme using a CSS snippet, with a full variable reference and step-by-step instructions.

Build docs developers (and LLMs) love

Get started for freeTalk to us