Theme Design Utilities

Some utilities and Quality-of-Life features for designers of Obsidian themes.

Table of Content

Commands Added

Mobile Emulation

Conveniently enable the mobile emulation of Obsidian, i.e. how Obsidian would look on mobile. This helps with styling your theme for mobile.

Cycle between All Three Modes

Cycles between Source Mode, Live Preview, and Reading Mode. Set a hotkey to quickly check how the theme looks in all three view modes.

Cycle through Installed Themes

Cycles between all installed themes. As opposed to the Theme Switcher Plugin, this does not open a modal, but rather directly switches to the next installed theme.

Theme Cycling Demo

Light/Dark Mode Toggle

A simple command to toggle between light and dark mode. Set a hotkey to quickly change the mode of the theme.

Screen Recording 2022-01-05 at 22 36 10

Freeze Obsidian

Freeze interaction with Obsidian, after a small delay. During that delay, you can create fleeting elements like context menus or tooltips which will stay on screen. (Note that this only works while the console is open.) To unfreeze Obsidian, simply click the “play” button which appears at the top of Obsidian.

image

Garble Text

Garbles all text in the whole app. Ungarbles elements that are hovered. This way you can share screenshots while maintaining privacy.

.foobar Test Class

This command adds/removes a test class .foobar to the DOM-element .app-container. This way you can quickly toggle some CSS on-and-off for debugging purposes, without having to enable/disable a snippet.

.

app-container

.

foobar

h1

{

color

:

red; }

Red Outlines for Debugging

Add red outlines to all elements. Run the command again to remove the outlines. THe outlines are useful for debugging purposes, essentially serving as the CSS equivalent for console.log().

Permanent Test Notice

Post a notice (notification) that stays on screen until you click it. This is useful for styling notices, as they normally quickly fade away.

Screenshot 2022-01-05 22 28 09

CSS Feature Compatibility (Chrome Version)

  • Will display a notice with the current Chrome version utilized by Obsidian to render CSS. Sites like MDN or W3-Schools usually document the minimum Chrome version required for a certain CSS feature at the bottom of the feature’s documentation page.
  • On iOS, Obsidian uses the Safari engine, for which the version matches the iOS version the user is using. Prevalence of iOS versions – and therefore underlying Safari versions to target – are published by Apple itself.

If you are using stylelint, you can also simply use the nifty stylelint-no-unsupported-browser-features plugin, and add this to your .stylelintrc.json:

{
	

"extends"

: [

"

stylelint-config-recommended

"

],

"plugins"

: [

"

stylelint-no-unsupported-browser-features

"

],

"rules"

: [

"plugin/no-unsupported-browser-features"

: [

true

, {

"browsers"

: [

"

last 10 Chrome versions

"

,

"

last 3 iOS versions

"

],

"ignore"

: [

"

css-masks

"

],

"ignorePartialSupport"

:

true

}], ] }

Cheatsheet

Open a cheat sheet showing the Obsidian CSS classes.

Obsidian API Model

Other Resources for Obsidian Theme Designers

Obsidian Plugins

Guides

Installation

This plugin is available in Obsidian’s Community Plugin Browser: SettingsCommunity PluginsBrowse → Search for “Theme Design Utilities”

Contribute

Pull Requests adding more utilities are very welcome!

Please use the .eslintrc configuration located in the repository and run eslint before doing a pull request, though. 🙂

#

Run eslint fixing most common mistakes eslint --fix

*

.ts

About the Developer

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

Donate

Buy Me a Coffee at ko-fi.com

If you feel very generous, you may also buy me something from my Amazon wish list. But please donate something to developers who still go to college, before you consider buying me an item from my wish list! 😊

Amazon wish list

Leave a Reply

Your email address will not be published.