A minimalistic Obsidian theme focused on readability and condensed information display.
- Features
- For Writers
- Design Principles
- Customization
- Plugins
- Installation
- Contribute to the Theme
- Related Work
- Credits
- 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
.
💡 You can add your own Annotation Tags by adding a snippet using this template.
- 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
.
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.
- 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.
- 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.
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.
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.
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)
Using a double-blockquote (>>
) after a normal blockquote (>
) will result in text formatted like a citation.
Using triple-blockquotes (>>>
) will create admonitions which work in all three modes. No Plugin or cssclass
required.
- Pandoc Citations (
[@citekey]
) and footnotes are visually emphasized. - Footnotes have separate indicators in the gutter.
- The built-in styling for Supercharged Links includes tooltips showing the literature note for popups.
- The alt-text of images is used as caption text, in line with Pandoc's conversion behavior
- The Max View is useful for displaying wide markdown tables.
- Multi-Color-Highlighting and Annotation Tags have specifically been made for academic reading.
- 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.
- 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)
- 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.
- 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.
- 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:
- iA Writer Quattro as clear sans font for the editor
- Recursive for as a clear UI font
- Input Mono as monospace font for code
- Optima as humanist font for headings
- Crimson Pro as serif font for writing
This themes supports dozens of customization options via the Style Settings Plugin.
- To add your own annotation tags, use this template.
- To switch to outlined Material Icons, add this CSS snippet.
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.
The theme is mostly compatible with custom checkboxes by SlRvb by adding this compatibility snippet.
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
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 atitle
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.
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
You can find Shimmering Focus in Obsidian's community themes browser under Obsidian Settings ➞ Appearance ➞ Themes ➞ Manage
.
The following types of CSS snippets are self-contained and relatively easy to contribute:
- CSS Classes, e.g. for tables.
- More built-in styling for the Supercharged Links Plugin.
- Support or fixes for plugins that are not supported yet.
- Most open feature requests are also relatively easy to implement, I simply haven't gotten the time to get to them.
- Color Schemes which can be selected via Style Settings. Simply use the following template. (Note that these will change, once I added options to customize other colors like accent colors.)
/* 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. 🙂
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.
If you use Alfred, you can also check out my themes for Alfred.
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.
- Discord:
@pseudometa#9546
- Twitter: @pseudo_meta
Please report theme-related requests by creating a GitHub issues — it is easier to keep track of them there.
Donations are welcome via PayPal or Ko-Fi. 🙏
Thanks for help and/or CSS snippets:
- @SlRvb
- @javalent
- @Chetachie
- @Atlas
- @jdaniel
- @NothingIsLost
- @Moonbase59
Footnotes
-
Requires the
Readable line length
editor setting to be enabled. ↩