change checkbox and switch dark bg

theme/components/Checkbox.ts

@@ -3,17 +3,39 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
+import { runIfFn } from '@chakra-ui/utils';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
+const baseStyleControl = defineStyle((props) => {
+  const { colorScheme: c } = props;
+
+  return {
+    _checked: {
+      bg: mode(`${ c }.500`, `${ c }.300`)(props),
+      borderColor: mode(`${ c }.500`, `${ c }.300`)(props),
+      _hover: {
+        bg: mode(`${ c }.600`, `${ c }.400`)(props),
+        borderColor: mode(`${ c }.600`, `${ c }.400`)(props),
+      },
+    },
+    _indeterminate: {
+      bg: mode(`${ c }.500`, `${ c }.300`)(props),
+      borderColor: mode(`${ c }.500`, `${ c }.300`)(props),
+    },
+  };
+});
+
 const baseStyleLabel = defineStyle({
   _disabled: { opacity: 0.2 },
 });
 
-const baseStyle = definePartsStyle({
+const baseStyle = definePartsStyle((props) => ({
   label: baseStyleLabel,
-});
+  control: runIfFn(baseStyleControl, props),
+}));
 
 const Checkbox = defineMultiStyleConfig({
   baseStyle,

theme/components/Switch.ts

+import { switchAnatomy as parts } from '@chakra-ui/anatomy';
+import { defineStyle, createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleTrack = defineStyle((props) => {
+  const { colorScheme: c } = props;
+
+  return {
+    _checked: {
+      bg: mode(`${ c }.500`, `${ c }.300`)(props),
+      _hover: {
+        bg: mode(`${ c }.600`, `${ c }.400`)(props),
+      },
+    },
+  };
+});
+
+const baseStyle = definePartsStyle((props) => ({
+  track: baseStyleTrack(props),
+}));
+
+const Switch = defineMultiStyleConfig({
+  baseStyle,
+});
+
+export default Switch;

theme/components/index.ts

@@ -13,6 +13,7 @@ import Popover from './Popover';
 import Radio from './Radio';
 import Skeleton from './Skeleton';
 import Spinner from './Spinner';
+import Switch from './Switch';
 import Table from './Table';
 import Tabs from './Tabs';
 import Tag from './Tag';
@@ -36,6 +37,7 @@ const components = {
   Radio,
   Skeleton,
   Spinner,
+  Switch,
   Tabs,
   Table,
   Tag,