Shimmering Focus ⟡

A minimalistic and opinionated Obsidian theme for the keyboard-centric user.

🏆 Winner Obsidian October 2022 and 10th most downloaded theme in the Obsidian theme store.

---

• Design philosophy
• Features
• Commands
• Create your own color scheme
• Standalone snippets
• Contribute
• Licenses
• Credits

Design philosophy

• Radical minimalism: As opposed to a minimalism of colors, this theme focuses on a minimalistic user interface: UI elements not relevant for keyboard users are hidden, or only shown when needed. All hidden UI elements can be permanently re-enabled with the Style Settings Plugin.
• Condensed display of information: Unnecessary padding and white-space is removed, which is beneficial for small screens or higher zoom levels.
• High customizability: There are over a hundred customization options available via the Style Settings Plugin.

Features

• Smart hiding of UI elements: The tab bar is only shown when there is more than one tab open, and the sidebar tab buttons are only shown on hover.
• Images: Alt-text of images used as caption, images can be zoomed in via click-and-hold or toggled between reduced and original size via Style Settings.
• Tables: Highlighting of active cells, alternating row colors
• Vim mode: Explicit styling of Obsidian's Vim Mode, including various settings such as relative line numbers.
• For writers: Emphasis of Pandoc citations and footnotes, extensive styling for the Longform Plugin.
• Headings: Distinctive styling and various options for differentiating heading levels.
• High customizability: There are over a hundred customization options available via the Style Settings Plugin.
• Alternative color schemes submitted by the community are available by using the Style Settings Plugin.

Commands

When the Style Settings Plugin is installed, Shimmering Focus adds commands for toggling theme features:

• Toggle folding of URLs (Source Mode)
• Toggle between reduced and original image size (reduced size can be set in the respective style setting)
• Toggle readable line length (requires the Readable line length setting in Obsidian to be enabled.)

Create your own color scheme

With Shimmering Focus, you can create your own color scheme with this CSS snippet.

.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 100% 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%, 35%;
    --interactive-accent: hsl(184 79% 30%);

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

You can suggest your color scheme for inclusion in Shimmering Focus. Especially submissions of classic, well-known color schemes are welcome.

Standalone snippets

Some features of this theme are available as standalone snippets. These can be found in the snippets directory.

Contribute

Bug fixes, support for more plugins, or improvements for mobile are welcome. However, please ask before contributing entirely new features by creating a Draft PR or an issue.

All relevant source files are located in the source directory, and will be compiled via GitHub action when pushed to GitHub.

The theme uses lightning-css for syntax-lowering in its build. That means you can use modern CSS features like CSS-nesting, as the resulting theme.css will still be compatible with older Obsidian installer versions that do not support nesting yet. Furthermore, this theme targets Obsidian installer version 1.1.9, so feel free to use :has().

The theme is written completely dependency-free in vanilla CSS.

Licenses

• This theme is licensed under the MIT License.
• The two embedded fonts iA Writer Quattro and Recursive are licensed under the SIL Open Font License.
• The embedded Material Icon font is licensed under the Apache License.

Credits

• This theme includes snippets and/or ideas from: @SlRvb, @Atlas, @CecilaMay, @DamianKorcz, @Mara-Li, @kepano, @jdanielmourao, @deathau, @MelvinTing, @EmrieCandera, @Chetachie, @pryley, and @joelatschool.
• Many theme features are only possible thanks to the Style Settings Plugin by @mgmeyers.
• Thanks for helping me out in my early days of learning CSS: @SlRvb, @javalent, and @NothingIsLost.
• Community-made color schemes:
  • Gamma created in collaboration with @lkadre.
  • Everforest by @neuromancer.
  • Coffee by @keara and inspired by the Primary theme.
  • Gruvbox dark variant by @jasht1, light variant by robrecord.

About the creator
In my day job, I am a sociologist studying the social mechanisms underlying the digital economy. For my PhD project, I investigate the governance of the app economy and how software ecosystems manage the tension between innovation and compatibility. If you are interested in this subject, feel free to get in touch.

• Website
• Mastodon
• ResearchGate
• LinkedIn

Important

For questions, feature requests, or bug reports, please file an issue via GitHub. Due to the number of messages I receive, I am not able to respond to inquiries made elsewhere.