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;
}