Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Black Backgrounds #22

Open
riannella opened this issue Jan 24, 2025 · 3 comments
Open

Black Backgrounds #22

riannella opened this issue Jan 24, 2025 · 3 comments

Comments

@riannella
Copy link

Using black backgrounds for images is not a good idea.
And grey text on back bgs (see Figure 2) is hard to read
@niklasl
Copy link
Contributor

niklasl commented Jan 25, 2025

I agree. I have begun to look into an issue caused by the highlighter automatically adhering to the user agent dark mode setting, even while the spec is locked to light mode. I believe that this may be causing your issue. Do you use dark mode in your browser or OS? If so, does switching to light mode make it look better?

If so, this is partially solved by enabling dark mode support; which I'm planning a PR for. However, while ReSpec dark mode support also adds a manual user dark/light toggle (thankfully), this does not seem supported by the syntax highlighter. More investigation needed.

I'm also converting all illustrations to SVG (likely in a preceding PR to do this stepwise). Alas, due to the (valuable) manual toggle support this requires more "involved" use of SVG. I've gotten that to work, but need to consider maintenance complexity of that as well.

@riannella
Copy link
Author

Yes, I am using dark mode (mac OSX, safari)... but the main document has a white background...

@niklasl
Copy link
Contributor

niklasl commented Jan 28, 2025

Yes, I am using dark mode (mac OSX, safari)... but the main document has a white background...

Yes, that's the problem: the spec isn't darkmode-enabled (and is thus effectively in "always light mode"), but the syntax highlighting (from ReSpec) still automatically switches to dark mode.

(Adding <meta name="color-scheme" content="light dark"> partially fixes that, but since this mode also enables a user-controlled light/dark toggle, if that is used to view the document in light mode, the highlighting problem comes back.)

niklasl added a commit that referenced this issue Feb 9, 2025
@niklasl
Enable dark mode and adjust hljs and SVG styles
e0b7abb 
This adds support for OS-wide user preferences and enables the
ReSpec-provided user override of the same,

The adjusted styles also fixes the current problem where OS-wide dark
mode is applied on the syntax highlight blocks, even though the document
was locked to light mode.

The color-scheme property controls selection of color-scheme also in
external SVG documents, so the embedded SVG is replaced by an external
include through an object element.

This should address the problems reported in #22.
@niklasl niklasl mentioned this issue Feb 9, 2025
Draft
niklasl added a commit that referenced this issue Feb 9, 2025
@niklasl
Enable dark mode and adjust hljs and SVG styles
9bf35ef 
This adds support for OS-wide user preferences and enables the
ReSpec-provided user override of the same,

The adjusted styles also fixes the current problem where OS-wide dark
mode is applied on the syntax highlight blocks, even though the document
was locked to light mode.

The color-scheme property controls selection of color-scheme also in
external SVG documents, so the embedded SVG is replaced by an external
include through an object element.

This should address the problems reported in #22.
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@niklasl @riannella