Fix checkbox on dark mode

src/components/Checkbox/Checkbox.tsx

@@ -31,7 +31,7 @@ const styles = (theme: Theme) =>
       "&$checked": {
         "&:before": {
           background: theme.palette.primary.main,
-          color: theme.palette.common.white,
+          color: theme.palette.background.paper,
           content: '"\\2713"',
           fontWeight: "bold",
           textAlign: "center"
@@ -61,7 +61,7 @@ const styles = (theme: Theme) =>
       },
 
       WebkitAppearance: "none",
-      border: `1px solid ${theme.palette.grey[500]}`,
+      border: `1px solid ${theme.palette.action.active}`,
       boxSizing: "border-box",
       cursor: "pointer",
       height: 14,

src/components/Theme/ThemeProvider.tsx

@@ -12,6 +12,9 @@ const dark: IThemeColors = {
     default: "#1D1E1F",
     paper: "#2E2F31"
   },
+  checkbox: {
+    default: "#FFFFFF"
+  },
   error: "#C22D74",
   font: {
     button: "#202124",
@@ -42,6 +45,9 @@ const light: IThemeColors = {
     default: "#F1F6F6",
     paper: "#FFFFFF"
   },
+  checkbox: {
+    default: "#616161"
+  },
   error: "#C22D74",
   font: {
     button: "#FFFFFF",

src/theme.ts

@@ -16,6 +16,8 @@ export type IThemeColors = Record<
   string
 > & {
   background: Record<"default" | "paper", string>;
+} & {
+  checkbox: Record<"default" | "disabled", string>;
 } & {
   font: Record<"default" | "gray" | "button" | "textButton", string>;
 } & {
@@ -406,6 +408,9 @@ export default (colors: IThemeColors): Theme =>
         hint: colors.font.gray,
         primary: colors.font.default,
         secondary: colors.font.gray
+      },
+      action: {
+        active: colors.checkbox.default
       }
     },
     props: {