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

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

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>