Highlight Note Pane in Focus

[peeragetalkers]

I often found myself scrambling to find my place when working in split view. This CSS snippet helps to never lose your place in the workspace by slightly (but noticeably) dimming the background of unfocused tabs:

You can adjust the intensity by modifying the brightness variables.

CSS snippet

Dim unfocused note panes.css (2.2 KB)

/* Define variables for dimming effects */
:root {
    /* Light theme dimming */
    --light-inactive-dim: brightness(98%);
    
    /* Dark theme dimming */
    --dark-inactive-dim: brightness(80%);
}

/* Light theme styles for desktop only */
body.theme-light:not(.is-mobile) .workspace-leaf .view-content,
body.theme-light:not(.is-mobile) .workspace-leaf .view-header,
body.theme-light:not(.is-mobile) .workspace-tab-header {
    filter: brightness(100%);
}

body.theme-light:not(.is-mobile) .workspace-leaf:not(.mod-active) .view-content,
body.theme-light:not(.is-mobile) .workspace-leaf:not(.mod-active) .view-header,
body.theme-light:not(.is-mobile) .workspace-leaf:not(.mod-active) .workspace-tab-header,
body.theme-light:not(.is-mobile) .workspace-tab-header:not(.mod-active) {
    filter: var(--light-inactive-dim);
}

/* Dark theme styles for desktop only */
body.theme-dark:not(.is-mobile) .workspace-leaf .view-content,
body.theme-dark:not(.is-mobile) .workspace-leaf .view-header,
body.theme-dark:not(.is-mobile) .workspace-tab-header {
    filter: brightness(100%);
}

body.theme-dark:not(.is-mobile) .workspace-leaf:not(.mod-active) .view-content,
body.theme-dark:not(.is-mobile) .workspace-leaf:not(.mod-active) .view-header,
body.theme-dark:not(.is-mobile) .workspace-leaf:not(.mod-active) .workspace-tab-header,
body.theme-dark:not(.is-mobile) .workspace-tab-header:not(.mod-active) {
    filter: var(--dark-inactive-dim);
}

/* Override for system dark theme when Obsidian is set to light theme (desktop only) */
@media (prefers-color-scheme: dark) {
    body:not(.theme-dark):not(.is-mobile) .workspace-leaf .view-content,
    body:not(.theme-dark):not(.is-mobile) .workspace-leaf .view-header,
    body:not(.theme-dark):not(.is-mobile) .workspace-tab-header {
        filter: brightness(100%);
    }

    body:not(.theme-dark):not(.is-mobile) .workspace-leaf:not(.mod-active) .view-content,
    body:not(.theme-dark):not(.is-mobile) .workspace-leaf:not(.mod-active) .view-header,
    body:not(.theme-dark):not(.is-mobile) .workspace-leaf:not(.mod-active) .workspace-tab-header,
    body:not(.theme-dark):not(.is-mobile) .workspace-tab-header:not(.mod-active) {
        filter: var(--dark-inactive-dim);
    }
}

Room for improvement

1. Currently, if moving focus away from any open notes (e.g. onto the file explorer), the snippet will dim all tabs, including the current/active tab. Ideally, the current/active tab would always stay undimmed. (This would be useful, for example, to know in which pane a note will be opened when selecting note in the file explorer.) If anyone figures out how to achieve this, do let me know! I’d be open to a JavaScript solution, shall this not be possible with CSS alone.
2. Despite the attempted override, when system theme is dark but Obsidian theme is set to light, the dark-inactive-dim is applied instead of light-inactive-dim. Not gonna bother fixing this because I never use such theme configuration.

Alternative solution

Limelight community plugin.

[jpfieber]

Love it, thanks!

[DiCaver]

Nice one!