Distinguish between vaults with a splash of colour (Win)

Share & showcase
1

I always have three vaults open all day long: Film, Food and Main.
I find it simpler to use the same theme for all my vaults.
But when I Alt-Tab through my open windows, or just look at my taskbar, it’s tricky to distinguish between the three vaults.

Solution: I created a css in two of my vaults where I added a splach of colour to the top title bar and the left menu bg. As you can see from the screenshot, the colours also show up in the taskbar pop-ups, making it easy to select the correct vault.

 .workspace-ribbon {background-color: #b35801;}
.titlebar {background-color: #b35801;}

here’s what it ends up looking like:
Film Vault is blue
Food Vault is orange
and main has no colour.

image
image917×619 78.3 KB

3 Likes
2

I copied your code, created a titlebar.css file, moved it to snippets, enabled snippet… But nothing changed. What did I do wrong?

3

I really can’t say.
I created one new css for each vault, and enabled it in each vault.

Maybe it has to do with Obsidian settings?
Under Obsidian Options > Appearance I have
Base color scheme: Dark
Accent color: purple
Themes: default
Window Frame style: obsidian frame

Or maybe the “titlebar” is part of the Homepage plugin, rather than being native to Obsidian?

4

Thank you! I have the same settings. I will experiment :slight_smile:

5

I found the problem, do it like this:

2023-02-11 110344
2023-02-11 1103442115×180 16.5 KB

Thank you very much!

6

I changed your code a little:

.workspace-ribbon {background-color: #183a72 !important;}
.titlebar {background-color: #183a72 !important;}
1 Like
7

use the plugin color folder and set each vault s main folder to different color is ok.

dont re invent the wheel

8

NICE. I love this! Thanks for the outstanding idea. :grin:

9

Great thread. I’ve added the css for updating the font color also (since my new background-color didn’t work well with it)

.titlebar, .workspace-ribbon {
	background-color: darkgreen !important;
}

.titlebar-text, .workspace-ribbon .clickable-icon {
	color: #f0f0f0 !important;
}