Skip to content

add dark mode toggle #1694

@Forfold

Description

@Forfold

What problem would you like to solve? Please describe:
Extending off of #1458, while we are discussing the various sizes and colors of different aspects of our theme, we can certainly turn on the default material-ui dark mode theme (as a toggle) since this is supported out of the box, and adjust any out-of-place elements as necessary. Then, when we get to the rest of the theme settings in #1458, the bulk of that PR should hopefully remain in the mui theme file.

I'm thinking we can use local storage to store the setting, that way each device has its own preference set (i.e. if we used the DB, a user may have light mode on their PC and dark mode on their phone). We can also use a media query to make our best guess as to what the user currently has their device set to. Though if we don't know, setting to light may be best as that is the closest to the current palette.

Describe the solution you'd like:

  • Both default @material-ui/core dark/light themes enabled
  • Toolbar toggle to switch between themes

Describe alternatives you've considered:
N/A

Additional context:
It may be wise to settle on a primary/secondary color for dark and light themes before fully merging- we don't want to change app branding too often if we can help it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions