Custom css colors for windows

Feature requests
1

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)

none

2

What I do is use separate themes for each vault.

3

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 …
:grin:

4

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

5

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.

6

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.

1
11776Ă—720 83.7 KB

2 Likes
7

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

8

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

These two options look interesting. I will check them out