# Adding Color to Obsidian--- A Rainbow of Possibility!

**URL:** <https://forum.obsidian.md/t/adding-color-to-obsidian-a-rainbow-of-possibility/12805>\
**Category:** Feature archive\
**Tags:** pkm, macos, ui-ux\
**Created:** [February 11, 2021, 12:28pm UTC](https://forum.obsidian.md/t/adding-color-to-obsidian-a-rainbow-of-possibility/12805 "2021-02-11T12:28:31Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![Lithou](https://forum.obsidian.md/user_avatar/forum.obsidian.md/lithou/32/2121_2.png) [@Lithou](https://forum.obsidian.md/u/Lithou)\
**Post date:** [February 15, 2021, 1:37am UTC](https://forum.obsidian.md/t/adding-color-to-obsidian-a-rainbow-of-possibility/12805/11 "2021-02-15T01:37:29Z")

</div>

# Coloured Folder Snippet:

Thanks to everyone for their patience. Here’s the snippet for the coloured folders.

## Variables

- Most everything is defined as variables that you can change.
- All are defined under the “Root” section so it will remain the same for both dark/light mode
- You can change that by creating two sets of variables, one for each mode

## Folder References

- By default, the snippet is setup to grab folders that start with the numbers 0-9 and the letters A-F.
- This is my personal setup so my folders are always in the same order
- You can change it to whatever your folder names are.

* * *

Here is an example for the folder that starts with a zero:

```auto
    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"],
    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"] + .nav-folder-children{
    background-color: var(--Fold0);}

```

If you wanted to change that to refer to a folder named “Daily Notes” you can use just an equals sign as @davecan suggested above. Make sure to replace it for both lines:

```auto
    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path="Daily Notes"],
    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path="Daily Notes"] + .nav-folder-children{
    background-color: var(--Fold0);}

```

## Visual Examples:

These are the default colours for the folders (all currently collapsed):

 ![image](https://forum.obsidian.md/uploads/default/original/2X/a/af9ba0bf2fed2bf7299659a227424d4235aacf11.png)

Here’s a visual overview of what this snippet should look like/accomplish:

 ![image](https://forum.obsidian.md/uploads/default/original/2X/8/880d51ee4d73c3092e4f680082819ac2bae5063b.png)

## Source Code:

[Colored Folders.css](https://forum.obsidian.md/uploads/short-url/fvnw8aJPVR00TaQSdNGx2jqwkk6.css) (8.7 KB)

Note: I haven’t done any extensive testing yet with other themes/snippets so let me know if you have any bugs.

---

_[View the full topic](https://forum.obsidian.md/t/adding-color-to-obsidian-a-rainbow-of-possibility/12805)._