Background color is not working with certain things

The reason your dark colors are "disappearing" while red works seems to be a classic Obsidian quirk. In Reading Mode, callouts often have a default opacity applied to their background (usually around 0.1 or 0.15) so they tint the page rather than block it out.

When you use a bright color like red, 0.1 opacity is still visible. When you use --bg2 (which is already dark), that 0.1 opacity makes it virtually identical to your main background. It's not actually transparent; it’s just "math-ed" into oblivion.

Try swapping your callout block for this:

/* CALLOUTS */ /* Infobox */ .callout[data-callout="infobox"] { /* Obsidian uses these internal variables for callouts */ --callout-bg: var(--bg2); background-color: var(--callout-bg) !important; /* This is the secret sauce: force the opacity to 100% */ --callout-blend-mode: normal; opacity: 1 !important; /* Optional: add a border if it still blends in too much */ border: 1px solid var(--accent1); } /* Ensure the title and content aren't fighting for background space */ .callout[data-callout="infobox"] .callout-title, .callout[data-callout="infobox"] .callout-content { background-color: transparent !important; }

Why this likely works:

--callout-bg: Obsidian's internal CSS looks for this variable first. By defining it, you're speaking the app's native language.

opacity: 1: This overrides the default "tint" behavior that makes dark colors vanish.

--callout-blend-mode: Sometimes Obsidian uses specific blend modes to make callouts look "glassy." Setting it to normal keeps your colors punchy.