CSS Bug in AI Response Prose (Dark Mode)

[MagicPlants]

You see here that in dark mode that STRONG tag in these lists produces a color that isn't legible on the background color.

This is how it looks to me and where I found the problem in the inspector This is what I propose the fix could look like.

The offending code is below:

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    color: var(--tw-prose-bold);
}

I suggest a fix would look like this (as seen in the screenshots)

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    color: #d2d2d2;
    font-weight: 600;
}

Perfect color for a dark mode theme and adds a bit of contrast. #d2d2d2 for the win.

I'll perform a pull request and fix it myself as well, just give me a little bit. I think it's located in /src/components/Messages/UserMessage.vue and /src/components/Messages/AiMessage.vue but I will confirm when I do the pull request.

Unrelated: I will also look into adding OpenAI support (the bounty).

[MagicPlants]

Fixed it by adding

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: #d2d2d2;
  font-weight: 600;
}

to the file

src/style.css

See attached Pull request. Feel free to merge as it fixes anywhere the STRONG tag occurs in dark mode.

[HelgeSverre]

better to add dark:prose-invert, which will do the same thing, but applies neatly to everything.