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

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.

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

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.

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

1 Like

@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? : - )

@Cajun - Sending PM. No need to clutter a discussion on color with a sidebar on high contrast :P.

1 Like

@Lithou - While working with @Cajun I believe we found a potential for improvement in your amazing colored folders snippet.

In it, you do specify the colors for the File names, and it looks like you specify folders to #ccccccFF (a shade of grey).
As a result, if a user is using a light theme, the names are (usually) a shade of grey/black, and do not render very well against your colors.

For their case, we simply added a snip to adjust these colors explicitly (and done so things will work in light and/or dark mode - which might be an unnecessary complication?):

.theme-light, .theme-dark {
  --file-title-color: #dddddd;
  --folder-title-color: #ffffff;
}
.nav-file-title-content{color:var(--file-title-color);}
.nav-folder-title-content{color: var(--folder-title-color);}

If you’re so inclined, please consider adding an adjustment to these elements so it’s all in one place (your snippet).

Thanks for your work!

*Edit - found the --FoldText variable in the snip. I missed it first time through.

1 Like

@Erisred and @Cajun thanks for bringing this up. I wrote this with dark mode primarily in mind. The code is set such that you can easily set alternate colors for light/dark mode. Simply move the user defined variables at the top to respective mode selectors and you are set.


These are the color and other variables used by the snippet. By default they are all under :root which allows them to be used and called universally regardless of theme.

For example: If you wanted to change the text color, move it into a selector for each theme and adjust values accordingly like so:

3 Likes

@Lithou thank you for the detailed response, this is very helpful!

Thank you, this is exactly what I’ve been looking for!

I am unable to get it functioning. I’ve copied the css file into the snippets folder and turned it on in Appearance.

Nothing appears to have changed. I’ve even recreated folders with the leading numbers beginning with 0.

Would anyone possibly have an idea what I may be missing. I am on Win10, and Obsidian v0.12.3.

Thank you so much…
Jacqui

Hey I really love this theme but I would like to apply the colors to the first or second level subfolders, instead of the main folders.

So my use case is:

  • Folder 1
    • 100 Folder A
    • 200 Folder B
    • etc
  • Folder 2

And I only want the second level of folders (100 Folder A and 200 Folder B) to be colored. Is that possible?

@pbhope I’m glad you like it.

You can change the CSS quite easily to accomplish what you are looking for.

Changing Folder Target

The first thing you want to change is to not just target the top level folders. This can be done by simply changing the CSS from targeting the direct child of the root folder to any child. This is done by replacing the “>” symbol between “.nav-folder-children” and “.nav-folder” with a space.

So go from this:

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

To this:

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

Adjusting the Regex

If you have done this, you won’t notice a difference… yet.

The original snippet uses the [data-path^=“0”] to target a datapath that starts with the desired character. In your case, you still want this to be the case, however, obsidian includes the parent folders in the data path. This is why you are not seeing any change yet.

This means that for your example case, the data path for you first sub folder is not “100 Folder A” but is rather "Folder 1/100 Folder A

So any folder inside Folder A will have a data path that starts with that folder name.

We can adjust the regex to target the sub-folder, however.

We want to instead target data paths that have any number of characters followed by a “/” then a digit. We do this by calling “contains” which is “=" instead of the “starts with” which is “^=”
So we change from: [data-path^=“0”] to [data-path
=”/0"]

Alternate Option

The one downside to this is that as soon as you have a folder that contains a “/” and a number, all sub folders of that folder will also contain that “/” and number in their data path.

If you don’t want this behaviour, the best option is to use the end of the folder as your designation instead of the start. This will eliminate sub-folders being selected based on their parent folder.

For example:
Using [data-path$=“0”] will target any data path that ends with a zero.
Then name your folder “Folder A -0” to have it apply. If you then have a sub folder named “subfolder example” its data path will be “Folder 1/Folder A -0/subfolder example” and will not be selected since it doesn’t end with the zero.

Let me know if you have any more questions. :slight_smile:

2 Likes

Thanks for the ideas and CSS shared in this thread.

Really do like the visual support given by the coloured folders. However, with the current CSS, every time I add or remove a folder, I have to edit the CSS to change a specific folder name.

Is it possible to create a colouring scheme that colours folders just by their position in Obsidian: so the first folder is red, the second is orange, the third is green, etc? And is it possible to limit this just to top-level folders, the way it works now, without sub-folders taking on their own colours?

I have tried editing the CSS provided here and on this thread, but can’t make anything work. I can make all top-level folders have the same background colour, but the rainbow eludes me.

Thanks

Angel

Hope to support color labels.

Has anyone had any problems with this snippet on the latest insider Obsidian mobile build (1.0.4) on ios. It is working on my mac book and iPad and was working on ios prior to this. The settings->appearance folder shows the coloredfolders.css file along with a couple of other snippets but the coloredfolders.css entry doesn’t have an on/off toggle next to it. I have tried deleting the app and reinstalling it via testFlight. Any ideas?

FYI: working fine on Android, not sure if this information will be helpful.

Good luck! I hope you figure it out soon.

Thank you so much for this snippet. I am using it with Blue Topaz theme.
Is there a way to make the box around the folders and subfolders stay aligned?

Screenshot 2021-08-19 184703

Thank you for your help!

2 Likes

Please try this one.

Colored Folders for Blue Topaz.css (10.0 KB)

3 Likes

How do you call the numbering/categorizing system with 000, 100, etc. in OP’s pictures?

Dewey, probably:

Angel

1 Like