Callout text/background become invisible in Reading mode. How to fix ? (pictures provided)

[lilian]

Hello everyone,

Since I lightened the background of my theme a little, in reading mode, the callout text become invisible while the background become almost invisible.

Live preview screenshot:

Reading mode screenshot:

Can anyone help please ?
Thanks ^^

[DiCaver]

@lilian

I lightened the background of my theme

Did you do it through theme settings or customer CSS? If you use CSS, you can do the same for callouts. If it is through some theme settings, check if someone has had similar problems with using your theme.

You’ll need to change something in (like) this class …

.callout {
    background-color: rgba(var(--callout-color), 0.1);
}

Cheers, Marko

[ariehen]

As Marko mentioned, it will be helpful here to know how and what you changed. That will give clues as to what’s happening.

[lilian]

Thanks for your kind reply,
Here is the list of the changes I made :

–background-primary
–background-primary-alt
–background-secondary
–background-secondary-alt
–background-modifier-form-field
–text-normal
–pre-code
–interactive-accent
–interactive-before
–background-modifier-border
–tag-background

.markdown-preview-view code{
background: var(–darkgrey1);
}

Only one modification made for all of them: lightened the color.

[lilian]

Thanks for your replies !

@DiCaver

Did you do it through theme settings or customer CSS? If you use CSS, you can do the same for callouts.

I did change the color values in the css file manually and put them under a .theme-light block so I can select between dark and lighter mode quickly.

@DiCaver

You’ll need to change something in (like) this class …

.callout {
    background-color: rgba(var(--callout-color), 0.1);
}

That did the trick but only in Live preview, not in Reading mode where the problem is.
Sorry if this is a noob question but how can I apply this change in Reading mode ?

Thanks for your help.

[DiCaver]

@lilian

but only in Live preview, not in Reading mode where the problem is

Hmm, this is strange. On my side, changes are applied in Live and Reading mode. Check with the DevTools inspector to see if different variables are used for the callout when in Live and Reading mode.

Let me know if you need help with that.

Cheers, Marko

[ariehen]

I agree with

There’s a topic here on using the inspector:

Obsidian CSS Inspector Workflow

Obsidian CSS Inspector Workflow This was originally called “Obsidian CSS Quick Guide” but it ended up being more focused on the inspector. As a retrospective change to help people use this as a resource, it has been renamed. – FireIsGood Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. …

---

Also, a tried and true troubleshooting technique: turn everything off and start enabling things slowly to see when the issue shows up.

For CSS, I’d comment out any custom CSS you have, and start uncommenting sections. When the issue shows up, you’ll know what section or exact rule/declaration that’s causing the issue.