I was building up a small library of css snippets, and mixing and matching via copy-paste was getting tiresome.
So, I knocked myself up a little solution using https://sass-lang.com/
To use this solution, you need to follow the instructions on the website to install the SASS command line utility.
For my purposes, I created a subfolder in my Obsidian vault called ./.themes
where my obsidian.scss
file lives.
I also created a subfolder for mixins (./.themes/mixins
) containing small snippets like "Andy Matuschak" mode and collapsing sidebars (and my preferred custom colours for my Base2Tone theme)
For themes I want to switch between which have git repositories, I check them out into the .themes folder, and can reference them from my obsidian.scss
with the @add
directive, alongside @add
ing any of the mixin tweaks I want (I've included an example of my obsidian.scss below)
Once I'm happy with the theme and mixins I want, I run the following command from the root of my obsidian vault: sass .\.themes\obsidian.scss .\obsidian.css
This will compile the obsidian.css file and place it in my vault. A few moments later, Obsidian is looking different!
The syntax highlighting uses Prism.js and there are plenty of themes available.
Obsidian does wrap them in .theme-dark
or .theme-light
classes though, so you can't just drop in a theme and expect it to work.
This is exactly the kind of thing SASS is good at. Just wrap the whole theme in a .theme-dark {
or .theme-light {
block, and SASS will generate the appropriate css.
I've included the theme I'm using (originally from here) as an example.
Thanks so much @deathau for providing this resource! Using your instructions and the
*scss
you provided, I've been able to take parts of any Obsidian theme and modify them in specific ways with mixins (provided the theme uses the same naming convention as app.css). Namely, if I see something I like in a theme and if it's not too difficult to isolate the CSS, I try it first in my main SCSS file and then pull that code out to a well-named mixin. I'll credit this gist when I get what I've done checked in. It's based on Obsidian Nord, but without your code it would have been more challenging for me to identify design elements that I could make somewhat modular with mixins.