From ded14c737f3cc08588cb875d99469c50588b50ab Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Thu, 29 Dec 2022 18:43:55 +0200
Subject: [PATCH] Basic Color switch - WIP

---
 website/src/components/Header/Header.tsx      |  9 ++++++---
 website/src/components/UI/ColorModeSwitch.tsx | 11 +++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 website/src/components/UI/ColorModeSwitch.tsx

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 (
-    <header className={clsx(!transparent && "bg-white")}>
+    <Box backgroundColor={backgroundColor}>
       <nav>
         <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
@@ -116,9 +118,10 @@ export function Header(props) {
             </Popover>
             <AccountButton />
             <UserMenu />
+            <ColorModeSwitch />
           </div>
         </Container>
       </nav>
-    </header>
+    </Box>
   );
 }
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 <Button onClick={toggleColorMode}>Toggle {colorMode === "light" ? "Dark" : "Light"}</Button>;
+};
+
+export default ColorModeSwitch;