Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2024-12-25 16:21:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

theme select in settings

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webUI/react/src/App.tsx
View File

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

8
webUI/react/src/components/NavBar.tsx
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 /* 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 * 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/. */ * 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 { title } = useContext(NavBarTitle);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const { darkTheme, setDarkTheme } = useContext(DarkTheme); const { darkTheme } = useContext(DarkTheme);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => { const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
@ -80,7 +82,7 @@ export default function NavBar() {
> >
<MoreIcon /> <MoreIcon />
</IconButton> </IconButton>
<Menu {/* <Menu
id="menu-appbar" id="menu-appbar"
anchorEl={anchorEl} anchorEl={anchorEl}
anchorOrigin={{ anchorOrigin={{
@ -107,7 +109,7 @@ export default function NavBar() {
Light Theme Light Theme
</MenuItem> </MenuItem>
</Menu> </Menu> */}
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />

17
webUI/react/src/screens/Settings.tsx
View File

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