Rainbow Navigation - Issue; colours change as you scroll far

Custom CSS & Theme Design
1

Hi,

I’m having an issue with a snippet I’ve been tinkering with.

Screenshot 2024-04-23 232304
Screenshot 2024-04-23 232304404×1153 73.2 KB

This is my take on “Rainbow Navigation”.
Based on css from the theme PLN (Pipe Likes Nord) by PipeItToDevNull.
I’m pretty happy (aside from a few tiny things) with the overall look.

However, when you scroll down far enough, the colours start changing. :frowning:
I don’t really know what I’m doing with CSS, so I’ve go no idea how/if it’s solvable.

Here is a video (on YT) of the problem in action.

Anyone with CSS knowledge might vomit in their mouth… but here is the snippet:
Az_Navigation Rainbow_WiP.css (22.4 KB)

2

The reason is that Obsidian loads as you scroll. Once you scroll pass an initial length, the element will be removed.

Say you have 100 folders and only folders within the range of 20 is loaded. So when you scroll to folder #21, folder #1 will be removed from UI, and the 1st index (color Red) will now be assigned to folder #2 (before it is color Orange because it has index 2).