I’ve been building up a small library of little css snippets like Andy Matuschak mode - V2.7 (updated for 0.7+ new panes), "Naked" Embeds (CSS tweak) and others. Often these snippets are theme-independent and can be dropped into other themes.
Rather than continuously copy-paste these snippets when trying new themes, I knocked myself up a little process using SASS to mix and match these snippets and put them into others’ themes for me.
I thought I’d share that process here. (Note, if you want to try this yourself, first install SASS on the command line)
- Firstly, I created myself a
.themesfolder in the root of my Obsidian vault (it begins with a dot so it doesn’t show up in obsidian).
- Inside that folder I create a subfolder called
mixinswhich will contain the css snippets I wish to ‘mix in’ to my themes. I put each in a separate css file (
- I create my
.themes/obsidian.scssfile, which will be used to compile everything together:
@use '../obsidian.css'; // the theme I'm using @use 'mixins/andy-matuschak-v2'; // Andy Matuschak mode @use 'mixins/naked-embeds'; // Make embeds blend in with the rest of the content @use 'mixins/collapsing-sidebars'; // collapsible sidebars @use 'mixins/editor'; // show whitespace / line breaks
- Now, all that’s left is to compile the obsidian.scss file with SASS as follows:
From the vault root directory:
sass ./.themes/obsidian.scss ./obsidian.css
That’s it! Your mixins will be added to the bottom of the obsidian.css and your changes should be visible within moments.
Just be aware that if you try and compile the scss file again, it will use your current obsidian.css file which already has your mixins in it. Before compiling again, you might want to re-apply whichever theme you are using so that the mixins get wiped before re-compiling.