Revisit Coloring and Dark Mode

[campb303]

The color palette for webqueue2 is ad-hoc and inconsistent. Following Google's Material Design, there is a concept for "primary" and "secondary" color. However, the applications of these colors and their shades are inconsistent and do not conform to information hierarchy heuristics. The dark mode also needs work thought I've no specific direction to take at this point.

Moving forward with this, we should first revisit the provided theming capabilities of MUI. Using these tools as theme overrides we can maintain programatic theming with greater usability.

[campb303]

#127 and #19 are related.

[wrigh393]

In order to get a better understanding of how color can change the UX of webqueue2 and how we can make a color theme that follows common UX design practices, I've gathered a collection of articles that offer some info on some best practices for design a color theme for a product.

• Dark Mode UI: the definitive guide
• The Role of Color in UX
• Designing Systematic Colors
• How To Use Color In UI Design Wisely to Create A Perfect UI Interface?

The information in these article talk about important topics that we should discuss such as:

• Color palette type (ex. monochromatic, analogous, complementary, etc.)
• Accessibility
• Proper implementation of dark mode
• Color proportion

[campb303]

This will not be fixed by the current team. Next steps are to audit each component and their combintations in both light and dark mode. Changes can be made in the theme.js file where an MUI theme is created. MUI theme customization docs may also be helpful.