theme select in settings

This commit is contained in:
Aria Moradi 2021-02-20 02:57:52 +03:30
parent 9a282c3bf4
commit 18b6168cd1
3 changed files with 26 additions and 7 deletions

View File

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

View File

@ -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} />

View File

@ -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>
);