Wrote color values component.

src/providers/MediaQueryProvider.tsx

@@ -14,11 +14,11 @@ interface MediaQueryContextType {
   isMobilePortrait: boolean;
 }
 
-const MediaQueryContext = createContext<MediaQueryContextType | undefined>(
-  undefined,
-);
+export const MediaQueryContext = createContext<
+  MediaQueryContextType | undefined
+>(undefined);
 
-function MediaQueryProvider({ children }: { children: ReactNode }) {
+export const MediaQueryProvider = ({ children }: { children: ReactNode }) => {
   const [viewportMode, setViewportMode] = useState<ViewportMode>(
     ViewportMode.DESKTOP,
   );
@@ -71,7 +71,4 @@ function MediaQueryProvider({ children }: { children: ReactNode }) {
       {children}
     </MediaQueryContext.Provider>
   );
-}
-
-export default MediaQueryProvider;
-export { MediaQueryContext };
+};

src/providers/hooks.ts

@@ -1,8 +1,9 @@
 import { useContext } from "react";
 
 import { MediaQueryContext } from "./MediaQueryProvider";
+import { SelectedColorContext } from "./SelectedColorProvider";
 
-function useMediaQuery() {
+export function useMediaQuery() {
   const context = useContext(MediaQueryContext);
   if (context === undefined) {
     throw new Error("useMediaQuery must be used within a MediaQueryProvider");
@@ -10,4 +11,10 @@ function useMediaQuery() {
   return context;
 }
 
-export { useMediaQuery };
+export function useSelectedColor() {
+  const context = useContext(SelectedColorContext);
+  if (!context) {
+    throw new Error("useColor must be used within a ColorProvider");
+  }
+  return context;
+}

src/providers/index.ts

@@ -1,3 +1,4 @@
-import MediaQueryProvider from "./MediaQueryProvider";
+import { MediaQueryProvider } from "./MediaQueryProvider";
+import { SelectedColorProvider } from "./SelectedColorProvider";
 
-export { MediaQueryProvider };
+export { MediaQueryProvider, SelectedColorProvider };