To decide on use of color scheme and to integrate Bootstrap theme for the various UI or display components of the filter panel.
Originally posted by @asbates in #220 (comment)
- I think this is generally going to be too much color and will be distracting for a user. Generally it's a good idea to use color sparingly, usually to make something stand out to focus the users attention.
- If we really want to use a lot of color, we should use the colors for their intended roles. With Bootstrap there a defined colors called primary, secondary, warning, error, info, a whole host of grays, etc. Using the primary color for everything doesn't display distinction between content. For example, I would consider the conditions (e.g.
AESER == 'Y') information so would use the "info" color here if any (non-gray) color at all.
- Consider the card header. The majority has a lighter blue with the switch being a darker blue. That is going to be difficult to maintain across themes. For a dark theme for example, would the switch be a lighter shade? What if someone uses a fully custom theme? (i.e. not an off-the-shelf Bootswatch theme). While it may look fine if we only use the default theme, it's going to be very difficult to maintain across any color scheme. And if we keep it blue, it will clash if a user chooses a different theme. Which brings me to...
- I think for now we should focus on content. Things like alignment are fine because that's going to be common whatever the theme. But things like color and/or something that won't apply no matter the underlying theme should wait. The reason I say this is because the entire teal ecosystem needs a visual overhaul and making changes to one thing at a time without taking everything into consideration will lead to visual clashes. One example of this is sometimes when you see the default Shiny blue color, it is hard coded rather than actually matching a theme (examples below). If you view an app with the variable browser module you'll notice the colors of the plots don't match the theme.
Example of clash that results from hard-coded colors that don't respect the theme. This Bootstrap version 5 with Bootswatch theme of "Journal". Note the color for the radio buttons. The buttons themselves are the primary theme color. The label background however is based on the default Shiny colors. The result is a pretty stark visual clash.
To decide on use of color scheme and to integrate Bootstrap theme for the various UI or display components of the filter panel.
Originally posted by @asbates in #220 (comment)