diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx index 5d703096..b882fdaf 100644 --- a/website/src/components/Header/Header.tsx +++ b/website/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import { Button } from "@chakra-ui/react"; +import { Box, Button, Text, useColorModeValue } from "@chakra-ui/react"; import { Popover } from "@headlessui/react"; import { AnimatePresence, motion } from "framer-motion"; import Image from "next/image"; @@ -10,6 +10,7 @@ import clsx from "clsx"; import { Container } from "src/components/Container"; import { NavLinks } from "./NavLinks"; import { UserMenu } from "./UserMenu"; +import ColorModeSwitch from "../UI/ColorModeSwitch"; function MenuIcon(props) { return ( @@ -56,8 +57,9 @@ function AccountButton() { export function Header(props) { const transparent = props.transparent ?? false; + const backgroundColor = useColorModeValue('#FFFFFF', '#000000') return ( - + @@ -116,9 +118,10 @@ export function Header(props) { + - + ); } diff --git a/website/src/components/UI/ColorModeSwitch.tsx b/website/src/components/UI/ColorModeSwitch.tsx new file mode 100644 index 00000000..ed309328 --- /dev/null +++ b/website/src/components/UI/ColorModeSwitch.tsx @@ -0,0 +1,11 @@ +import { Button, useColorMode } from "@chakra-ui/react"; +import React from "react"; + +type Props = {}; + +const ColorModeSwitch = (props: Props) => { + const { colorMode, toggleColorMode } = useColorMode(); + return Toggle {colorMode === "light" ? "Dark" : "Light"}; +}; + +export default ColorModeSwitch;