Code block shows as red in edit mode

I have tried search for how to customise stuff in the edit mode with css but without success. I would like the text not to be displayed red on black when entering for example:

See screenshot attached.

Screenshot 2021-07-05 at 15.55.21

Red on black is very hard to read for me I literally can’t see it!

You can create a css snippet for this.
But first don’t you consider change the base theme for light?

@panning

Try this css:

.cm-s-obsidian .HyperMD-codeblock {
    color: #00dd00;
}

I’m not 100% sure that is the right css to change but it worked for me.

To use it:
Settings
Appearance
CSS Snippets - click the folder icon
create a .css file in the folder that opens (example codecolor.css)
edit the file, paste in the css I posted above, save
go back to obsidian
click the circular refresh arrows next to the folder you clicked previously
the css file you created will show up under it
turn the slider on next to it and it should change the text from red to green

you can pick a custom color by changing the rgb hex value ( the #00dd00 in color: #00dd00; )
https://www.rapidtables.com/web/color/RGB_Color.html

1 Like

@JimK
Yep that does the trick thanks for finding the right css class to edit. My eyes can rest now.

Update
If you want to fix the inline code rendering in edit and preview mode add these additional overrides to your css snipet as per @JimK

.cm-s-obsidian .HyperMD-codeblock  {
    color: #00FFFF;
}   

.cm-s-obsidian span.cm-inline-code  {
    color: #00FFFF;
}

.markdown-preview-view code {
    color: #00FFFF;
}
1 Like

@mnvwvnm I like the dark mode appart from this one bit.

1 Like

I managed to change the color of it to orange on my desktop app a few weeks ago but it remains a problem on my iPad where the text is even smaller because I cannot access the theme or snippets folder because it is currently a hidden file and doesn’t sync.

I am eagerly waiting for the next release of the mobile app which, I am led to believe, will make changing it somewhat easier.

If you wish, give a try to the Editor Syntax Highlight Obsidian Plugin. It also deals correctly with dark mode.

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