progress dark mode

Author: codingki

constants/componentColors.ts

@@ -11,6 +11,7 @@ export default {
 	button: {
 		disabledColor: '#d8d8d8',
 		disabledTextColor: theme.gray100,
+		inverseColor: theme.white,
 	},
 	textInput: {
 		backgroundColor: theme.white,
@@ -31,4 +32,71 @@ export default {
 		closeIconColor: theme.danger,
 		selectionBackgroundColor: theme.white,
 	},
+	light: {
+		layout: {
+			backgroundColor: theme.white100,
+		},
+		topNav: {
+			backgroundColor: theme.white,
+			borderColor: '#c0c0c0',
+			color: theme.black,
+		},
+		button: {
+			disabledColor: '#d8d8d8',
+			disabledTextColor: theme.gray100,
+			inverseColor: theme.white,
+		},
+		textInput: {
+			backgroundColor: theme.white,
+			borderColor: '#d8d8d8',
+			onFocusborderColor: '#c0c0c0',
+		},
+		checkBox: {
+			checkedColor: theme.primary,
+			uncheckedColor: '#d8d8d8',
+			disabledColor: '#d8d8d8',
+		},
+		picker: {
+			backgroundColor: theme.white,
+			borderColor: '#d8d8d8',
+			iconColor: theme.gray300,
+			placeholderColor: theme.gray300,
+			labelColor: theme.black,
+			closeIconColor: theme.danger,
+			selectionBackgroundColor: theme.white,
+		},
+	},
+	dark: {
+		layout: {
+			backgroundColor: '#181A20',
+		},
+		topNav: {
+			backgroundColor: '#262A34',
+			borderColor: '#2B2D34',
+			color: theme.white,
+		},
+		button: {
+			disabledColor: '#d8d8d8',
+			disabledTextColor: theme.gray100,
+		},
+		textInput: {
+			backgroundColor: theme.white,
+			borderColor: '#d8d8d8',
+			onFocusborderColor: '#c0c0c0',
+		},
+		checkBox: {
+			checkedColor: theme.primary,
+			uncheckedColor: '#d8d8d8',
+			disabledColor: '#d8d8d8',
+		},
+		picker: {
+			backgroundColor: theme.white,
+			borderColor: '#d8d8d8',
+			iconColor: theme.gray300,
+			placeholderColor: theme.gray300,
+			labelColor: theme.black,
+			closeIconColor: theme.danger,
+			selectionBackgroundColor: theme.white,
+		},
+	},
 };

provider/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import  useCachedResources from '../hooks/useCachedResources';
+
+type ContextProps = {
+	theme: 'light' | 'dark';
+	setTheme: (val: 'light' | 'dark') => void;
+};
+
+const ThemeContext = React.createContext<ContextProps>({
+	theme: 'light',
+	setTheme: (theme) => console.warn('no theme provider'),
+});
+
+const useTheme = () => React.useContext(ThemeContext);
+
+const ThemeProvider: React.FC = (props) => {
+	const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
+	const isLoadingComplete = useCachedResources();
+
+	return (
+		<ThemeContext.Provider value={{ theme: theme, setTheme }}>
+			{!isLoadingComplete ? null : props.children}
+		</ThemeContext.Provider>
+	);
+};
+
+export { ThemeProvider, ThemeContext, useTheme, ContextProps };