Customizing Obsidian's Digital Garden Theme

I haven't tinkered a lot with my digital garden in Obsidian. I thought it was cumbersome to have to go through the plugin settings to change the theme. Turns out you can update it and customizing much more efficiently by just downloading the repo and making changes with a code editor.

In reality, the Digital Garden plugin simply spins up an Eleventy website and adds your Obsidian notes selected for publication. The gazillion themes listed under the plugin settings are really just all the available Obsidian themes.

So to update and customize your Digital Garden theme:

• Clone the repo locally.
• Edit ./.env (THEME and BASE_THEME parameters)
  • For THEME, you want to put the full URL to a theme's raw CSS file, e.g. for the Carbon theme, you set it to: https://raw.githubusercontent.com/vhbelvadi/obsidian-carbon/refs/heads/main/theme.css.
• If you want custom CSS, create the ./src/site/styles/user folder and put it any CSS/SCSS file with your custom rules.
• npm install then npm run start

It's a bit annoying because even though it looks like the local dev app is doing a hot reload, you actually have to stop the process and run npm run start again to see the changes take effect when you modify the .env file, or when you add new CSS/SCSS files.

After all this, you simply need to push your changes to the repository and Netlify should pick up the changes automatically.

Sources:

• Digital Garden: Adding custom components