pre blocks have light text on light background in dark mode #1863

Open
opened 1 month ago by adrinux · 5 comments
adrinux commented 1 month ago

Seeing this bug on a code block but the colour is applied via the pre element that wraps the code element.

Editing mode is fine but on save text becomes unreadable.

I assume this is another overlooked element that needs colour flipped for dark mode but haven't had a proper look yet.

Probably need to switch --pre-background to something darker.

background-color: var(--pre-background);
color: var(--pre);
Seeing this bug on a code block but the colour is applied via the pre element that wraps the code element. Editing mode is fine but on save text becomes unreadable. I _assume_ this is another overlooked element that needs colour flipped for dark mode but haven't had a proper look yet. Probably need to switch --pre-background to something darker. ```css background-color: var(--pre-background); color: var(--pre); ```
Poster

This is replicateable on try.

I also note the pre background in light mode is an odd barely visible shade of grey.

It seems both both --pre and --pre-background are still using Bulma defaults (in light mode as well as dark) and need switched to something that fits with Vikunja colours (presumably one of the greys we already define).

This is replicateable on try. I also note the pre background in light mode is an odd barely visible shade of grey. It seems both both --pre and --pre-background are still using Bulma defaults (in light mode as well as dark) and need switched to something that fits with Vikunja colours (presumably one of the greys we already define).
konrad added the
kind/bug
label 1 month ago
Owner

I think switching the variables to one of the greys we already have is the way to go.

It's a different story when using code blocks with syntax highlighting like these:

image

image

The highlighting is powered by highlight.js which also includes the stylesheets. I don't think they have variants for dark modes.

I think switching the variables to one of the greys we already have is the way to go. It's a different story when using code blocks with syntax highlighting like these: ![image](/attachments/200c2344-b0f7-4823-baf3-24e4282c2bf9) ![image](/attachments/b159111f-adcb-4c74-ade4-22641c5f6c69) The highlighting is powered by highlight.js which also includes the stylesheets. I don't think they have variants for dark modes.
7.4 KiB
6.4 KiB
Poster

Screenshots attached for '--background' set to '--grey--200' in light and dark.

How do we feel about that?

Screenshots attached for '--background' set to '--grey--200' in light and dark. How do we feel about that?
Owner

I think that's already better even if not perfect. But a lot more readable.

I think that's already better even if not perfect. But a lot more readable.
Poster

The lack of contrast in syntax highlight colours in dark mode is troubling me. Might need to do something separate for dark mode, a bit darker.

I'll whip up a pull request.

The lack of contrast in syntax highlight colours in dark mode is troubling me. Might need to do something separate for dark mode, a bit darker. I'll whip up a pull request.
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.