Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Dark Mode SVG Text Fix #48

Merged
merged 1 commit into from
Dec 27, 2022

Conversation

nofurtherinformation
Copy link
Contributor

Currently, SVG text in many of the diagrams appears as black on dark blue in dark mode. The SVG text elements currently receive the default color, black:

Light mode:
image

Dark mode:
image

This PR suggests a one-liner CSS fix to apply the foreground css variable (var(--fg)) to the svg text element to make svg text legible and accessible. This is bundled into the output using the additional-css property in mdbook's config book.toml.

This is probably something that could be fixed upstream in mdbook/mdbook-svgbob sometime, but this patch would fix it for current usability.

@google-cla
Copy link

google-cla bot commented Dec 23, 2022

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

book.toml Outdated Show resolved Hide resolved
@mgeisler
Copy link
Collaborator

Hi @nofurtherinformation, thanks a lot for looking into this!

This PR suggests a one-liner CSS fix to apply the foreground css variable (var(--fg)) to the svg text element to make svg text legible and accessible.

Super nice! I definitely want the different themes to be legible so this is important to fix. Could you update the PR description with an image showing how it looks after your fix? (I can check it out myself, but it'll be useful for others to see what the fix does).

I agree that we should file an issue upstream (probably mdbook-svgbob) about this. I'll be happy to do that after we merge this.

@mgeisler mgeisler force-pushed the darkmode-svg-text-fix branch from 4741eb9 to 8e64303 Compare December 27, 2022 16:02
@mgeisler mgeisler force-pushed the darkmode-svg-text-fix branch from 8e64303 to 2ce3223 Compare December 27, 2022 16:05
@mgeisler mgeisler self-assigned this Dec 27, 2022
@mgeisler mgeisler merged commit aab767c into google:main Dec 27, 2022
@nofurtherinformation
Copy link
Contributor Author

Apologies for the slow reply here @mgeisler (I was a bit offline for the holidays) and thanks for merging this in! For posterity, here is a screenshot of the new styling.
Screen Shot 2023-01-03 at 10 07 02 AM

@nofurtherinformation nofurtherinformation deleted the darkmode-svg-text-fix branch January 3, 2023 16:08
@mgeisler
Copy link
Collaborator

mgeisler commented Jan 5, 2023

No worries at all, I was also out myself 😄 Thanks for the elegant fix, it would have taken me a while to figure this out myself!

@mgeisler
Copy link
Collaborator

mgeisler commented Jan 5, 2023

I reported it upstream now, I hope the fix can be included there somehow: boozook/mdbook-svgbob#22.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants