Added dark mode toggle

pages/index.js

@@ -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 h1 css={{ color: "$text" }}>
-								<Text h4>Welcome to the Setup panel</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} />

src/components/Navbar.js

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

src/components/Settings.js

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