Digital Garden is the Obsidian plugin that lets me publish changes from my local obsidian here directly to the web on my personal website. Below are some helpful tips & tricks I've collected to streamline the process. 

----

## Appearances: 
#### Digital Garden Themes: 

- 80's Neon - dark mode 
	- ![[Pasted image 20230816173235.png]]
- Terminal 
	- ![[Pasted image 20230816174402.png]]
- Bubble Space
	- ![[Pasted image 20230817142703.png]]
- Everblush 
	- ![[Pasted image 20230817143911.png]]
- MagicUser 
	- ![[Pasted image 20230822101036.png]]
- Molecule
	- ![[Pasted image 20230822102448.png]]
- Notation 
	- ![[Pasted image 20230822102804.png]]
- Origami
	- ![[Pasted image 20230822103145.png]]




---


## Custom Code 

For further tweaks and customization, adding in your own CSS is helpful. Digital Garden docs provides a helpful guide to[ notes icon customizing ](1. https://dg-docs.ole.dev/advanced/note-specific-settings/#note-icons)and how to find this in the source files. 

##### Changing and adding icons

You can change and add your own icons the following way:

The ideal way to change the default icons is by adding the svgs in the img folder and setting the appropriate css vars in body in a [custom css file](https://dg-docs.ole.dev/advanced/adding-custom-components/#dynamic-css-scss):

```css
body {
  --note-icon-1: url(/img/your-custom.svg);
  --note-icon-2: url(/img/tree-2.svg);
  --note-icon-3: url(/img/tree-3.svg);
  --note-icon-fallback: url(/img/default-note-icon.svg);}
}
```

To add new icons, let's say, for 'stone', add a snippet like this (and add the relevant svg) in a [custom css file](https://dg-docs.ole.dev/advanced/adding-custom-components/#dynamic-css-scss):

```css
body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="stone"]::before,
body.filetree-note-icon .filename[data-note-icon="stone"]::before,
body.links-note-icon .internal-link[data-note-icon="stone"]::before,
body.backlinks-note-icon .backlink[data-note-icon="3"]::before {
  background-image: url(/img/stone.svg);
}
```