Change background of tab title bar and tab container?

[peeragetalkers]

I have a snippet that changes the main area’s background depending on current view. I’d like this background to also apply to also apply to tab title bar and the tab container. How can I achieve this? I’m using the Minimal Theme, if it’s relevant.

body:not(.is-mobile) {
    @media (prefers-color-scheme: light) {
        .markdown-source-view:not(.is-live-preview) {
            background-color: hsl(220, 100%, 96%); / Cool light blue-grey /
        }
        .markdown-preview-view {
            background-color: hsl(45, 100%, 96%); / Warm soft yellow */
        }
    }
    @media (prefers-color-scheme: dark) {
        .markdown-source-view:not(.is-live-preview) {
            background-color: hsl(0, 0%, 10%); 
        }
        .markdown-preview-view {
            background-color: hsl(0, 0%, 20%);
        }
    }
}

[ariehen]

Maybe something like this can get your started. For the view-header section, anyway.

body:not(.is-mobile) {
    @media (prefers-color-scheme: light) {
        .markdown-source-view:not(.is-live-preview) {
            background-color: hsl(220, 100%, 96%); / Cool light blue-grey /
        }
        .markdown-preview-view {
            background-color: hsl(45, 100%, 96%); / Warm soft yellow */
        }

        .workspace-tabs.mod-top [data-mode='source'] .view-header {
            background-color: hsl(220, 100%, 96%);
        }
        .workspace-tabs.mod-top [data-mode='source']:has(> .view-content > .is-live-preview) .view-header {
            background-color: inherit; /* unnecessary if the view-header color is fine in live preview */
        }
        .workspace-tabs.mod-top [data-mode='preview'] .view-header {
            background-color: hsl(45, 100%, 96%);
        }
    }    
}

[peeragetalkers]

Ended up with this. Eh, good enough!

/* Define variables for background colors */
:root {
    --source-bg-color: hsl(220, 100%, 96%); /* Cool light blue-grey */
    --preview-bg-color: hsl(45, 100%, 96%); /* Warm soft yellow */
}

/* Light theme styles */
body.theme-light:not(.is-mobile),
body:not(.is-mobile) {
    @media (prefers-color-scheme: light) {
        .markdown-source-view.mod-cm6:not(.is-live-preview) {
            background-color: var(--source-bg-color);
        }
        .markdown-preview-view {
            background-color: var(--preview-bg-color);
        }
        .workspace-tabs.mod-top [data-mode='source']:not(:has(> .view-content > .is-live-preview)) .view-header {
            background-color: var(--source-bg-color);
        }
        .workspace-tabs.mod-top [data-mode='preview'] .view-header {
            background-color: var(--preview-bg-color);
        }
    }
}

/* Dark theme styles */
body.theme-dark:not(.is-mobile) {
    --source-bg-color: hsl(0, 0%, 10%);
    --preview-bg-color: hsl(0, 0%, 20%);

    .markdown-source-view.mod-cm6:not(.is-live-preview) {
        background-color: var(--source-bg-color);
    }
    .markdown-preview-view {
        background-color: var(--preview-bg-color);
    }
    .workspace-tabs.mod-top [data-mode='source']:not(:has(> .view-content > .is-live-preview)) .view-header {
        background-color: var(--source-bg-color);
    }
    .workspace-tabs.mod-top [data-mode='preview'] .view-header {
        background-color: var(--preview-bg-color);
    }
}

/* Override for system dark theme when Obsidian is set to light theme */
@media (prefers-color-scheme: dark) {
    body:not(.theme-dark):not(.is-mobile) {
        .markdown-source-view.mod-cm6:not(.is-live-preview) {
            background-color: var(--source-bg-color);
        }
        .markdown-preview-view {
            background-color: var(--preview-bg-color);
        }
        .workspace-tabs.mod-top [data-mode='source']:not(:has(> .view-content > .is-live-preview)) .view-header {
            background-color: var(--source-bg-color);
        }
        .workspace-tabs.mod-top [data-mode='preview'] .view-header {
            background-color: var(--preview-bg-color);
        }
    }
}