Themes

[sbsrnt]

Description

Colorblind people have a hard time distinguishing the colors of the app, especially charts thus having a poor user experience.

To help them out we need a flexible theme feature where every color part of the app can be customized.

Acceptance criteria

1. Create a new themeStore.ts in src/store file with appropriate observables / actions (see other store files for reference)
2. Create new theme.interface.ts in src/interfaces with groups that are similar to the ones found in src/assets/themes/exilence-theme.tsx
3. Update src/components/global-styles/GlobalStyles.tsx#38 line with new theme.palette.scrollbar.thumb value
4. Create a new category in Interface page under new folder called Theme in src/components/settings-tabs/interface
5. Create an appropriate color-picker inputs for every color-related key listed in src/assets/themes/exilence-theme.tsx
6. Replace any found hardcoded colors with appropriate theme.palette.{key}

Notes

• MUI doesn't have a build-in color picker but there are components that support MUI theming: https://github.com/mikbry/material-ui-color https://github.com/viclafouch/mui-color-input