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

brimwats · February 13, 2021, 11:32am

Sorry to hear about your computer! That’s always a pain. I would definitely love the CSS when you have time to relax.

Binary_Dissonance · February 13, 2021, 2:39pm

Looking forward to this, as it will hopefully facilitate my want of colouring different folders (maybe it will work with the outliner too) according to their progress status.

davecan · February 13, 2021, 6:17pm

I’m very interested in your solution @Lithou.

I just tested this CSS and it worked well, but only highlights the folder title itself.

div.nav-folder-title[data-path="folder-name-here"],
div.nav-folder-title[data-path="folder-name-here"]:hover {
  background-color: red;
}

OliverM · February 14, 2021, 4:53pm

Thank you so much for this @brimwats ! An excellent resource.

OliverM · February 14, 2021, 4:55pm

Ah sorry to hear that! When you can do post the CSS for the color here and maybe some of our super talented coders might be able to hack it into something akin to a plugin. I know that @kepano was able to great a plugin for toggling CSS functions so I imagine something like that could be possible?

Lithou · February 15, 2021, 1:37am

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:

    .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:

    .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):

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

Source Code:

Colored Folders.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.

arnonel · February 17, 2021, 9:45am

I like the heading colored, but would like the 2nd level to be default. Thoughts on how to achieve this?

Binary_Dissonance · February 19, 2021, 7:26pm

Not sure if this is what you want but this only colours the folder heading:

.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"] {
background-color: red;

}

Binary_Dissonance · February 19, 2021, 7:30pm

Thanks for this Lithou. Do you know of any way to target specific headers in the Outline view? It appears that there isn’t, as there is no data path to them, just a label in a div; I don’t think there is any way to target a text label in CSS.

Lithou · February 22, 2021, 4:00am

You are correct that you cannot target headers based on text. Could you explain your use case for this? There might be an alternative method.

For example if you wanted your introduction to be a specific color (say blue). You can’t target an outline item based on the text “introduction”. However, since the outline is laid out in a nested format, you can target items by where they fall in the outline.

So if your introduction is always the first H1 item or it’s always the first H2 item under the second H2 item, then you can target it that way. It’s not as robust, of course, but there are some ways you can do it.

Binary_Dissonance · February 22, 2021, 2:11pm

Thanks for the reply, Lithou.

I’m wanting to use it as a status indicator. When I’m working on assignments (and other things), I like to break them down into smaller sections and then colour code them according to current state of progress - it’s a quick visual way to see what needs to be done and was something I used when using Scrivener previously.

So, if I was able to colour the items according to their H size, then that would work as I could just assign H2 to H6 to represent different status colours - it might break the structure overview of the outliner but I’m less concerned about that.

Any pointers would be greatly appreciated

Binary_Dissonance · March 13, 2021, 1:01pm

Hey Lithou, not to harass you but did you find a way to accomplish targeting headers in the outline view? I keep trying to find a way but it eludes me…

Harvison · March 13, 2021, 4:17pm

I am only able to get the first two folders to activate in color. I tried changing the --Fold: section and still only 2. I am not sure what I might be doing wrong @Lithou ?

Update:

I figured it out. Thanks so much for creating this.

Any help would be apprreciated,
Thx,
Dan

linbynd · April 22, 2021, 8:40am

Just started using this CSS (thanks @Lithou) and definitely an awesome addition!!! @brimwats thank you for the amazing write up!!

Cajun · April 25, 2021, 3:45pm

QQ: Does the Colored Folders.css go in the css-snippets file folder? Which is inside the plugins file folder? Does anything else need to happen (besides making sure the CSS Snippet Manager is installed), in order for this stylesheet to work?

tomhaley · April 25, 2021, 11:11pm

You can open the snippets folder from the Obsidian appearance settings. Put the snippet CSS file in there, then reload Obsidian and enable the snippet in the appearance settings.

linbynd · April 30, 2021, 3:35pm

yes it goes in the snippets folder and you just add the folders that you need to the CSS file. There are 16 colors that lithou has put in that you can use

Cajun · May 13, 2021, 1:58pm

Question: I’m using a light theme. I was able to change the main folder text color to white, it’s readable and has enough contrast. However, I have tried changing the subfolders, as well, but I have not found a way to improve the text contrast on the subfolders. Yes, I have also check with the theme CSS and am still unsuccessful. I will keep working on this, but thought someone here might have a suggestion.

Erisred · May 13, 2021, 3:40pm

@Cajun - What code did you use? Perhaps you were being too specific with the class selection?

.nav-folder-title-content {color: #FFFFFF;} should be all you need to change color on ALL the folders, at every level.

Cajun · May 13, 2021, 4:28pm

@Erisred thank you that worked. I also added it at the end of the file. Any chance you have another idea for increasing the contrast of file names? : - )