implement dark mode for all components

Author: Nur Fikri

components/Button/Button.tsx

@@ -1,69 +1,84 @@
-import React from 'react';
+import React from "react";
 import {
-	ColorValue,
-	TextInput,
-	TextInputProps,
-	TouchableOpacity,
-	View,
-	ViewStyle,
-} from 'react-native';
-import { component, theme } from '../../constants/colors';
-import { Ionicons } from '@expo/vector-icons';
+  ColorValue,
+  TextInput,
+  TextInputProps,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import { component, themeColor } from "../../constants/colors";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../../provider/ThemeProvider";
 
 interface Props {
-	value: boolean;
-	onValueChange?: (newValue: boolean) => void;
-	checkedColor?: ColorValue;
-	uncheckedColor?: ColorValue;
-	inverseColor?: ColorValue;
-	disabled?: boolean;
-	style?: ViewStyle;
-	size?: number;
+  value: boolean;
+  onValueChange?: (newValue: boolean) => void;
+  checkedColor?: ColorValue;
+  uncheckedColor?: ColorValue;
+  inverseColor?: ColorValue;
+  disabled?: boolean;
+  style?: ViewStyle;
+  size?: number;
 }
 
 const Checkbox: React.FC<Props> = ({
-	value = false,
-	onValueChange,
-	checkedColor = component.checkBox.checkedColor,
-	uncheckedColor = component.checkBox.uncheckedColor,
-	inverseColor = theme.white,
-	disabled = false,
-	size = 24,
-	style,
+  value = false,
+  onValueChange,
+  checkedColor,
+  uncheckedColor,
+  inverseColor = themeColor.white,
+  disabled = false,
+  size = 24,
+  style,
 }) => {
-	const handleChange = () => {
-		if (onValueChange) {
-			onValueChange(!value);
-		}
-	};
+  const { theme } = useTheme();
+  const selectedCheckedColor = checkedColor
+    ? checkedColor
+    : component[theme].checkBox.checkedColor;
+  const selectedUncheckedColor = uncheckedColor
+    ? uncheckedColor
+    : component[theme].checkBox.uncheckedColor;
 
-	return (
-		<TouchableOpacity
-			onPress={handleChange}
-			style={{
-				...style,
-				width: size,
-				height: size,
-				alignItems: 'center',
-				justifyContent: 'center',
-				borderRadius: style?.borderRadius || 4,
-				borderColor: value ? checkedColor : uncheckedColor,
-				backgroundColor: disabled
-					? component.checkBox.disabledColor
-					: value
-					? checkedColor
-					: 'transparent',
-				borderWidth: 1,
-			}}
-			disabled={disabled}
-		>
-			<Ionicons
-				name="md-checkmark"
-				size={size - 2}
-				color={disabled ? inverseColor : value ? inverseColor : uncheckedColor}
-			/>
-		</TouchableOpacity>
-	);
+  const handleChange = () => {
+    if (onValueChange) {
+      onValueChange(!value);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleChange}
+      style={{
+        ...style,
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: style?.borderRadius || 4,
+        borderColor: value ? selectedCheckedColor : selectedUncheckedColor,
+        backgroundColor: disabled
+          ? component[theme].checkBox.disabledColor
+          : value
+          ? selectedCheckedColor
+          : "transparent",
+        borderWidth: 1,
+      }}
+      disabled={disabled}
+    >
+      <Ionicons
+        name="md-checkmark"
+        size={size - 2}
+        color={
+          disabled
+            ? inverseColor
+            : value
+            ? inverseColor
+            : selectedUncheckedColor
+        }
+      />
+    </TouchableOpacity>
+  );
 };
 
 export default Checkbox;

components/CheckBox/CheckBox.tsx

@@ -1,30 +1,32 @@
-import React from 'react';
-import { component } from '../../constants/colors';
+import React from "react";
+import { component } from "../../constants/colors";
 import {
-	SafeAreaView,
-	SafeAreaViewProps,
-} from 'react-native-safe-area-context';
+  SafeAreaView,
+  SafeAreaViewProps,
+} from "react-native-safe-area-context";
+import { useTheme } from "../../provider/ThemeProvider";
 
 interface Props extends SafeAreaViewProps {
-	backgroundColor?: string;
+  backgroundColor?: string;
 }
 
 const Layout: React.FC<Props> = (props: Props) => {
-	return (
-		<SafeAreaView
-			{...props}
-			style={[
-				props.style,
-				{
-					flex: 1,
-					backgroundColor:
-						props.backgroundColor || component.layout.backgroundColor,
-				},
-			]}
-		>
-			{props.children}
-		</SafeAreaView>
-	);
+  const { theme } = useTheme();
+  return (
+    <SafeAreaView
+      {...props}
+      style={[
+        props.style,
+        {
+          flex: 1,
+          backgroundColor:
+            props.backgroundColor || component[theme].layout.backgroundColor,
+        },
+      ]}
+    >
+      {props.children}
+    </SafeAreaView>
+  );
 };
 
 export default Layout;