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 inactive 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);
}
}
