Custom css colors for windows

Separate windows are great, I have by now put together several workplaces in this way. There are a couple of things I would love to see:

Use case or problem

Having more than 2 external windows makes it difficult to differntiate them in the task switcher

Proposed solution

I would like an option to use separate CSS files for external windows. This would allow for a much more lively work athmosphere and allow to easily distinguish the windows of Obsidian.

Current workaround (optional)


What I do is use separate themes for each vault.

Yes, that’s what I do, too. I have two different vaukts.

What I mean is something else, though: I have one big vault with different projects in in. Some of them are fictional, some are concepts and there is lots of different research going in. So I have at least 3-4 bigger “areas” with separate note sets And most of these would be pushed into external windows.

It would be great to have a chance to differentiate quickly: think a mustardy yellow for concepts, a rusty red for tasks and a cool blue or juicy green for two different fictional projects …

It looks like you could use this which allows styling different workspaces in the same vault:

Oh. This looks nice, thank you!

It looks as if this is affecting the entire workspace, though. I am not sure as, honestly, I wasn’t able to figure out how the feature works.

I suspect, however, that my situation is a little different: I use windows to create areas of work. They are open at the same time. So technically, they would all belong to the same workspace.

I wish to make them clearly stand out against each other precisely because they are open at the same time.

One option you could try is using a cssclass on certain notes. I have a few notes with a different background so they stand out.

  • make a .css file (mine is tint.css) and save it in .obsidian/snippets
  • add this to the file and save >>
.tint .cm-scroller {
	background-color: #F5F2E8;

.tint + .markdown-reading-view > .markdown-preview-view {
    background-color: #F5F2E8;
  • enable it under Settings > Appearance > CSS snippets
  • add the tint cssclass to front matter in any note you want to have the background color applied to.
cssclass: [tint]
alias: []
tags: []

It’s not perfect (tab-bar and status bar don’t have the tint, etc) but it gets the job done and the editing/reading modes are tinted. Of course the colors, styles, and name “tint” can be anything you want.


There’s also the Auto Class plugin which can apply classes to notes based on path and/or tags.

Ahh, thank you, both of you, @ariehen and @CawlinTeffid !

These two options look interesting. I will check them out