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

New Issue

adrinux · 2022-04-25T14:16:04Z

adrinux commented

2022-04-25 14:16:04 +00:00

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); ```

pre-darkmode-bug.png

101 KiB

adrinux commented

2022-04-25 14:25:49 +00:00

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 2022-04-25 16:50:33 +00:00

konrad commented

2022-04-25 16:53:29 +00:00

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:

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.

image.png

7.4 KiB

image.png

6.4 KiB

adrinux commented

2022-05-10 15:55:18 +00:00

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?

vikunja-light-g200.png

74 KiB

vikunja-dark-g200.png

74 KiB

konrad commented

2022-05-10 16:00:47 +00:00

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

adrinux commented

2022-05-10 20:50:21 +00:00

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.

👍 1

konrad commented

2023-03-09 11:59:39 +00:00

This appears to be fixed.

konrad closed this issue

2023-03-09 11:59:39 +00:00

konrad referenced this issue from a commit

2024-02-07 14:00:34 +00:00

fix(deps): update dependency @types/sortablejs to v1.13.0 (#1915)

Sign in to join this conversation.