Custom folder colors - Prevent folders from not rendering in DOM

Custom CSS & Theme Design
1

I am working on my own theme for what I want, and custom folder colors is fine enough, but I have an issue with the folders. When they are fully expanded, folders too far off screen aren’t rendered in the DOM, which is fine enough, but as I scroll down, the earlier folders are removed from the DOM and that causes all the current folders to suddenly change colors.

Is there a way for tell Obsidian (or the browser) to just keep everything off screen and not erase it from the DOM? This would solve all my problems rn. For reference, the AnuPpuccin theme does the same thing.

Here is up top

image
image375×1204 45.4 KB

Here is that shame folder changing colors to the first one when I scroll down

image
image364×1269 50.1 KB

2

I don’t think so. For performance reasons, items in the DOM are loaded and unloaded as you scroll a note.

You can have a search here or on Discord. It’s been discussed many times.

3

I agree, this is important for performance. I was hoping for a method to specify it on a specific element (i.e just the folder tree).

No doubt it has been brought up and I tried searching beforehand, but I only really found people showing how to achieve rainbow colors with nth-child, nothing DOM related. I considered ways information may be extracted on folder loading and have the color cached on root folder name, but all of this is beyond the scope of css and I have no experience with building extensions.

P.S it would be nice if the note header that shows the file path includes a data-path variable hint :joy:

For now, and for anyone else looking to do it in a different way, I have hard coded it based on the data-path value. i.e

For the folder title:

.nav-folder>div[data-path^="1."] {
	color: rgba(var(--accent-1), var(--folder-title-transparency));
	border-radius: 5px;
	margin-top: 2px;
}

For selecting root folder for background fill

.nav-folder:has(> .tree-item-self[data-path^="1."]):not(:has(> .tree-item-self[data-path*="/"])) {
	background-color: rgba(var(--accent-1), var(--folder-bg-transparency));
}

In this way, you can organize folders starting with “1.”, “2.” etc.

4

There’s a feature request here you could heart:

1 Like