theme select in settings

webUI/react/src/App.tsx

@@ -58,9 +58,7 @@ export default function App() {
             <ThemeProvider theme={theme}>
                 <NavBarTitle.Provider value={navTitleContext}>
                     <CssBaseline />
-                    <DarkTheme.Provider value={darkThemeContext}>
                     <NavBar />
-                    </DarkTheme.Provider>
                     <Container maxWidth={false} disableGutters>
                         <Switch>
                             <Route path="/sources/:sourceId/search/">
@@ -91,7 +89,9 @@ export default function App() {
                                 <Categories />
                             </Route>
                             <Route path="/settings">
+                                <DarkTheme.Provider value={darkThemeContext}>
                                     <Settings />
+                                </DarkTheme.Provider>
                             </Route>
                             <Route
                                 exact

webUI/react/src/components/NavBar.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// TODO: remove above!
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
@@ -45,7 +47,7 @@ export default function NavBar() {
     const { title } = useContext(NavBarTitle);
     const open = Boolean(anchorEl);
 
-    const { darkTheme, setDarkTheme } = useContext(DarkTheme);
+    const { darkTheme } = useContext(DarkTheme);
 
     const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorEl(event.currentTarget);
@@ -80,7 +82,7 @@ export default function NavBar() {
                     >
                         <MoreIcon />
                     </IconButton>
-                    <Menu
+                    {/* <Menu
                         id="menu-appbar"
                         anchorEl={anchorEl}
                         anchorOrigin={{
@@ -107,7 +109,7 @@ export default function NavBar() {
                             Light Theme
 
                         </MenuItem>
-                    </Menu>
+                    </Menu> */}
                 </Toolbar>
             </AppBar>
             <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />

webUI/react/src/screens/Settings.tsx

@@ -8,7 +8,10 @@ import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/Inbox';
+import Brightness6Icon from '@material-ui/icons/Brightness6';
+import { ListItemSecondaryAction, Switch } from '@material-ui/core';
 import NavBarTitle from '../context/NavbarTitle';
+import DarkTheme from '../context/DarkTheme';
 
 function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
     // eslint-disable-next-line react/jsx-props-no-spreading
@@ -18,6 +21,7 @@ function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
 export default function Settings() {
     const { setTitle } = useContext(NavBarTitle);
     setTitle('Settings');
+    const { darkTheme, setDarkTheme } = useContext(DarkTheme);
 
     return (
         <div>
@@ -28,6 +32,19 @@ export default function Settings() {
                     </ListItemIcon>
                     <ListItemText primary="Categories" />
                 </ListItemLink>
+                <ListItem>
+                    <ListItemIcon>
+                        <Brightness6Icon />
+                    </ListItemIcon>
+                    <ListItemText primary="Dark Theme" />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={darkTheme}
+                            onChange={() => setDarkTheme(!darkTheme)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
             </List>
         </div>
     );