Changing the background color of an obsidian folder

Help
3

The Issue

“data-path” is a local Obsidian variable. You need the data path to be in context of the vault. It appears this is a root folder so the data path would be 01-Notizen

In addition, nav-folder-title is not the class we want to modify. It should be nav-folder which contains nav-folder-title

Solution

The corrected CSS snippet would be,

.nav-folder [data-path="01-Notizen"] {
    background-color: green;
}

However, using browser default color names might not be the best fit for the Obsidian UI. I recommend using the Obsidian green that coincides with your theme (default or otherwise)

In addition, the color may be quite distracting and clash with the font color. Therefore, I recommend using rgba notation to select an alpha value (opacity)

You can change the opacity to whatever you want. Remember to keep it as a value between 0 and 1, I chose 0.25

.nav-folder [data-path="01-Notizen"] {
    background-color: rgba(var(--color-green-rgb), 0.25);
}

If you plan on doing this for more folders; remember to ensure theres a -rgb to the end of the color variable

Here’s a list of all obsidian color variables

    --color-red-rgb
    --color-orange-rgb
    --color-yellow-rgb
    --color-green-rgb
    --color-cyan-rgb
    --color-blue-rgb
    --color-purple-rgb
    --color-pink-rgb

Best of luck!

4 Likes