Dark Theme

[farisdurrani]

Describe the solution you'd like Implement both a dark theme (maybe like this) and a light theme that we currently have. It creates a far better modern UI experience for the user

[farisdurrani]

The idea is to use React Context to save the theme as an Enum and create CSS classes specific for the chosen light or dark theme - John Ramberger, DSGT

import { createContext, useContext } from "react";
​
export enum Theme {
  Light = "Light",
  Dark = "Dark",
  Black = "Black",
  Bubblegum = "Bubblegum",
}
​
export type ThemeContextType = {
  theme: Theme;
  setTheme: (Theme: Theme) => void;
};
​
export const ThemeContext = createContext<ThemeContextType>({
  theme: Theme.Dark,
  setTheme: (theme) => console.warn("no theme provider"),
});
export const useTheme = () => useContext(ThemeContext);