Highlight Note Pane in Focus

[peeragetalkers]

I often found myself scrambling to find my place when working in split view, which is why I created this CSS snippet that 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 (1.2 KB)

/**
 * Snippet Name: Dim unfocused note panes
 * Version: 1.1
 * Author: Created via Claude
 * Source: https://forum.obsidian.md/t/highlight-note-pane-in-focus/91056
 * Last Updated: 2024-12-02
 */

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

body:not(.is-mobile) .workspace-leaf .view-content,
body:not(.is-mobile) .workspace-leaf .view-header,
body:not(.is-mobile) .workspace-tab-header {
  filter: brightness(100%);
}

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

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

Room for improvement

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. (I also made a request for this for the Limelight plugin.)

Alternative solution

Limelight community plugin.

[jpfieber]

Love it, thanks!

[DiCaver]

Nice one!