Add dark mode

ui/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import clsx from "clsx";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles, ThemeProvider } from "@material-ui/core/styles";
 import AppBar from "@material-ui/core/AppBar";
 import Drawer from "@material-ui/core/Drawer";
 import Toolbar from "@material-ui/core/Toolbar";
@@ -26,6 +26,7 @@ import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
 import CloseIcon from "@material-ui/icons/Close";
 import { AppState } from "./store";
 import { paths } from "./paths";
+import { makeTheme } from "./theme";
 import { closeSnackbar } from "./actions/snackbarActions";
 import ListItemLink from "./components/ListItemLink";
 import SchedulersView from "./views/SchedulersView";
@@ -125,7 +126,10 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function mapStateToProps(state: AppState) {
-  return { snackbar: state.snackbar };
+  return {
+    snackbar: state.snackbar,
+    isDarkTheme: state.settings.isDarkTheme,
+  };
 }
 
 const mapDispatchToProps = {
@@ -141,151 +145,152 @@ function SlideUpTransition(props: TransitionProps) {
 function App(props: ConnectedProps<typeof connector>) {
   const classes = useStyles();
   const [open, setOpen] = useState(true);
-  const toggleDrawer = () => {
-    setOpen(!open);
-  };
+  const toggleDrawer = () => setOpen(!open);
+  const theme = makeTheme(props.isDarkTheme);
   return (
-    <Router>
-      <div className={classes.root}>
-        <AppBar
-          position="absolute"
-          className={classes.appBar}
-          variant="outlined"
-        >
-          <Toolbar className={classes.toolbar}>
-            <IconButton
-              edge="start"
-              color="inherit"
-              aria-label="open drawer"
-              onClick={toggleDrawer}
-              className={classes.menuButton}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography
-              component="h1"
-              variant="h6"
-              color="inherit"
-              noWrap
-              className={classes.title}
-            >
-              Asynq Monitoring
-            </Typography>
-          </Toolbar>
-        </AppBar>
-        <div className={classes.mainContainer}>
-          <Drawer
-            variant="permanent"
-            classes={{
-              paper: clsx(
-                classes.drawerPaper,
-                !open && classes.drawerPaperClose
-              ),
-            }}
-            open={open}
+    <ThemeProvider theme={theme}>
+      <Router>
+        <div className={classes.root}>
+          <AppBar
+            position="absolute"
+            className={classes.appBar}
+            variant="outlined"
           >
-            <Snackbar
-              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-              open={props.snackbar.isOpen}
-              autoHideDuration={6000}
-              onClose={props.closeSnackbar}
-              TransitionComponent={SlideUpTransition}
+            <Toolbar className={classes.toolbar}>
+              <IconButton
+                edge="start"
+                color="inherit"
+                aria-label="open drawer"
+                onClick={toggleDrawer}
+                className={classes.menuButton}
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography
+                component="h1"
+                variant="h6"
+                color="inherit"
+                noWrap
+                className={classes.title}
+              >
+                Asynq Monitoring
+              </Typography>
+            </Toolbar>
+          </AppBar>
+          <div className={classes.mainContainer}>
+            <Drawer
+              variant="permanent"
+              classes={{
+                paper: clsx(
+                  classes.drawerPaper,
+                  !open && classes.drawerPaperClose
+                ),
+              }}
+              open={open}
             >
-              <SnackbarContent
-                message={props.snackbar.message}
-                className={classes.snackbar}
-                action={
-                  <IconButton
-                    size="small"
-                    aria-label="close"
-                    color="inherit"
-                    onClick={props.closeSnackbar}
-                  >
-                    <CloseIcon
-                      className={classes.snackbarCloseIcon}
-                      fontSize="small"
-                    />
-                  </IconButton>
-                }
-              />
-            </Snackbar>
-            <div className={classes.appBarSpacer} />
-            <div className={classes.sidebarContainer}>
-              <List>
-                <div>
-                  <ListItemLink
-                    to={paths.HOME}
-                    primary="Queues"
-                    icon={<BarChartIcon />}
-                  />
-                  <ListItemLink
-                    to={paths.SERVERS}
-                    primary="Servers"
-                    icon={<DoubleArrowIcon />}
-                  />
-                  <ListItemLink
-                    to={paths.SCHEDULERS}
-                    primary="Schedulers"
-                    icon={<ScheduleIcon />}
-                  />
-                  <ListItemLink
-                    to={paths.REDIS}
-                    primary="Redis"
-                    icon={<LayersIcon />}
-                  />
-                </div>
-              </List>
-              <List>
-                <ListItemLink
-                  to={paths.SETTINGS}
-                  primary="Settings"
-                  icon={<SettingsIcon />}
+              <Snackbar
+                anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+                open={props.snackbar.isOpen}
+                autoHideDuration={6000}
+                onClose={props.closeSnackbar}
+                TransitionComponent={SlideUpTransition}
+              >
+                <SnackbarContent
+                  message={props.snackbar.message}
+                  className={classes.snackbar}
+                  action={
+                    <IconButton
+                      size="small"
+                      aria-label="close"
+                      color="inherit"
+                      onClick={props.closeSnackbar}
+                    >
+                      <CloseIcon
+                        className={classes.snackbarCloseIcon}
+                        fontSize="small"
+                      />
+                    </IconButton>
+                  }
                 />
-                <ListItem
-                  button
-                  component="a"
-                  className={classes.listItem}
-                  href="https://github.com/hibiken/asynqmon/issues"
-                  target="_blank"
-                >
-                  <ListItemIcon>
-                    <FeedbackIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Send Feedback" />
-                </ListItem>
-              </List>
-            </div>
-          </Drawer>
-          <main className={classes.content}>
-            <div className={classes.contentWrapper}>
-              <Switch>
-                <Route exact path={paths.QUEUE_DETAILS}>
-                  <TasksView />
-                </Route>
-                <Route exact path={paths.SCHEDULERS}>
-                  <SchedulersView />
-                </Route>
-                <Route exact path={paths.SERVERS}>
-                  <ServersView />
-                </Route>
-                <Route exact path={paths.REDIS}>
-                  <RedisInfoView />
-                </Route>
-                <Route exact path={paths.SETTINGS}>
-                  <SettingsView />
-                </Route>
-                <Route exact path={paths.HOME}>
-                  <DashboardView />
-                </Route>
-                <Route path="*">
-                  <PageNotFoundView />
-                </Route>
-              </Switch>
-            </div>
-          </main>
+              </Snackbar>
+              <div className={classes.appBarSpacer} />
+              <div className={classes.sidebarContainer}>
+                <List>
+                  <div>
+                    <ListItemLink
+                      to={paths.HOME}
+                      primary="Queues"
+                      icon={<BarChartIcon />}
+                    />
+                    <ListItemLink
+                      to={paths.SERVERS}
+                      primary="Servers"
+                      icon={<DoubleArrowIcon />}
+                    />
+                    <ListItemLink
+                      to={paths.SCHEDULERS}
+                      primary="Schedulers"
+                      icon={<ScheduleIcon />}
+                    />
+                    <ListItemLink
+                      to={paths.REDIS}
+                      primary="Redis"
+                      icon={<LayersIcon />}
+                    />
+                  </div>
+                </List>
+                <List>
+                  <ListItemLink
+                    to={paths.SETTINGS}
+                    primary="Settings"
+                    icon={<SettingsIcon />}
+                  />
+                  <ListItem
+                    button
+                    component="a"
+                    className={classes.listItem}
+                    href="https://github.com/hibiken/asynqmon/issues"
+                    target="_blank"
+                  >
+                    <ListItemIcon>
+                      <FeedbackIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Send Feedback" />
+                  </ListItem>
+                </List>
+              </div>
+            </Drawer>
+            <main className={classes.content}>
+              <div className={classes.contentWrapper}>
+                <Switch>
+                  <Route exact path={paths.QUEUE_DETAILS}>
+                    <TasksView />
+                  </Route>
+                  <Route exact path={paths.SCHEDULERS}>
+                    <SchedulersView />
+                  </Route>
+                  <Route exact path={paths.SERVERS}>
+                    <ServersView />
+                  </Route>
+                  <Route exact path={paths.REDIS}>
+                    <RedisInfoView />
+                  </Route>
+                  <Route exact path={paths.SETTINGS}>
+                    <SettingsView />
+                  </Route>
+                  <Route exact path={paths.HOME}>
+                    <DashboardView />
+                  </Route>
+                  <Route path="*">
+                    <PageNotFoundView />
+                  </Route>
+                </Switch>
+              </div>
+            </main>
+          </div>
         </div>
-      </div>
-    </Router>
+      </Router>
+    </ThemeProvider>
   );
 }
 

ui/src/actions/settingsActions.ts

@@ -1,13 +1,18 @@
 // List of settings related action types.
-export const POLL_INTERVAL_CHANGE = "POLL_INTERVAL_CHANGE";
+export const POLL_INTERVAL_CHANGE = 'POLL_INTERVAL_CHANGE';
+export const TOGGLE_DARK_THEME = 'TOGGLE_DARK_THEME';
 
 interface PollIntervalChangeAction {
   type: typeof POLL_INTERVAL_CHANGE;
   value: number; // new poll interval value in seconds
 }
 
+interface ToggleDarkThemeAction {
+  type: typeof TOGGLE_DARK_THEME;
+}
+
 // Union of all settings related action types.
-export type SettingsActionTypes = PollIntervalChangeAction;
+export type SettingsActionTypes = PollIntervalChangeAction | ToggleDarkThemeAction;
 
 export function pollIntervalChange(value: number) {
   return {
@@ -15,3 +20,10 @@ export function pollIntervalChange(value: number) {
     value,
   };
 }
+
+export function toggleDarkTheme() {
+  return {
+    type: TOGGLE_DARK_THEME
+  }
+}
+

ui/src/index.tsx

@@ -2,19 +2,15 @@ import React from "react";
 import ReactDOM from "react-dom";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "@material-ui/core/styles";
 import App from "./App";
 import store from "./store";
-import theme from "./theme";
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <React.StrictMode>
     <CssBaseline />
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <App />
-      </ThemeProvider>
+      <App />
     </Provider>
   </React.StrictMode>,
   document.getElementById("root")

ui/src/reducers/settingsReducer.ts

@@ -1,23 +1,24 @@
-import {
-  POLL_INTERVAL_CHANGE,
-  SettingsActionTypes,
-} from "../actions/settingsActions";
+import {POLL_INTERVAL_CHANGE, SettingsActionTypes, TOGGLE_DARK_THEME,} from '../actions/settingsActions';
 
 interface SettingsState {
   pollInterval: number;
+  isDarkTheme: boolean;
 }
 
 const initialState: SettingsState = {
   pollInterval: 8,
+  isDarkTheme: false,
 };
 
 function settingsReducer(
-  state = initialState,
-  action: SettingsActionTypes
-): SettingsState {
+    state = initialState, action: SettingsActionTypes): SettingsState {
   switch (action.type) {
     case POLL_INTERVAL_CHANGE:
-      return { ...state, pollInterval: action.value };
+      return {...state, pollInterval: action.value};
+    case TOGGLE_DARK_THEME:
+      return {
+        ...state, isDarkTheme: !state.isDarkTheme
+      }
     default:
       return state;
   }

ui/src/theme.tsx

@@ -1,18 +1,19 @@
-import { createMuiTheme } from "@material-ui/core/styles";
+import { createMuiTheme, Theme } from "@material-ui/core/styles";
 
-// Got color palette from https://htmlcolors.com/palette/31/stripe
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      main: "#4379FF",
+export function makeTheme(isDarkTheme: boolean): Theme {
+  return createMuiTheme({
+    // Got color palette from https://htmlcolors.com/palette/31/stripe
+    palette: {
+      primary: {
+        main: "#4379FF",
+      },
+      secondary: {
+        main: "#97FBD1",
+      },
+      background: {
+        default: "#f5f7f9",
+      },
+      type: isDarkTheme ? "dark" : "light",
     },
-    secondary: {
-      main: "#97FBD1",
-    },
-    background: {
-      default: "#f5f7f9",
-    },
-  },
-});
-
-export default theme;
+  });
+}

ui/src/views/SettingsView.tsx

@@ -5,8 +5,14 @@ import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
-import Slider from "@material-ui/core/Slider/Slider";
-import { pollIntervalChange } from "../actions/settingsActions";
+import Switch from "@material-ui/core/Switch";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormGroup from "@material-ui/core/FormGroup";
+import Slider from "@material-ui/core/Slider";
+import {
+  pollIntervalChange,
+  toggleDarkTheme,
+} from "../actions/settingsActions";
 import { AppState } from "../store";
 
 const useStyles = makeStyles((theme) => ({
@@ -25,10 +31,11 @@ const useStyles = makeStyles((theme) => ({
 function mapStateToProps(state: AppState) {
   return {
     pollInterval: state.settings.pollInterval,
+    isDarkTheme: state.settings.isDarkTheme,
   };
 }
 
-const mapDispatchToProps = { pollIntervalChange };
+const mapDispatchToProps = { pollIntervalChange, toggleDarkTheme };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
@@ -46,6 +53,9 @@ function SettingsView(props: PropsFromRedux) {
     props.pollIntervalChange(val as number);
   };
 
+  const handleThemeChange = (event: React.ChangeEvent<HTMLElement>) => {
+    props.toggleDarkTheme();
+  };
   return (
     <Container maxWidth="lg" className={classes.container}>
       <Grid container spacing={3}>
@@ -75,6 +85,23 @@ function SettingsView(props: PropsFromRedux) {
             />
           </Paper>
         </Grid>
+        <Grid item xs={5}>
+          <Paper>
+            <Typography color="textPrimary">theme switch</Typography>
+            <FormGroup row>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={props.isDarkTheme}
+                    onChange={handleThemeChange}
+                    name="DarkTheme"
+                  />
+                }
+                label="🌛"
+              />
+            </FormGroup>
+          </Paper>
+        </Grid>
       </Grid>
     </Container>
   );