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 exposes a small, well-defined set of CSS custom properties that control every accent, heading, hover, and background color across the interface. By placing a CSS snippet file in your vault’s .obsidian/snippets/ folder and enabling it in Obsidian’s Appearance settings, you can override these variables without touching the theme itself — and without any deep CSS knowledge. The snippet survives theme updates cleanly because it targets stable variable names rather than internal selectors.

​
The CSS Snippet Template

Copy the block below into a new file, adjust the HSL values to your liking, and save it as a .css file inside .obsidian/snippets/. 
.theme-light.theme-light {
    --bg-hue: 230;
    --bg-sat: 25%;

    /* `--color-accent-hsl` should have the same values as `--color-accent` */
    --color-accent: hsl(184 79% 35%);
    --color-accent-hsl: 184, 79%, 35%;
    --interactive-accent: hsl(184 79% 30%);

    --alt-heading-color: hsl(232 34% 50%);
    --secondary-accent: hsl(28 54% 51%);
    --hover-accent: hsl(328 70% 54%);
    --link-unresolved-color: hsl(101 42% 51%);
}

.theme-dark.theme-dark {
    --bg-hue: 230;
    --bg-sat: 15%;

    /* Note that `--color-accent-hsl` should have the same values as `--color-accent` */
    --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%);
}
The selectors use the doubled class pattern (.theme-light.theme-light and .theme-dark.theme-dark) intentionally. This gives the snippet higher specificity than the theme’s own rules without requiring !important, ensuring your values win cleanly.

​
Variable Reference

--bg-hue

The hue angle (0–360°) of the background color on the HSL wheel. 0 and 360 are both red; 120 is green; 230 (the default) is a cool blue-grey. Changing this value shifts the entire background tint while keeping the lightness and saturation controlled by --bg-sat.

--bg-sat

The saturation percentage of the background color. A value of 0% produces a fully achromatic (grey) background regardless of --bg-hue. Light mode defaults to 25%; dark mode defaults to 15% so the tint is subtler against the darker base.

--color-accent

The primary accent color used for links, active file titles, and highlighted UI elements. Expressed as a space-separated hsl() value (e.g. hsl(184 79% 35%)). Must match --color-accent-hsl — see the note below.

--color-accent-hsl

The same color as --color-accent expressed as a comma-separated list of raw HSL components — for example 184, 79%, 35%. Obsidian and Shimmering Focus use this format internally when constructing rgba() or other derived color values. If this variable is out of sync with --color-accent, dependent colors such as translucent accent overlays will render incorrectly.

--interactive-accent

The accent color applied to interactive elements — buttons, toggle controls, and focused input borders. Typically set a few lightness points darker than --color-accent to communicate affordance (e.g. hsl(184 79% 30%) versus hsl(184 79% 35%)).

--alt-heading-color

The color used for even-level headings (H2, H4, H6). Odd-level headings (H1, H3, H5) inherit the primary accent color, so choosing a complementary hue here creates a gentle rhythmic alternation through your document hierarchy.

--secondary-accent

A secondary highlight color used for callout borders, certain badges, and other supporting UI elements. Works best when chosen from a different hue family than --color-accent — the default pairing of teal (184) and amber (28) demonstrates this contrast.

--hover-accent

The color applied to elements in their hovered or focused state, such as navigation items and icon buttons. Should be visually distinct and slightly more saturated or vivid than the resting accent to give clear feedback on interaction.

--link-unresolved-color

The color of unresolved (broken) internal links — links that point to notes that do not yet exist in your vault. Using a subdued or clearly different hue from --color-accent helps you spot missing notes at a glance without the link being visually alarming.
--color-accent and --color-accent-hsl must always describe the same color. If you update --color-accent to hsl(200 60% 40%), set --color-accent-hsl to 200, 60%, 40% (no hsl() wrapper, values comma-separated). Forgetting to update both will cause Obsidian’s internal alpha-composited colors — tag backgrounds, selection highlights, etc. — to use the wrong hue.

​
Enabling the Snippet

1

Create the snippet file

Open your vault’s root folder in Finder, Explorer, or your file manager. Navigate to .obsidian/snippets/ (create the snippets folder if it does not exist). Create a new file named something like my-color-scheme.css and paste the template into it, replacing the HSL values with your own.
2

Open Obsidian's Appearance settings

In Obsidian, go to Settings → Appearance. Scroll to the bottom of the panel to find the CSS snippets section.
3

Reload and enable the snippet

Click the reload icon (↺) next to “CSS snippets” to pick up your new file. Your snippet file will appear in the list. Click the toggle next to its name to enable it. Colors update immediately — no restart required.
4

Iterate on your colors

Edit the .css file in any text editor while Obsidian is open. After saving, click the reload icon in the CSS Snippets panel again (or use the community plugin Snippets Commands to bind a hotkey) to hot-reload the changes.
Use a browser-based HSL color picker — such as the one built into Chrome DevTools — to preview HSL values visually before committing them to your snippet. Open DevTools in Obsidian by pressing Ctrl+Shift+I (or Cmd+Option+I on macOS), then use the Elements panel to inspect any colored element and click its color swatch to open the picker inline.

​
Share Your Color Scheme with the Community

If you are happy with your scheme and think others would enjoy it, you can propose it for inclusion as an official built-in scheme in Shimmering Focus.

Suggest your color scheme on GitHub Discussions

Open a discussion in the Suggest your color scheme for inclusion in Shimmering Focus category. Submissions of classic, well-known palettes are especially welcome. Accepted schemes are credited to their contributor in the theme’s README.
All five current built-in schemes — Gamma, macOS Native, Coffee, Everforest, and Gruvbox — started as community contributions before being merged into the theme. See the Color Schemes Overview for the full list and their contributors.

Build docs developers (and LLMs) love

Get started for freeTalk to us