Update dark theme handbook with suggestions for swapping images between light/dark mode
https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/developer-resources/dark-theme-handbook.md
Towards https://github.com/patternfly/patternfly/issues/5613, we should reference a few ways of managing displaying images/logos (though this could apply to other things as well) between dark/light theme. There is a core issue here to come up with some recommendations we can support - https://github.com/patternfly/patternfly/issues/6362
Some thoughts:
-
Use inline SVG's with
fillcolors set to PF CSS vars that adapt to light/dark theme -
Use colors that work well with light and dark theme (penta colors and PF chart colors have palettes that work with light and dark)
-
Utilize background color, border color, border-radius, and padding/spacing to create a container that can hold dynamic/user-supplied images (hinted at in this comment)
-
Write CSS (manually or as a common/utility class)
<img src="/light-theme.jpg" class="show-in-light"> <img src="/dark-theme.jpg" class="show-in-dark"> .show-in-dark, .pf-v5-theme-dark .show-in-light { display: none; } .pf-v5-theme-dark .show-in-dark { display: revert; }