# Highlight note pane in focus

**URL:** <https://forum.obsidian.md/t/highlight-note-pane-in-focus/91056>\
**Category:** Devs: Theme Design & Custom CSS\
**Tags:** custom-css\
**Created:** [November 5, 2024, 2:15pm UTC](https://forum.obsidian.md/t/highlight-note-pane-in-focus/91056 "2024-11-05T14:15:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![churnish](https://forum.obsidian.md/user_avatar/forum.obsidian.md/churnish/32/89588_2.png) [@churnish](https://forum.obsidian.md/u/churnish)\
**Post date:** [November 5, 2024, 2:15pm UTC](https://forum.obsidian.md/t/highlight-note-pane-in-focus/91056/1 "2024-11-05T14:15:38Z")

</div>

I often found myself scrambling to find my place when working in split view, which is why I created this [CSS snippet](https://help.obsidian.md/snippets) that helps to never lose your place in the workspace by slightly (but noticeably) dimming the background of unfocused tabs:

 ![Screen Shot 2024-11-05 at 17.08.25](https://forum.obsidian.md/uploads/default/original/3X/0/5/05cdf50f2be6d6248463a1b88e925e13e02099fe.jpeg)

You can adjust the intensity by modifying the brightness variables. Alternatively, there’s an option to set inactive panes to the secondary background color, as defined by your theme.

> **CSS snippet**
>
> [[Desktop]\_Dim\_inactive\_note\_panes.css](https://forum.obsidian.md/uploads/short-url/y6CSn0LXR9GfKDCny3sImdVltae.css) (3.3 KB)
> 
> ```css
> /*
> * Snippet name: Dim unfocused note panes
> * Version: 2.1
> * Author: Created via Claude
> * Source: https://forum.obsidian.md/t/highlight-note-pane-in-focus/91056
> * Last updated: 2025-09-24
> */
> 
> /* TOGGLE: Comment/uncomment one line below to switch methods */
> /* --use-brightness-method: ; */
> --use-background-method: ;
> 
> /* Adjust brightness values */
> :root {
> --light-inactive-dim: brightness(98%);
> --dark-inactive-dim: brightness(95%);
> }
> 
> /* Dim brightness */
> 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%);
> }
> 
> /* Only apply dimming when there are multiple panes - using :has() to detect multiple workspace-tabs */
> .theme-light:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active) .view-content,
> .theme-light:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active) .view-header,
> .theme-light:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active) .workspace-tab-header,
> .theme-light:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-tab-header:not(.mod-active) {
> filter: var(--use-brightness-method, var(--light-inactive-dim)) !important;
> }
> 
> .theme-dark:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active) .view-content,
> .theme-dark:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active) .view-header,
> .theme-dark:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active) .workspace-tab-header,
> .theme-dark:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-tab-header:not(.mod-active) {
> filter: var(--use-brightness-method, var(--dark-inactive-dim)) !important;
> }
> 
> /* Apply secondary background when inactive - only when there are multiple panes */
> body:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active):not(.is-being-dragged) .view-content,
> body:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf:not(.mod-active):not(.is-being-dragged) .view-header {
> background-color: var(--use-background-method, var(--background-secondary)) !important;
> --code-background: var(--background-primary);
> }
> 
> /* Ensure active panes always use normal background - only when there are multiple panes */
> body:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf.mod-active .view-content,
> body:not(.is-mobile) .workspace-split:not(.mod-left-split):not(.mod-right-split):has(.workspace-tabs ~ .workspace-tabs) .workspace-leaf.mod-active .view-header {
> background-color: var(--background-primary) !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](https://github.com/smikula/obsidian-limelight/issues/14) for the _Limelight_ plugin.)

#### Alternative solutions

1. [Limelight](https://obsidian.md/plugins?id=obsidian-limelight) community plugin.
2. [Enlightenment](https://obsidian.md/plugins?id=enlightenment-obsidian) community plugin.

---

<div class="post-metadata">

**Author:** ![jpfieber](https://forum.obsidian.md/user_avatar/forum.obsidian.md/jpfieber/32/41532_2.png) [@jpfieber](https://forum.obsidian.md/u/jpfieber)\
**Post date:** [November 5, 2024, 2:36pm UTC](https://forum.obsidian.md/t/highlight-note-pane-in-focus/91056/2 "2024-11-05T14:36:46Z")

</div>

Love it, thanks!

---

<div class="post-metadata">

**Author:** ![DiCaver](https://forum.obsidian.md/user_avatar/forum.obsidian.md/dicaver/32/70059_2.png) [@DiCaver](https://forum.obsidian.md/u/DiCaver)\
**Post date:** [November 5, 2024, 2:51pm UTC](https://forum.obsidian.md/t/highlight-note-pane-in-focus/91056/3 "2024-11-05T14:51:47Z")

</div>

Nice one! 👏