Toggle components between light and dark themes

patternfly / patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project

115 stars 105 forks source link

Toggle components between light and dark themes #1205

Closed mcarrano closed 3 months ago

mcarrano commented 1 year ago

on the patternfly.org website, We currently don't have a good way to toggle component previews between light and dark themes. Start with considering what the ideal interaction would be and what visual issues might occur in previewing dark theme components. Provide moockups to describe the interaction.

maryshak1996 commented 1 year ago

WIP Designs: https://www.sketch.com/s/4abdb322-cd19-49af-8dbc-111adf6b071b

maryshak1996 commented 1 year ago

Update here (tagging @lboehling for awareness)! To support the multiple dark and light themes for PF5, I've updated the designs to reflect two final options in the form of dropdowns:

Show the theme dropdown at the variant level for each component (view flow)
Show the theme dropdown inline with the TOC of each component (view flow)

andrew-ronaldson commented 3 months ago

Since this issue was created we added light and dark theme switching in the masthead for full page theme switching. Based on the change I will be closing this issue but we can revisit if we want to show additional themes in the future.