MyNihongo / MudBlazor.Markdown

Markdown component based on the MudBlazor environment
https://mudblazor.com/
MIT License
115 stars 13 forks source link

Detach code block background color from OverlayDark #248

Closed kelltom closed 2 months ago

kelltom commented 2 months ago

Just wanted to drop a quick issue here in case anyone is maintaining.

I notice that it's not really ideal to have the code block's bg color tied to OverlayDark. The below examples are using the default MudBlazor theme colors.

In light mode, you'd end up with something like this, which has poor contrast: chrome_ZRJcHPlQVl

Although it looks quite good in dark mode: chrome_1M1ShfceI6

We can lighten the OverlayDark in the MudBlazor Theme config, but this changes the appearance of all of our dialog backgrounds to appear washed out, as opposed to making a shadowy appearance.

Is there some better way to isolate the color of the code bg in light mode?

MihailsKuzmins commented 2 months ago

https://mudblazor.com/customization/default-theme#palette provides all available colours and back in the day OverlayDark seemed like the best option (even though it was not great in the light theme). Maybe there is something better now, but trying all options will take some time. Maybe OverlayLight would be better, but rgba(255,255,255,0.4980392156862745) seems like super white

kelltom commented 2 months ago

I found a pretty decent compromise in setting:

OverlayDark = new MudColor(100, 100, 100, 0.3).ToString(),

This way, there's still a noticable tint when pulling up MudDialogs, and markdown looks good.

MudDialog example: chrome_Z5zoBhkhRq

Highlight example: chrome_uyqGIAyjmo

MihailsKuzmins commented 2 months ago

I think that --mud-palette-chip-default is a pretty good option from the default library:

Light

image

Dark

image