Changing background (color) based on folder

[micseydel]

Background:

• I have one top level vault - my “second brain”
• It is composed of Git submodules that can be treated as independent vaults
• The submodules allow releasing a subset of my notes based on audience (e.g. sharing a wiki on my cats with my vet, or sharing health-related notes with my primary care physician)

Provisional goal:

• Change the background of notes based on the submodule (folder), e.g. to brown because that’s the color of my cats’ fur

I was able to find and test cssclass and achieve something similar to what I want. The problem is, if I move a file to a submodule (thereby increasing its visibility), I don’t want to have to remember to update the cssclass while I’m doing it. The goal was to give a visual cue that I could not miss, and it’s hard to miss because it is delightfully ugly.

Is there a way to achieve what I want more automatically? Namely, can I configure the displayed background of notes to change based on the folder they are in? I would prefer not to have something automatically update the YAML unless it somehow would be robust to files being moved through the file system instead of Obsidian.

I imagine I’d have to write a plugin for this, if there’s anything similar I’d love to take a peek. obsidian-dynamic-background looks like the best candidate at the moment.

[holroy]

From the top of mymind, I would use a simple dataview query in the YAML to update the setting of cssClass based on the path of the current file. This would need for you to define the various CSS class for the various colors you’d like, but I think it should work, but I’ve not tested it!

Since I’ve not tested it, I can’t tell if there are some major pitfalls to this approach either, but in theory it should work nicely.

[mnvwvnm]

cssclass: "`=<some code to output a string as a classname>`"

I think the problem in this approach is: the value is the inline code expression, not the rendered value.

[ZenMoto]

Hey - this seems important to you, so I built you a feature (in vanilla JS).

WHAT IT DOES:

1. checks if the active note is in a specified folder.
2. if so, changes the background color of the active note.

**

SCREENSHOT (it works!):

**

THE CODE (vanilla JS):

// COLOR POP - change color based on submod directory
let colors = (function() { return {
    submods: ["cat 1", "cat 2", "cat 3"], // list your submodule folder names
    noteBG: ["teal", "midnightblue", "maroon"], // desired background color for each submod (in the same order) 
    defaultBG: "unset" }; // your default background color (for notes outside your submods)  

let titleObserver; }()); // observer for note/tab change 

function colorChange() {
    let dCheck = document.querySelector('.nav-file-title.is-active'); // get active note 
    if (dCheck !== null){
        let d = dCheck.dataset.path;
        let x = d.split("/")[0]; // get directory 
        let checko = document.querySelector('.workspace-split.mod-vertical.mod-root > div > .workspace-tab-container > .workspace-leaf.mod-active > div > .view-content'); // get content display area
        if (checko === null) {return;} 

        // if name match, change bg color
        let z = colors.submods.length;
        for (let i = 0; i < z; i++) { 
            if (x===colors.submods[i]) {checko.style.backgroundColor = colors.noteBG[i]; break;}
            if (i === (z - 1)) {checko.style.backgroundColor = colors.defaultBG; return;}
        }
    }
}

// watch for class change on active tab
function leafSelector() {
    let leafArray = document.querySelector('.workspace-tabs.mod-active.mod-top');

    colors.titleObserver = new MutationObserver(function() {  
        colors.titleObserver.disconnect();  
        window.setTimeout(() => {colorChange(); leafSelector(); }, 0)
    });
    colors.titleObserver.observe(leafArray, { attributeFilter : ['class'] });             
}

window.setTimeout(() => {colorChange(); leafSelector(); }, 0) // first run

Here is the same code on privatebin, if you prefer.

**

HOW TO CUSTOMIZE IT

In the first block of code (called “let colors”):

1. list your submods (change “cat 1”, “cat 2”, “cat 3” to your submodule names).
2. list your noteBG colors (change “teal” to “#000030”, for example).
3. [optional] choose your defaultBG color (for notes outside your submods).

• You can add more submodules (the order of “submods” matches the order of “noteBG” colors).

**

HOW TO INSTALL IT:

I’m using the “Javascript Init” community-plugin to add the JS to Obsidian.

To set it up (first-time only), just go to:

• Preferences > community plugins > get “Javascript Init” (great for adding JS).
• Preferences > Javascript Init settings > paste that code in the box.
• Refresh Obsid (View > Force Reload). Any time you change the code, refresh Obsid.

**

If you have any questions, feel free to ask.

I hope you have a good day