i am stupid

ui/header/ColorModeToggler.module.css

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

ui/header/ColorModeToggler.tsx

@@ -27,14 +27,14 @@ export interface ColorModeTogglerProps
 
 export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) => {
   const ownProps = omitThemingProps(props);
-  const { toggleColorMode } = useColorMode();
+  const { toggleColorMode, colorMode } = useColorMode();
 
   const {
     state,
     getInputProps,
     getCheckboxProps,
     getRootProps,
-  } = useCheckbox(ownProps);
+  } = useCheckbox({ ...ownProps, isChecked: colorMode === 'light' });
 
   const trackBg = useColorModeValue('blackAlpha.100', 'whiteAlpha.200')
   const thumbBg = useColorModeValue('white', 'black')