Added dark mode toggle

This commit is contained in:
Liam 2022-10-19 15:53:27 +01:00
parent bb63827e2a
commit a6a7aa00c2
3 changed files with 69 additions and 5 deletions

@ -112,11 +112,14 @@ export default class Home extends Component {
}
render() {
console.log(this.state.steamId);
return this.state.loading ? (
<h1>Loading...</h1>
) : (
<div className={styles.main}>
<NavBar></NavBar>
<NavBar
avatarUrl={`https://cdn.scoresaber.com/avatars/${this.state.steamId}.jpg`}
></NavBar>
<Container
css={{
@ -156,12 +159,16 @@ export default class Home extends Component {
textAlign: "center",
}}
>
<Text h1>BeatSaber Overlay</Text>
<Text h4>Welcome to the Setup panel</Text>
<Text h1 css={{ color: "$text" }}>
BeatSaber Overlay
</Text>
<Text h4 css={{ color: "$text" }}>
Welcome to the Setup panel
</Text>
</div>
</Grid>
<Grid xs={12}>
<Grid xs={12} lg={9}>
<Card>
<Card.Body>
<Spacer y={1} />

@ -1,6 +1,7 @@
import { Navbar, Text } from "@nextui-org/react";
import Settings from "./Settings";
const NavBar = () => {
const NavBar = (props) => {
return (
<Navbar isBordered variant={"sticky"}>
<Navbar.Brand>
@ -8,6 +9,10 @@ const NavBar = () => {
BeatSaber Overlay
</Text>
</Navbar.Brand>
<Navbar.Content>
<Settings {...props}></Settings>
</Navbar.Content>
</Navbar>
);
};

@ -0,0 +1,52 @@
import {
Avatar as NextAvatar,
changeTheme,
Dropdown,
Text,
useTheme,
} from "@nextui-org/react";
const Avatar = (props) => {
const { isDark } = useTheme();
const avatarUrl =
props.avatarUrl || "https://cdn.fascinated.cc/IkQFyodbZv.jpg?raw=true";
const handleChange = () => {
const nextTheme = isDark ? "light" : "dark";
window.localStorage.setItem("theme", nextTheme); // you can use any storage
changeTheme(nextTheme);
};
return (
<>
<Dropdown>
<Dropdown.Trigger>
<NextAvatar
bordered
size="lg"
as="button"
color="primary"
src={avatarUrl}
/>
</Dropdown.Trigger>
<Dropdown.Menu aria-label="Static Actions">
<Dropdown.Item>
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
<Text b onClick={() => handleChange()}>
Toggle Dark Mode
</Text>
</div>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default Avatar;