Shimmering Focus ⟡

A minimalistic and opinionated Obsidian theme for the keyboard-centric user.
🏆 Winner Obsidian October 2022 (Category: Theme Update).

Features
More on the Theme

Features

Design Philosophy

Radical Minimalism: Buttons and side bars not relevant for keyboard users are removed. UI elements that require the mouse are still accessible on hover. 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: Dozens of customization options available via Style Settings Plugin. (Due to the theme rewrite for Obsidian 0.16, many settings are still missing, though.)

Selected Theme Features

Emphasis of Pandoc Citations and Footnotes. (Install the Pandoc Reference List Plugin for improved styling.)
Alt-text of images is used as caption.
Images can be zoomed in by clicking and holding. You can also toggle between reduced and original size via command (requires Style Settings Plugin).
Code Blocks: Various improvements like language display, disabled wrapping, and line numbers per code block.
Extensive Styling for the Longform Plugin, including alternative background color and serif-fonts for notes in longform projects.
Distinguishable Link Types: Internal links have double underlines, external links normal underlines, alias-links dotted underlines, and heading-links dashed underlines.
Annotation Tags: Tags that are emphasized when used inline (not in the YAML Frontmatter). They are meant as visual guides for reading and literature notes. They include: #definition, #question, #goal, #todo, #summary, #important, #main, #critique, #gap, #litreview, #quote, #agree, #disagree, #example, #data, #method, #idea, #epistemic-break, and #sidenote. To add your own annotation tags, you can use the Colorful Tags Plugin.
The only theme I am aware of where Vim Mode has been explicitly styled.
…

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)

CSS Classes

Add a cssclass to your YAML front matter to enable styling only for this particular note.

---
cssclass: name
---

Available CSS classes are:

full-width: Disables "Readable Line Length" for the note.
private: Marks note as private. See Private Mode.
writing: Uses writing-related styling like serif fonts in the note.
no-inline-title: Removes the inline title for that note only.
bibliography-list: Displays lists in the style of academic bibliographies (Reading Mode).
list-2-col-cards: Turns list items into two columns of simple cards (Reading Mode).
remove-dataview-title: Removes the header from Dataview results.

Callouts

Shimmering Focus adds a custom sidenote callout, which moves the callout to the side like a small infobox or an aside. Size and outdention can be customized via Style Settings.

> [!SIDENOTE]
> This note will appear to the side

In addition, the sidenote-callout and to the existing callouts from Obsidian Core, the theme adds the following callouts:

URL
config
attachment, file

Private Mode

When the style setting Private Mode is enabled, notes with the cssclass private are garbled. Private Mode is intended to be temporarily enabled during screen sharing in video calls.

If the Supercharged Links plugin is installed and cssclass is added to the Target Attributes for Styling in its settings, occurrences of the note name in some plugins like the File Explorer or Quick Switcher are also blurred. (Note content may still show up indirectly via other plugins, for example in Dataview queries.)

You can also use this standalone snippet together with the Style Settings and Supercharged Links plugins to use Private Mode with a different theme.

Recommended plugins

Style Settings Plugin: Unlocks dozens of customization options.
Supercharged Links: The theme includes various built-in styling for the Supercharged Links plugin, e.g., appending a "🌱" to notes with the #seedling tag. To enable all Supercharged-Links-related features, add kanban-plugin, status, aliases, cssclass to the Target Attributes for Styling text field in the plugin settings.
For academics: Pandoc Reference List Plugin
For macOS: Electron Window Tweaker: Position the traffic lights for even more native macOS look (same position as in Safari: X = 20, Y = 18). You can even completely hide the traffic lights by using negative values, for example X = -60.

While using the theme, you can disable the Hider Plugin, since Shimmering Focus already hides more than the plugin does.

More on the Theme

Create and Share your own Color Scheme

With Shimmering Focus, you can create your own color scheme with this CSS snippet. You are welcome to share your color scheme.

You can also recreate well-known color schemes and share the snippet for it, and I will add it to the core theme as a style setting.

.theme-light.theme-light {
	--bg-hue: 233;
	--bg-sat: 20%;

	--color-accent: hsl(184 79% 35%);
	--color-accent-hsl: 184 79% 35%;
	--interactive-accent: hsl(184 79% 30%);

	--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: 233;
	--bg-sat: 15%;

	--color-accent: hsl(184 79% 45%);
	--color-accent-hsl: 184 79% 35%;
	--interactive-accent: hsl(184 79% 30%);

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

/* Note that `--color-accent-hsl` should have the same values as `--color-accent`, and that `--bg-hue` will override the background colors you have set in the Style Settings. */

Insider Release

The theme targets the latest public release, which is the version you are going to get from the Obsidian theme store.

If you are using the insider release, you can use the insider-release branch, where theme adaptations to the insider release are published. Download the insider-release-version and save the file in {your-vault-path}/.obsidian/themes/Shimmering Focus/ (replacing the theme.css already there). When the insider is released to the public, the insider-release branch of the theme will be merged into the main branch, i.e., it will be made available in the community theme store.

Contribute

Contributions in the following areas are welcome:

Fixes for Windows or Linux (since I do not own a device for them)
Color Schemes
Fixes for plugins

Other types of contributions are also welcome, though you should ask first.

Credits

About me
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.

Profiles

Thanks

This theme includes snippets or ideas from: @SlRvb, @Atlas, @CecilaMay, @DamianKorcz, @Mara-Li, @kepano, @jdanielmourao, @deathau, @MelvinTing, @EmrieCandera, @lkadre, @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.

Buy me a coffee

irisfish531 / shimmering-focus Goto Github PK