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

Adjust diagrams for dark theme #308

Closed
2 of 3 tasks
matevz opened this issue Nov 17, 2022 · 7 comments · Fixed by #1055
Closed
2 of 3 tasks

Adjust diagrams for dark theme #308

matevz opened this issue Nov 17, 2022 · 7 comments · Fixed by #1055
Assignees
Labels
images Images and diagrams assets related issues

Comments

@matevz
Copy link
Member

matevz commented Nov 17, 2022

Go through all diagrams and check that they are readable in the dark theme:

  • for SVG images drawn with drawio.com, reexport them with "Automatic" Appearance option and "Transparent background"
  • for SVG images generated by mermaidjs, write a theme-sensitive CSS
  • get rid of the enforced white background for all images

Transparent PNGs (do we have any?) should either be redrawn/reexported in SVG or designed in such a way that the text is readable regardless of the background. Non-transparent PNGs and JPEGs could maybe use Docuaurus' themed images in the future?

@matevz matevz added the images Images and diagrams assets related issues label Nov 17, 2022
@matevz
Copy link
Member Author

matevz commented Oct 10, 2024

Possible solution would be the following:

  • for any image (png, svg, jpeg) use the default myimage.png filename for light themes. For dark themes, check, if myimage_dark.png exists and use it instead. Otherwise keep the original image. So something like the ThemedImage, but automated.
  • for .svg files, instead of having another image, cool kids now detect the theme and change coloring with inline CSS. For example check out the current favicon or the ROFL diagram.

@matevz
Copy link
Member Author

matevz commented Nov 11, 2024

drawio.com which we use for most of the hand-drawn diagrams now has theming support for SVG export. Selecting the "Automatic" theme option in the export dialog adds theme-sensitive CSS snippet in the SVG. This, and enabling transparent background gives best results in our docs.
image

Final result:

Light Dark
image image

@aefhm
Copy link
Contributor

aefhm commented Nov 19, 2024

TODO

@aefhm
Copy link
Contributor

aefhm commented Dec 15, 2024

Mermaid SVGs appear a little harder. Docusaurus is stripping things when I inline the SVGs.
Screenshot 2024-12-15 at 4 10 25 PM

@aefhm
Copy link
Contributor

aefhm commented Dec 15, 2024

Maybe we should just merge the easy changes now and give another pass later.

@matevz
Copy link
Member Author

matevz commented Dec 20, 2024

Can you open a separate issue for mermaid diagrams?

@aefhm
Copy link
Contributor

aefhm commented Dec 20, 2024

Can you open a separate issue for mermaid diagrams?

Continuing Mermaid work in #1070.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
images Images and diagrams assets related issues
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants