In PR #56037, the first steps were taken to improve the readability of the Kubernetes Basics diagrams. What was done? A white background was added instead of a transparent one.
212b9ae#diff-692fc1b70f750cd3f01d3d08970ce025910c580907bbf11da2467716a767091e
However, a white #FFF background for images in dark mode is a compromise that is required at this stage. From a UX perspective, it doesn't look quite right. It would be worthwhile to adjust the image files so that they have a dark background in dark mode while maintaining readability.
SVG files, which are structured as XML documents, allow for multiple color schemes for a single image simultaneously and enable switching between them.
It would be great to make the necessary changes to implement a dark color scheme for the files.
I currently see several options in this regard:
- Add styles for a dark theme to the SVG file code (the preferred option).
- Creating a separate set of files for the dark theme (the fallback option).
Yesterday, I tried option 1, but due to differences in rendering and switching between dark and light modes, the desired result was only achieved in Firefox. Other browsers, such as Safari and Chromium-based browsers, use the styles embedded in SVG files differently.
For now, I’ve decided to go with option 2 and create two separate sets of images, one for dark mode and one for light mode, and switch between them using Docsy.
To be continued.
Work in Progress 👇
In PR #56037, the first steps were taken to improve the readability of the Kubernetes Basics diagrams. What was done? A white background was added instead of a transparent one.
212b9ae#diff-692fc1b70f750cd3f01d3d08970ce025910c580907bbf11da2467716a767091e
However, a white
#FFFbackground for images in dark mode is a compromise that is required at this stage. From a UX perspective, it doesn't look quite right. It would be worthwhile to adjust the image files so that they have a dark background in dark mode while maintaining readability.SVG files, which are structured as XML documents, allow for multiple color schemes for a single image simultaneously and enable switching between them.
It would be great to make the necessary changes to implement a dark color scheme for the files.
I currently see several options in this regard:
Yesterday, I tried option 1, but due to differences in rendering and switching between dark and light modes, the desired result was only achieved in Firefox. Other browsers, such as Safari and Chromium-based browsers, use the styles embedded in SVG files differently.
For now, I’ve decided to go with option 2 and create two separate sets of images, one for dark mode and one for light mode, and switch between them using Docsy.
To be continued.
Work in Progress 👇