/shimmering-focus

A minimalistic Obsidian theme focused on readability and condensed information display

Primary LanguageCSSMIT LicenseMIT

Shimmering Focus ⟡

A minimalistic Obsidian theme focused on readability and condensed information display.

Promo Screenshot

Table of Contents

Features

Hiding/Showing UI Elements

  • By default, many UI elements are hidden, directing your focus to what matters: your notes.
  • You can re-enable individual hidden UI elements by using the Style Settings Plugin.
  • The status bar, header bar, graph controls, resize handles, and collapse arrows are hidden but become visible upon hovering or being active.
  • Obsidian 0.13+: in Source Mode, URLs on non-active lines are folded.

💡 The YAML frontmatter in Preview Mode is not removed by this theme, since you can already disable it with the native Obsidian settings under Settings ➞ Editor ➞ Show Frontmatter.

headerbar visible on hover

💡 You can add your own Annotation Tags by adding a snippet using this template.

Max View & Focus View

  • Max View (disabled by default): When the left sidebar is hidden, line length is extended to full length, and images & PDFs are expanded to full width. Readable line length and smaller image & PDF size are re-applied when the left sidebar is shown again.1 This is useful when dealing with big tables or many images. To enable Max View or adjust the size of images & PDFs, use the Style Settings Plugin.
  • Focus View (disabled by default): Hiding the left side bar will also hide the right sidebar, with the right side bar staying hidden until the left one is shown again. This synergizes with Max View, but also works independently. To enable Focus View, use the Style Settings Plugin.

💡 For both features, it is useful to set a hotkey for the built-in command Toggle left sidebar.

Promo Max View

Annotation Tags

Type one of the following tags (e.g. #definition) to get a colored annotation tag. Also works in Edit Mode. Intended for Annotations when reading academic papers.

list-of-all-annotation-tags

Image-related Features

  • Click & hold an image to zoom (Preview Mode).
  • Alt-text is automatically used as image caption (Preview Mode).
  • Set a default image size with the Style Settings Plugin.
  • You can also use Max View to toggle between reduced and full image sizes.

Multi-Color-Highlighting & Spoiler Syntax

  • Surround highlights with * or ** for alternative highlight colors (*==cyan==* and **==yellow==**).
  • You can use the Extra Markdown Commands Plugin to get hotkeys for them.
  • Spoiler Syntax: Emphasized Strikethroughs (*~~spoiler~~*) will selectively hide text, except when hovered or the active line.

CSS Classes

Add cssclass: {name} to your yaml front matter to activate specific styling of the note in Preview Mode. The following CSS classes are built in with this theme (more coming in the future):

  • cssclass: clean-top: Removes Metadata Information, YAML frontmatter, and Breadcrumbs trail from the top of the note.
  • cssclass: clean-embeds: Embeds in that note are fully embedded, looking like one document.
  • cssclass: dataview-list-in-table: If you are using a dataview query where some table cells contain lists, use this CSS class to remove the vertical table lines that are off.
  • cssclass: writing (Obsidian 0.13.20+): Uses a serif font and a tinted background the note.

Focus Line Highlight

Focused Line Highlight

In contrast to typical active line highlights, the focused line highlight will only highlight the direct line where the cursor is located. However, this feature disables the ability to scroll horizontally, so it is disabled by default and must be enabled in the Style Settings.

Gutter Indicators

To increase the scannability of long notes, the presence of some easy-to-miss elements are indicated in the gutter. All indicators can be turned off with the Style Settings Plugin.

  • Footnotes (all modes)
  • Search Result Matches (Source Mode & Live Preview only)
  • Unresolved Links (Preview Mode only)

image

Citation Syntax

Using a double-blockquote (>>) after a normal blockquote (>) will result in text formatted like a citation.

Screen Recording 2022-01-09 at 16 17 17

Multi-line Admonitions

Using triple-blockquotes (>>>) will create admonitions which work in all three modes. No Plugin or cssclass required.

Screen Recording 2022-01-09 at 14 58 54

For Academic Work

For Writers

  • Trailing white spaces are indicated when there is more than one space. This is useful for the Markdown Two Space Rule.
  • Extensive Styling and settings specifically for the Longform Plugin. Prepend a _ to file names of longform scenes to create sub-scenes that are indented in the sidebar.

Further Features

  • Relationship lines in various side bar tabs
  • File explorer icons
  • Customizable Brightness of the Theme
  • Dark Mode for PDFs (when using the theme in dark mode)
  • Styled progress bars (<progress>)
  • Resizable Graph View Controls (resize at the bottom-right)

⬆️ Go Back to Top

Design Principles

Extreme Minimalism

  • This theme is mainly intended for experienced users using mainly the keyboard for navigation.
  • As much clutter as possible is removed, letting you focus on content & information that matters.
  • You can re-enable all hidden elements by using the Style Settings Plugin.

Condensed Display of Information

  • Screen real estate is used much more efficiently to display more information at the same time.
  • Useful for smaller screens, split screens, bigger font sizes, or simply to see more information without having to scroll.
  • Images and PDFs are displayed at a smaller sized. (Size can be configured with the Style Settings Plugin,) Click and hold an image to enlarge it again, or use the Max View Feature.
  • Obsidian 0.13+: in Source Mode, URLs on non-active lines are folded.
  • Option to trim filenames in the sidebar for even more compactness.

Screenshot 2021-10-23 17 06 22

High Readability & Scannability

  • Brightness and line length are both adjustable via Style Settings Plugin.
  • Gutter Indicators and the visual emphasis of Pandoc Citations and footnotes increase the scannability of longer notes.
  • Wider Input boxes, clearer icons, increased size of small UI elements (e.g. collapse indicators), thicker lines for tables & hr.
  • Increased contrast throughout, especially with the annoying gray font on light-gray background.
  • Decreased font size variation to increase readability & information density
  • At the same time increased distinctiveness of different classes through subtle variation in typeface, font style, or backgrounds.
  • Alternating row colors in tables, Command Palette, and Quick Switchers, ...
  • Increased readability of bold in dark mode by applying subtle text shadow.
  • Plugin names in the Command Palette are moved to the right and more visually distinct.
  • Overscroll at the bottom of the editor and settings tabs.
  • Easy-to-read fonts for every use case:

Screen Recording 2021-12-01 at 00 51 21a

⬆️ Go Back to Top

Customization

Style Settings

This themes supports dozens of customization options via the Style Settings Plugin.

Screenshot 2021-12-19 21 12 59

Further Customization Options

Plugins

List of Compatible Plugins

Shimmering Focus is compatible with and has includes styling for all core plugins, the most common community plugins, as well as about a dozen more community plugins.

➡️ Full list of compatible plugins.

Custom Checkboxes

The theme is mostly compatible with custom checkboxes by SlRvb by adding this compatibility snippet.

Instructions for specific Plugins

In accordance with the minimalistic philosophy of the theme, unnecessary UI elements of some plugins have also been removed. However, you can still access the full plugin functionality.

  • Longform: Prepend a _ to file names of longform scenes to create sub-scenes.
  • Kanban: Right-click cards to edit them.
  • Supercharged Links: The theme includes various built-in styling. You can turn those of with the Style Settings plugin.
  • Breadcrumbs: Even with buttons removed, you can still refresh the index via Command Palette. When Supercharged Links is installed, hovering over a link with the up yaml field displays the content of that field.
  • Quick Explorer: Re-enable the title bar with the Style Settings Plugin for the breadcrumbs
  • Dataview: If the table lines are off, use the dataview-list-in-table CSS Classes
  • Ozan's Image in Editor: Image Sizes are affected by the Image Settings & by the Max View Feature.
  • Sliding Panes: As long as you are using rotated headers, the header is permanently shown.
  • Recent Files: The active File is deliberately hidden, because, well it isn't recent yet?
  • Starred (Core Plugin): To be able to star searches, re-enable the Starred pane buttons with the Style Settings Plugin

Built-in Styling for Supercharged Links

This theme includes built-in styling for the Supercharged Links Plugin. This means you can make use of the plugin's features without the need write your own CSS! (If you already have your own Supercharged Links setup, you can turn those of with the Style Settings Plugin.) For now the theme includes the following styling:

  • Links to Kanban Boards get "🎆" prepended
  • Links to notes with the tag #seedling get "🌱" prepended
  • Notes with #evergreen get "🌲" prepended
  • Notes with #moc get "🗺" prepended
  • Notes with #person get "👤" prepended
  • Notes with #checklist get "☑️" prepended
  • Links to Literature Notes get a tooltip with the content of the title yaml key when hovering and get "📖" prepended. (Actually, this applies to any note with a title yaml frontmatter key.)
  • Breadcrumbs users: Links to notes with the up yaml key get a tooltip with the content of that yaml key, and get "🥖" prepended.

Demo tooltips

Setup

  • Install the plugin.
  • Make sure you have Parse all tags in the file enabled in the plugin's settings.
  • If you are using the "Page Preview" Core Plugin, configure it to not display previews for the cases where you want the tooltips to show up.
  • Paste the following text into the field Target Attributes for styling:
kanban-plugin, title, up

Installation

You can find Shimmering Focus in Obsidian's community themes browser under Obsidian Settings ➞ Appearance ➞ Themes ➞ Manage.

Contribute to the Theme

Contribute CSS Snippets

The following types of CSS snippets are self-contained and relatively easy to contribute:

/* template for adding a preset color scheme to Shimmering Focus */
.theme-dark.theme-dark,
.theme-light.theme-light {
	--light-hue: 220;
	--dark-hue: 0;
	--dark-sat: 0%;
	--light-sat: 0%;
	--brightness-light: 15%;
	--brightness-dark: 5%;
}

If you have any of those working in a CSS snippet, please open an issue and I'll add them to the theme. 🙂

Translation of the Theme's Style Settings

Very welcome are localizations of Style Settings Plugins, so the theme is more accessible to non-English speakers. This requires no knowledge of CSS. Please get in touch with me first if you are interested in translating, since this one requires a bit of explanation.

Related Work

If you use Alfred, you can also check out my themes for Alfred.

Credits

About the Theme Designer

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 visit my academic homepage and get in touch.

Please report theme-related requests by creating a GitHub issues — it is easier to keep track of them there.

Donations

Donations are welcome via PayPal or Ko-Fi. 🙏

Thanks

Thanks for help and/or CSS snippets:

  • @SlRvb
  • @javalent
  • @Chetachie
  • @Atlas
  • @jdaniel
  • @NothingIsLost
  • @Moonbase59

⬆️ Go Back to Top

Footnotes

  1. Requires the Readable line length editor setting to be enabled. ↩