Is there a way to color the tabs?

Things I have tried

I haven’t been able to find any CSS snippets or themes that will do this but I think it’s possible?

What I’m trying to do

I have a number of templates for different types of notes I take (research, articles, PDF files, topical how-to’s I write, etc.) and I often end up with a ton of different tabs open at once. I would like to style the tabs and bars in stacked mode so that each tab - based on YAML frontmatter or just CSS - has a predefined color to make it easier to pick out which is which.

I have my notes styled so that the files themselves are colored, but the tab doesn’t carry this over - I’d like to be able to assign colors to make them easier to distinguish.

You could assign a CSS class to each note in YAML format and configure that exact class in a CSS snippet. These settings change the note’s backgroud color.

YAML:

---
cssClass: red
---

CSS:

.red {
    background-color: rgb(37, 2, 2);
    /* rest of the config */
}

If you are looking to color the header tabs instead, the only solution I can think of is to add a unique identifier to the name each type of file with CSS.

div[aria-label^="%A" i] {
    /* these settings apply to every filename that beings with "%A" */
    background-color: rgb(37, 2, 2) !important;
}

The results look like this
image

3 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.