Background color artefact

[ryansnowden]

Baseline version

3.2.4

Obsidian & Installer version

About Obsidian Version 1.11.7 (Installer 1.7.7)

Operating system

Tachoe 26.3 (25D125)

Issue & Steps to reproduce

(Using the material theme)

The editor background colour doesn't seem to cover the whole area and, somehow creates this rectangle of the right colour, and then either side, has a different color.

My accent color is set to #031418 and Materials is theming the rest. I started wth the Minimal theme from the marketplace and it came to this result, then started fresh and still it is visible. This time I set it manually ("baseline-style@@background-primary@@dark": "#031418") to see if it fixed it, but its just the same.

{ "obsidian-dynamic-outline@@dynamic-outline-highlight-font-weight": "var(--font-normal)", "obsidian-dynamic-outline@@dynamic-outline-font-size": "var(--font-smaller)", "things-style@@active-line": false, "things-style@@fancy-highlight": true, "things-style@@default-font-color": false, "fastppuccin-theme-settings@@anuppuccin-theme-light": "ctp-rosepine-light", "fastppuccin-theme-settings@@anuppuccin-theme-dark": "ctp-mocha", "fastppuccin-theme-settings@@anuppuccin-theme-accents": "ctp-accent-sky", "serenity-theme@@active-line-highlight": false, "serenity-theme@@status-bar-style": "status-bar-center", "serenity-theme@@compact-settings": true, "serenity-theme@@hide-tabs": false, "serenity-theme@@animations-off": false, "serenity-theme@@hide-status-bar": false, "serenity-theme@@hide-view-header": true, "serenity-theme@@hide-titlebar-buttons": true, "serenity-theme@@hide-close-tab": true, "serenity-theme@@hide-file-buttons": true, "serenity-theme@@folder-focus": false, "serenity-theme@@active-pane-highlight": false, "serenity-theme@@inactive-pane-opacity": "0.55", "serenity-theme@@link-file": false, "serenity-theme@@file-explorer-class-select": "file-explorer-normal", "serenity-theme@@file-font-size": "var(--font-ui-small)", "serenity-theme@@hide-folder-arrows": false, "serenity-theme@@prominent-folders": true, "serenity-theme@@color-accent-class-select": "blue-accent", "serenity-theme@@even-p": false, "serenity-theme@@indent-p": true, "serenity-theme@@letter-spacing": 0, "serenity-theme@@font-bundle-select": "ia-font", "serenity-theme@@embeds-style": "card-embed", "serenity-theme@@flat-mode": true, "serenity-theme@@color-scheme-select": "theme-ayu-s", "fastppuccin-theme-settings@@anp-highlight-custom": "anp-highlight-sky", "fastppuccin-theme-settings@@anp-decoration-toggle": true, "fastppuccin-theme-settings@@anp-bold-custom": "none", "fastppuccin-theme-settings@@anp-italic-custom": "none", "fastppuccin-theme-settings@@anp-alternate-tab-toggle": true, "serenity-theme@@colorful-headings-s": true, "serenity-theme@@inline-title-size": "1.5em;", "serenity-theme@@inline-title-align": "left", "serenity-theme@@inline-title-style": "Normal", "serenity-theme@@inline-title-variant": "All-small-caps", "serenity-theme@@h-weight-s": "600", "serenity-theme@@h-font-s": "var(--font-monospace)", "serenity-theme@@show-collapse-indicators": false, "serenity-theme@@heading-syntax": false, "serenity-theme@@custom-color-scheme-dark": false, "serenity-theme@@h3-size": "1.1em", "serenity-theme@@h2-size": "1.1em", "serenity-theme@@h1-size": "1.1em", "serenity-theme@@h4-size": "1.1em", "serenity-theme@@h5-size": "1.1em", "serenity-theme@@h6-size": "1.1em", "serenity-theme@@h1-align": "center", "serenity-theme@@pure-md": false, "serenity-theme@@inline-title-weight": "600", "iridium@@i-colorful-headings": "none", "iridium@@i-colorful-inline-title": "none", "cupertino-accessibility@@reduce-contrast-change": false, "minimal-style@@maximize-tables-off": "maximize-tables", "minimal-style@@trim-cols": false, "minimal-style@@max-col-width": "188em", "minimal-style@@active-line-on": false, "cupertino@@adaptive-mode-off": false, "cupertino@@hover-ribbon": false, "cupertino@@hover-sidedock": false, "cupertino@@focus-view": false, "cupertino@@active-line-off": true, "cupertino@@status-bar-baseline": false, "cupertino@@nav-action-center": false, "cupertino@@tab-icon": false, "cupertino@@banner-off": false, "cupertino@@block-width-off": false, "cupertino@@font-variant-off": false, "cupertino@@full-width-media-off": false, "cupertino@@reduce-motion": false, "retroma-obsidian-theme@@theme-font-selection": "retroma-font-ia-writer-mono", "retroma-obsidian-theme@@theme-color-scheme-selection": "Analogous", "obsidian-velocity@@theme-paint-dark": "velocity-gray", "obsidian-velocity@@color-highlight-rgb": "var(--highlight-blue-rgb)", "obsidian-velocity@@enable-special-text": true, "obsidian-velocity@@override-default-font": true, "obsidian-velocity-config@@hide-bases-header": false, "obsidian-velocity-config@@active-line-highlight": false, "obsidian-velocity-config@@prevent-exit": false, "obsidian-velocity-config@@improve-pinned-tabs": false, "obsidian-velocity-config@@disable-list-styling": false, "obsidian-velocity-config@@disable-naked-embeds": false, "obsidian-velocity@@enable-special-code": false, "baseline-style@@color-scheme-dark": "material-dark", "baseline-style@@color-scheme-light": "material-light", "baseline-style@@accented-interface": true, "baseline-style@@bold-color@@light": "#000000", "baseline-style@@italic-color@@light": "#000000", "baseline-style@@italic-color@@dark": "#FFFFFF", "baseline-style@@bold-color@@dark": "#FFFFFF", "baseline-style@@h1-size": "1em", "baseline-style@@h2-size": "1em", "baseline-style@@h3-size": "1em", "baseline-style@@h4-size": "1em", "baseline-style@@h5-size": "1em", "baseline-style@@density-modifier": 0.75, "baseline-style@@tab-style": "tab-floating-center", "baseline-style@@tab-text-align": "center", "baseline-style@@colorful-folders": "colorful-folders-dot", "baseline-style@@bold-folders": true, "baseline-style@@inline-title-color@@dark": "#434343", "baseline-style@@readable-spacing": true, "baseline-style@@readable-spacing-modifier": 1, "baseline-style@@colorful-headings-text": false, "baseline-style@@p-spacing": "2em", "baseline-style@@color-scheme-accent": true, "baseline-style@@background-primary@@dark": "#031418" }

Expected behavior

Single color bg

Proposed solution

No response

Final check

• I've confirmed that both Obsidian and Baseline is up to date.

[aaaaalexis]

Can you provide a screenshot of the areas you're seeing this disparity? I'm unsure where this issue happens

[ryansnowden]

I have narrowed it down to only occurring as Baseline in Interface → Workspace and only in dark mode. You can see the subtle band in the center of the window, and it is responsive? ie. jumps around when resizing window vertically

[aaaaalexis]

I can't reproduce it, might be something else causing it, can you try updating Obsidian installer first?

[ryansnowden]

Updated to Version 1.11.7 (Installer 1.11.7) and still occurs.

It certainly is weird. The same artefact will flash on and off as left and right sidebars are open/closed too (same color as in the screenshots).

Something to do with how baseline is the default and another workspace loads over the top (inherited) and so it might flash up and go away as it gets overwritten?

I'll try debug further in devtools when I get a chance.

[amphyvi]

I'm having this trouble as well (details in #211). For me, manually setting these values to be the same took care of the issue, but it is ultimately a workaround.

• Style Settings > Baseline > Colors > Base colors > Primary background
• Style Settings > Baseline > Colors > Base colors > Primary background (Alt)

I identified the color mismatch by using an eyedropper and found them to show up as #171716 and #171616 (I'm using the Flexoki dark mode color scheme)... but, setting both of the values above to either one of them resulted in a background color that was noticeably lighter than what comes stock in the color scheme. As such, setting them both to #100E0E (a much darker color) resulted in an almost identical match... one that I prefer over stock personally.

I know Obsidian is Electron based, maybe that's related? I have the same issue where colors are too light in any Chromium-based browser as well - using a Firefox-based browser fixes that, but websites of course don't play as nice with Gecko.