From fe4014c03c2beda235e7d85e84f450ec5db46950 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 15 Nov 2022 18:00:50 -0800
Subject: [PATCH] enable light/dark mode toggle button

---
 src/components/UI/Header.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 47c92d811c..e0e435f266 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Input, InputGroup, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
 import { FC } from 'react';
 import NextLink from 'next/link';
 
@@ -6,6 +6,7 @@ import { HamburgerIcon, LensIcon, MoonIcon } from '../UI/icons';
 import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants';
 
 export const Header: FC = () => {
+  const { toggleColorMode } = useColorMode();
   return (
     <Flex
       mb={4}
@@ -100,9 +101,11 @@ export const Header: FC = () => {
 
         {/* DARK MODE SWITCH */}
         <Box
+          as='button'
           p={4}
           borderRight={{ base: '2px', md: 'none' }}
           borderColor='primary'
+          onClick={toggleColorMode}
         >
           <MoonIcon color="primary" />
         </Box>