title: How to toggle color mode change on a Switch Chakra UI component?
body: <p>I'm trying to toggle different color modes with a <code>&lt;Switch onChange={toggleColorMode}&gt;</code>. However, it's not really changing colors after the switch component changes state. I'm new to using Chakra UI for react, and I followed the instructions in the docs for Color Mode <a href="https://chakra-ui.com/docs/features/color-mode" rel="nofollow noreferrer">https://chakra-ui.com/docs/features/color-mode</a>.</p>
  <p>I updated my theme config and I passed the <code>customTheme</code> to ChakraProvider component in main App component.</p>
  <pre><code>
  
  import { extendTheme,ThemeConfig } from &quot;@chakra-ui/react&quot;;
  
  const config : ThemeConfig = {
      initialColorMode:&quot;light&quot;,
      useSystemColorMode:true,
  }
  const customTheme = extendTheme({
      fonts:{
          heading:&quot;Spartan&quot;,
      },
      config
  })
  
  
  export default customTheme;
  </code></pre>
  <pre><code>import * as React from &quot;react&quot;
  import {
    ChakraProvider,
    Box,
    Text,
    FormControl,
    FormLabel,
    Switch,
    useColorMode,
    useColorModeValue
  } from &quot;@chakra-ui/react&quot;
  import &quot;@fontsource/spartan/700.css&quot;
  import customTheme from &quot;./theme&quot;
  
  
  // First Theme
  const darkSaturatedBlue = {
    // main background
    mainBackgroundColor:&quot;hsl(222, 26%, 31%)&quot;,
    // toggle background, keypad background
    toggleKeybadBackgroundColor:&quot;hsl(223, 31%, 20%)&quot;,
    // screen background
    screenBackgroundColor:&quot;hsl(224, 36%, 15%)&quot;,
    // Button digit colors
    buttonDigitColor:&quot;hsl(221, 14%, 31%)&quot;,
  }
  
  
  export default function App(){
    const {toggleColorMode} = useColorMode();
  
    const bg = useColorModeValue(&quot;red.500&quot;,darkSaturatedBlue.mainBackgroundColor);
    const color = useColorModeValue(&quot;white&quot;,&quot;gray.800&quot;);
  
    
    return (
      &lt;ChakraProvider theme={customTheme}&gt;
      &lt;Box bg={bg} h=&quot;100vh&quot; w=&quot;100vw&quot; color={color}&gt;
        &lt;Box mx=&quot;auto&quot; w={[&quot;100%&quot;,375]}&gt;
          {/* Main App Container */}
          .......
                 &lt;Box&gt;
                  &lt;FormControl display=&quot;flex&quot; alignItems=&quot;center&quot;&gt;
                        &lt;FormLabel htmlFor=&quot;theme-switch&quot; mb=&quot;0&quot; fontSize=&quot;9&quot;&gt;
                          THEME
                        &lt;/FormLabel&gt;
                        &lt;Switch id=&quot;theme-switch&quot; size=&quot;sm&quot; onChange={toggleColorMode} /&gt;
                  &lt;/FormControl&gt;
                &lt;/Box&gt;
         ......
        &lt;/Box&gt;
      &lt;/Box&gt;
    &lt;/ChakraProvider&gt;
    );
  }
  
  </code></pre>
  <p>The colors used are an example I set out initially to test the waters. Is there something I'm missing here?</p>