patternfly-org icon indicating copy to clipboard operation
patternfly-org copied to clipboard

Update dark theme handbook with suggestions for swapping images between light/dark mode

Open mcoker opened this issue 2 years ago • 0 comments

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 fill colors 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;
    }
    

mcoker avatar Aug 03 '23 22:08 mcoker