Make color scheme value required prop

Author: dgca

packages/mobile-app/app/_layout.tsx

@@ -46,7 +46,7 @@ export default function Layout() {
   const scheme = useColorScheme();
   return (
     <ThemeProvider value={scheme === "dark" ? DarkTheme : DefaultTheme}>
-      <ColorScheme scheme={scheme === "dark" ? "_dark" : "_light"}>
+      <ColorScheme value={scheme === "dark" ? "_dark" : "_light"}>
         <QueryClientProvider client={queryClient}>
           <FacadeProvider>
             <DatabaseLoader loading={<Text>Loading databases...</Text>}>

packages/tackle-box/.storybook/preview.tsx

@@ -15,7 +15,7 @@ const preview: Preview = {
     (Story, { context }) => {
       const isDarkMode = context.globals?.backgrounds?.value === "#333333";
       return (
-        <ColorScheme scheme={isDarkMode ? "_dark" : "_light"}>
+        <ColorScheme value={isDarkMode ? "_dark" : "_light"}>
           <Story />
         </ColorScheme>
       );

packages/tackle-box/src/components/Button/Button.tsx

@@ -37,7 +37,7 @@ export function Button({
     onPressOut,
   });
 
-  const { colorScheme } = useColorScheme();
+  const colorScheme = useColorScheme();
 
   return (
     <Pressable

packages/tackle-box/src/components/ColorScheme/ColorScheme.tsx

@@ -1,36 +1,17 @@
-import React, {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useState,
-} from "react";
+import React, { createContext, ReactNode, useContext } from "react";
 
 type Scheme = "_light" | "_dark";
 
-const ColorSchemeContext = createContext<{
-  colorScheme: Scheme;
-  toggleColorScheme?: () => void;
-}>({
-  colorScheme: "_light",
-  toggleColorScheme: () => {},
-});
+const ColorSchemeContext = createContext<Scheme>("_light");
 
 type Props = {
   children: ReactNode;
-  scheme?: Scheme;
+  value?: Scheme;
 };
 
-export function ColorScheme({ children, scheme }: Props) {
-  const [globalScheme, setGlobalScheme] = useState<Scheme>("_light");
-  const toggleColorScheme = useCallback(() => {
-    setGlobalScheme((prev) => (prev === "_light" ? "_dark" : "_light"));
-  }, []);
-
+export function ColorScheme({ children, value }: Props) {
   return (
-    <ColorSchemeContext.Provider
-      value={{ colorScheme: scheme ?? globalScheme, toggleColorScheme }}
-    >
+    <ColorSchemeContext.Provider value={value ?? "_light"}>
       {children}
     </ColorSchemeContext.Provider>
   );