DarkTheme! my eyes can rest now :)

webUI/react/src/App.tsx

@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import {
     BrowserRouter as Router, Route, Switch,
 } from 'react-router-dom';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+
 import NavBar from './components/NavBar';
 import Home from './screens/Home';
 import Sources from './screens/Sources';
@@ -11,43 +14,61 @@ import Manga from './screens/Manga';
 import Reader from './screens/Reader';
 import Search from './screens/SearchSingle';
 import NavBarTitle from './context/NavbarTitle';
+import DarkTheme from './context/DarkTheme';
 
 export default function App() {
     const [title, setTitle] = useState<string>('Tachidesk');
-    const contextValue = { title, setTitle };
+    const [darkTheme, setDarkTheme] = useState<boolean>(true);
+    const navTitleContext = { title, setTitle };
+    const darkThemeContext = { darkTheme, setDarkTheme };
+
+    const theme = React.useMemo(
+        () => createMuiTheme({
+            palette: {
+                type: darkTheme ? 'dark' : 'light',
+            },
+        }),
+        [darkTheme],
+    );
 
     return (
         <Router>
-            <NavBarTitle.Provider value={contextValue}>
-                <NavBar />
 
-                <Switch>
+            <ThemeProvider theme={theme}>
-                    <Route path="/sources/:sourceId/search/">
+                <NavBarTitle.Provider value={navTitleContext}>
-                        <Search />
+                    <CssBaseline />
-                    </Route>
+                    <DarkTheme.Provider value={darkThemeContext}>
-                    <Route path="/extensions">
+                        <NavBar />
-                        <Extensions />
+                    </DarkTheme.Provider>
-                    </Route>
+
-                    <Route path="/sources/:sourceId/popular/">
+                    <Switch>
-                        <MangaList popular />
+                        <Route path="/sources/:sourceId/search/">
-                    </Route>
+                            <Search />
-                    <Route path="/sources/:sourceId/latest/">
+                        </Route>
-                        <MangaList popular={false} />
+                        <Route path="/extensions">
-                    </Route>
+                            <Extensions />
-                    <Route path="/sources">
+                        </Route>
-                        <Sources />
+                        <Route path="/sources/:sourceId/popular/">
-                    </Route>
+                            <MangaList popular />
-                    <Route path="/manga/:mangaId/chapter/:chapterId">
+                        </Route>
-                        <Reader />
+                        <Route path="/sources/:sourceId/latest/">
-                    </Route>
+                            <MangaList popular={false} />
-                    <Route path="/manga/:id">
+                        </Route>
-                        <Manga />
+                        <Route path="/sources">
-                    </Route>
+                            <Sources />
-                    <Route path="/">
+                        </Route>
-                        <Home />
+                        <Route path="/manga/:mangaId/chapter/:chapterId">
-                    </Route>
+                            <Reader />
-                </Switch>
+                        </Route>
-            </NavBarTitle.Provider>
+                        <Route path="/manga/:id">
+                            <Manga />
+                        </Route>
+                        <Route path="/">
+                            <Home />
+                        </Route>
+                    </Switch>
+                </NavBarTitle.Provider>
+            </ThemeProvider>
         </Router>
     );
 }

webUI/react/src/components/NavBar.tsx

@@ -1,12 +1,17 @@
 import React, { useContext, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import MoreIcon from '@material-ui/icons/MoreVert';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+
 import TemporaryDrawer from './TemporaryDrawer';
 import NavBarTitle from '../context/NavbarTitle';
+import DarkTheme from '../context/DarkTheme';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -20,14 +25,35 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
+// const theme = createMuiTheme({
+//     overrides: {
+//         MuiAppBar: {
+//             colorPrimary: { backgroundColor: '#FFC0CB' },
+//         },
+//     },
+//     palette: { type: 'dark' },
+// });
+
 export default function NavBar() {
     const classes = useStyles();
     const [drawerOpen, setDrawerOpen] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const { title } = useContext(NavBarTitle);
+    const open = Boolean(anchorEl);
+
+    const { setDarkTheme } = useContext(DarkTheme);
+
+    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
 
     return (
         <div className={classes.root}>
-            <AppBar position="static">
+            <AppBar position="static" color="default">
                 <Toolbar>
                     <IconButton
                         edge="start"
@@ -42,6 +68,32 @@ export default function NavBar() {
                     <Typography variant="h6" className={classes.title}>
                         {title}
                     </Typography>
+                    <IconButton
+                        onClick={handleMenu}
+                        aria-label="display more actions"
+                        edge="end"
+                        color="inherit"
+                    >
+                        <MoreIcon />
+                    </IconButton>
+                    <Menu
+                        id="menu-appbar"
+                        anchorEl={anchorEl}
+                        anchorOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }}
+                        keepMounted
+                        transformOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }}
+                        open={open}
+                        onClose={handleClose}
+                    >
+                        <MenuItem onClick={() => setDarkTheme(true)}>Dark Theme</MenuItem>
+                        <MenuItem onClick={() => setDarkTheme(false)}>Light Theme</MenuItem>
+                    </Menu>
                 </Toolbar>
             </AppBar>
             <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />

webUI/react/src/context/DarkTheme.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type ContextType = {
+    darkTheme: boolean
+    setDarkTheme: React.Dispatch<React.SetStateAction<boolean>>
+};
+
+const DarkTheme = React.createContext<ContextType>({
+    darkTheme: true,
+    setDarkTheme: ():void => {},
+});
+
+export default DarkTheme;