How to change color of code block text

Brute changing using this CSS snippet makes text dependable on dark/light theme(make white text unreadable on light theme and vice versa)

.markdown-preview-view code {
color: #FFF;
}

Is there more ‘correct way’ of changing code text to default text color?

Depends… You use default theme?
If yes, for default text color you can use this

color: var(--text-normal)

Thanks, that is nice solution!

Is there a way i can use 2 custom colors for code for light and dark theme?

Yes, there’s a way.
With var(--text-normal) the color behaves as the normal text: almost black in light theme and white in dark theme.
If you want another colors they need to be defined in this way:

:root
{
  --mycolor1: #F9E300;
  --mycolor2: #ef4343;
}

.theme-light {
  --color-code: var(--mycolor1);
}

.theme-dark {
  --color-code: var(--mycolor2);
}

Then, instead of color: var(--text-normal) you place this:

color: var(--color-code)
1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.