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

[Lithou]

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

[Cajun]

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

[Jacqui]

@Cajun

@Lithou

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

[pbhope]

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?

[Lithou]

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

[anon12638239]

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

[Fanshu]

Hope to support color labels.

[Phoenix12]

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?

[Cajun]

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

Good luck! I hope you figure it out soon.

[LadyRuthven]

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?

Thank you for your help!

[whyI]

Please try this one.

Colored Folders for Blue Topaz.css (10.0 KB)

[anon93337645]

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

[anon12638239]

Dewey, probably:

• Dewey Decimal classes

• Dewey Decimal Classification

• Johnny Decimal

• Universal Decimal Classification

• Other systems

Angel

[LadyRuthven]

It’s great now. Thank you so much.

[Jopp]

So far I added @Lithou 's awesome css, but I couldn’t find any link or answer explaining how to colorize note lists / text…

So your picture to highlight with multiple colors is only a mockup? @OliverM

A) I know @Moonbase59 developed a way to highlight text with multiple colors, but i don’t need and don’t want to install templater.

B) a working solution to highlight text with multiple colors is to use html tags.
The only thing that i don’t know is how to wrap color around the selected text, ideally using the plugin “hotkeys for templates”

[Sk3tch]

Yeah would be great if folder colour also affected the graph colour.

[veradrawer]

I believe that is doable with path:/ in the graph!

[j3tman]

I know this is a super late reply (I’m new here!), but in case you never figured it out, modifying the CSS to use this text-shadow workaround instead fixed per-folder colors for me.

So all the blocks that look like this:

color: var(--Fold1);

Become this:
color: transparent; text-shadow: 0 0 0 var(--Fold1);

[anon12638239]

Thanks for the reply. Much appreciated.

Angel