evildmp / diataxis-documentation-framework

A systematic approach to creating better documentation.
https://diataxis.fr
Other
889 stars 166 forks source link

Dark logo and dark-mode-ready content #68

Open webknjaz opened 1 year ago

webknjaz commented 1 year ago

Hey @evildmp, the current dark mode logo is white and has high contrast with the rest of the website and https://pradyunsg.me/furo/customisation/logo/#different-logos-for-light-and-dark-mode is a thing. Also, it should ideally be SVG in which case, maybe, it won't be necessary to have two logo files and just make use of CSS media queries inside SVG.

Same goes for the rest of the imagery. While PNG supports transparent background, it'd be nice to have those images scalable too.

Note that if you ever decide to embed one of the images into the GitHub readme, you can also use SVG there as well as separate images with different URL fragments for the schemes.

superuser-does commented 3 weeks ago

As a simpler solution, you can also use this command for ImageMagick to convert white to transparency:

convert input.png -transparent -fuzz 10% white output.png

The -fuzz 10% parameter will help with gradients and gradual transitions from white to a colour like orange.

This should work right now for the logo.

Of course, the author will need to select another colour for the diagrams, as they have text in black on them currently.