From 14b41b4a2d8c341886a0fab067b40dc2dcd42b0b Mon Sep 17 00:00:00 2001
From: Theodor Peifer <teddypeifer@gmail.com>
Date: Sun, 5 Feb 2023 15:34:47 +0100
Subject: [PATCH] Putting a button for toggling the light/dark color mode right
 into the navigation bar (#1122)

* added button for toggling color mode in nav bar

* removed border from color-theme toggle button

* removed padding around sun icon and made header title slighty responsive

* lower gap between navigation buttons for mobile
---
 website/src/components/Header/ColorModeToggler.jsx | 14 ++++++++++++++
 website/src/components/Header/Header.tsx           |  7 ++++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 website/src/components/Header/ColorModeToggler.jsx

diff --git a/website/src/components/Header/ColorModeToggler.jsx b/website/src/components/Header/ColorModeToggler.jsx
new file mode 100644
index 00000000..69ede901
--- /dev/null
+++ b/website/src/components/Header/ColorModeToggler.jsx
@@ -0,0 +1,14 @@
+import { Button, useColorMode } from "@chakra-ui/react";
+import { Sun } from "lucide-react";
+
+const ColorModeToggler = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <Button size="md" p="0px" justifyContent="center" onClick={toggleColorMode} gap="4" variant="ghost">
+      <Sun size={"1.5em"} />
+    </Button>
+  );
+};
+
+export { ColorModeToggler };
diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index 0d70a442..c1c88655 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -6,7 +6,7 @@ import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { Flags } from "react-feature-flags";
 import { LanguageSelector } from "src/components/LanguageSelector";
-
+import { ColorModeToggler } from "./ColorModeToggler";
 import { UserMenu } from "./UserMenu";
 
 function AccountButton() {
@@ -36,19 +36,20 @@ export function Header() {
         <Link href={homeURL} aria-label="Home">
           <Flex alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
-            <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
+            <Text fontFamily="inter" fontSize={["lg", "2xl"]} fontWeight="bold" ml="3">
               {t("title")}
             </Text>
           </Flex>
         </Link>
 
-        <Flex alignItems="center" gap="4">
+        <Flex alignItems="center" gap={["2", "4"]}>
           <Flags authorizedFlags={["flagTest"]}>
             <Text>FlagTest</Text>
           </Flags>
           <LanguageSelector />
           <AccountButton />
           <UserMenu />
+          <ColorModeToggler />
         </Flex>
       </Box>
     </nav>