update moon icon and active state of thumb

icons/moon.svg

+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.557 7.712a.75.75 0 0 1 .442.729A7.983 7.983 0 1 1 7.526 0a.75.75 0 0 1 .548 1.308l-.18.161a4.675 4.675 0 0 0 6.619 6.603l.207-.207a.75.75 0 0 1 .837-.154Zm-1.446 2.504a6.176 6.176 0 0 1-8.373-8.311 6.481 6.481 0 0 0-2.282 10.657 6.482 6.482 0 0 0 10.655-2.346Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

ui/header/ColorModeToggler.module.css

@@ -35,11 +35,11 @@
     height: 24px;
     border-radius: 12px;
     position: absolute;
-    transform: translate(4px, 4px);
+    transform: translate(44px, 4px);
 }
 
 .thumb[data-checked] {
-    transform: translate(44px, 4px);
+    transform: translate(4px, 4px);
 }
 
 .nightIcon {

ui/header/ColorModeToggler.tsx

@@ -12,9 +12,10 @@ import {
 } from '@chakra-ui/system'
 import { dataAttr, __DEV__ } from '@chakra-ui/utils'
 import * as React from 'react'
-import { SunIcon, MoonIcon } from '@chakra-ui/icons'
-import { useColorMode, useColorModeValue } from '@chakra-ui/react';
+import { SunIcon } from '@chakra-ui/icons'
+import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
 import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
+import moonIcon from '../../icons/moon.svg';
 
 import styles from './ColorModeToggler.module.css';
 
@@ -63,9 +64,10 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
         className={ styles.track }
         __css={ trackStyles }
       >
-        <MoonIcon
+        <Icon
           className={ styles.nightIcon }
           boxSize={ 4 }
+          as={ moonIcon }
           color={ useColorModeValue('blue.600', 'white') }
           { ...transitionProps }
         />