add color mode switcher

chakra/components/switch.tsx

+import { Switch as ChakraSwitch } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface SwitchProps extends ChakraSwitch.RootProps {
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
+  trackLabel?: { on: React.ReactNode; off: React.ReactNode };
+  thumbLabel?: { on: React.ReactNode; off: React.ReactNode };
+}
+
+export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  function Switch(props, ref) {
+    const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } =
+      props;
+
+    return (
+      <ChakraSwitch.Root ref={ rootRef } { ...rest }>
+        <ChakraSwitch.HiddenInput ref={ ref } { ...inputProps }/>
+        <ChakraSwitch.Control>
+          <ChakraSwitch.Thumb>
+            { thumbLabel && (
+              <ChakraSwitch.ThumbIndicator fallback={ thumbLabel?.off }>
+                { thumbLabel?.on }
+              </ChakraSwitch.ThumbIndicator>
+            ) }
+          </ChakraSwitch.Thumb>
+          { trackLabel && (
+            <ChakraSwitch.Indicator fallback={ trackLabel.off }>
+              { trackLabel.on }
+            </ChakraSwitch.Indicator>
+          ) }
+        </ChakraSwitch.Control>
+        { children != null && (
+          <ChakraSwitch.Label>{ children }</ChakraSwitch.Label>
+        ) }
+      </ChakraSwitch.Root>
+    );
+  },
+);

chakra/theme/foundations/semanticTokens.ts

@@ -27,6 +27,18 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         },
       },
     },
+    globals: {
+      body: {
+        bg: {
+          DEFAULT: { value: { base: '{colors.white}', _dark: '{colors.black}' } },
+        },
+      },
+      mark: {
+        bg: {
+          DEFAULT: { value: { base: '{colors.green.100}', _dark: '{colors.green.800}' } },
+        },
+      },
+    },
 
     // OLD TOKENS
     divider: {

chakra/theme/globalCss.ts

 import type { StyleFunctionProps, SystemStyleObject } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
-import scrollbar from './foundations/scrollbar';
+// TODO @tom2drum check address highlight feature
 import addressEntity from './globals/address-entity';
 import recaptcha from './globals/recaptcha';
-// import getDefaultTransitionProps from './utils/getDefaultTransitionProps';
+// TODO @tom2drum check custom scrollbar colors
+import scrollbar from './globals/scrollbar';
 
 const globalCss: Record<string, SystemStyleObject> = {
   body: {
-    // bg: mode('white', 'black')(props),
-    // ...getDefaultTransitionProps(),
+    bg: 'globals.body.bg',
     '-webkit-tap-highlight-color': 'transparent',
     'font-variant-ligatures': 'no-contextual',
   },
   mark: {
-    // bgColor: mode('green.100', 'green.800')(props),
+    bg: 'globals.mark.bg',
     color: 'inherit',
   },
   'svg *::selection': {

pages/chakra.tsx

 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-import Chakra from 'ui/pages/Chakra';
+const Chakra = dynamic(() => import('ui/pages/Chakra'), { ssr: false });
 
 const Page: NextPage = () => {
   return (

ui/pages/Chakra.tsx

@@ -2,12 +2,19 @@ import { Heading, HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { Button } from 'chakra/components/button';
+import { useColorMode } from 'chakra/components/color-mode';
+import { Switch } from 'chakra/components/switch';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const ChakraShowcases = () => {
+  const colorMode = useColorMode();
+
   return (
     <>
       <PageTitle title="Chakra UI Showcase"/>
+      <Switch onCheckedChange={ colorMode.toggleColorMode } checked={ colorMode.colorMode === 'dark' } mb={ 4 }>
+        Color mode: { colorMode.colorMode }
+      </Switch>
       <Heading textStyle="heading.md" mb={ 4 }>Buttons</Heading>
       <HStack gap={ 4 }>
         <Button>Solid</Button>