vdb-ai-chat 1.0.6 → 1.0.8

package/src/contexts/ThemeProvider.tsx

@@ -0,0 +1,87 @@
+import { Platform } from "react-native";
+import React from "react";
+import {
+  DefaultTheme,
+  ThemeProvider as OriginalThemeProvider,
+} from "styled-components/native";
+import { useMediaQuery } from "react-responsive";
+import { DEFAULT_THEME } from "./utils";
+import { DEVICE_SIZE, isIpad } from "../components/utils";
+import { useMemo, useState, useEffect } from "react";
+import { Storage } from "../storage";
+
+// Conditionally import expo-device only on native platforms
+let Device: { osName?: string } | null = null;
+if (Platform.OS !== "web") {
+  try {
+    Device = require("expo-device");
+  } catch {
+    // expo-device not installed
+  }
+}
+
+interface Props {
+  children?: React.ReactElement;
+}
+
+const ThemeProvider = ({ children }: Props) => {
+  const [theme, setTheme] = useState<Record<string, any>>(DEFAULT_THEME);
+
+  useEffect(() => {
+    const loadTheme = async () => {
+      try {
+        const rootState = JSON.parse(
+          (await Storage.getItem("persist:root")) || "{}"
+        );
+        const userTheme = rootState.theme ? JSON.parse(rootState.theme) : null;
+        if (userTheme) {
+          setTheme(userTheme);
+        }
+      } catch {
+        // Keep default theme on error
+      }
+    };
+    loadTheme();
+  }, []);
+
+  if (Platform.OS === "web") {
+    const mediaQuery = window.matchMedia("print");
+    if (mediaQuery.matches) {
+      return null;
+    }
+  }
+
+  const mobileQuery = useMediaQuery({ maxWidth: 767 });
+  const tabletQuery = useMediaQuery({ minWidth: 767, maxWidth: 1279 });
+  const desktopQuery = useMediaQuery({ minWidth: 1279 });
+
+  const { width } = DEVICE_SIZE;
+  const isMobile = mobileQuery || width <= 767;
+  const isTablet =
+    tabletQuery ||
+    (width > 767 && width <= 1279) ||
+    (Device?.osName === "iPadOS") ||
+    isIpad();
+  const isDesktop =
+    (desktopQuery || width > 1279) &&
+    !(Device?.osName === "iPadOS" || isIpad());
+  const isLargeScreen = isDesktop && !isTablet && !isMobile;
+
+  const media = {
+    isMobile,
+    isTablet,
+    isDesktop,
+    isLargeScreen,
+  };
+
+  const mediaTheme = useMemo(
+    () => ({ ...theme, ...media } as DefaultTheme),
+    [theme, isMobile, isTablet, isDesktop, isLargeScreen]
+  );
+
+  return (
+    <OriginalThemeProvider theme={mediaTheme}>{children}</OriginalThemeProvider>
+  );
+};
+
+export default ThemeProvider;

package/src/contexts/utils.ts

@@ -0,0 +1,135 @@
+export const DEFAULT_THEME = {
+  transparent: "transparent",
+  "main-01": "#292735",
+  "main-02": "#37363F",
+  "main-03": "#E3E3E9",
+  "main-04": "#3378F6",
+  "main-05": "#ffffff",
+  "main-06": "#292735",
+  "diam-01": "#804195",
+  "diam-02": "#713782",
+  "diam-03": "#EEE1F3",
+  "diam-04": "#9138AE",
+  "diam-05": "#ffffff",
+  "diam-06": "#9138AE",
+  "core-01": "#ffffff",
+  "core-02": "#EDEDF2",
+  "core-03": "#D5D5DC",
+  "core-04": "#ACACB3",
+  "core-05": "#020001",
+  "core-06": "#4F4E57",
+  "extra-01": "#A1A0AB",
+  "extra-02": "#292735",
+  "extra-03": "#E4E4EC",
+  "extra-04": "#DADAE0",
+  "extra-05": "#ffffff",
+  "extra-06": "#4F4E57",
+  "gem-01": "#3B72CC",
+  "gem-02": "#3C62A0",
+  "gem-03": "#DCE6F6",
+  "gem-04": "#3E76D2",
+  "gem-05": "#ffffff",
+  "gem-06": "#3E76D2",
+  "jewelry-01": "#58B8A5",
+  "jewelry-02": "#4CA191",
+  "jewelry-03": "#D6F1ED",
+  "jewelry-04": "#27AC92",
+  "jewelry-05": "#ffffff",
+  "jewelry-06": "#27AC92",
+  "lab-01": "#E97F5B",
+  "lab-02": "#DA704B",
+  "lab-03": "#F9E2D9",
+  "lab-04": "#E87B56",
+  "lab-05": "#ffffff",
+  "lab-06": "#E87B56",
+  "over-01": "#000000b3",
+  "over-02": "rgba(55,54,64,0.3)",
+  "over-03": "rgba(255,255,255,0.7)",
+  "over-04": "#ffffff",
+  "cont-00": "#ffffff",
+  "success-02": "#DBFFE4",
+  "success-01": "#00B140",
+  "error-02": "#FFE2E0",
+  "error-01": "#D0021B",
+  "warn-02": "#FFF8DB",
+  "warn-01": "#FFA500",
+  "primary-bg-static": "#292735",
+  "primary-bg-hover": "#37363F",
+  "primary-bg-disabled": "#D5D5DC",
+  "primary-cont": "#ffffff",
+  "primary-cont-disabled": "#ACACB3",
+  "secondary-bor-disabled": "#D5D5DC",
+  "secondary-cont-disabled": "#ACACB3",
+  "secondary-bg-hover": "#E3E3E9",
+  "secondary-bor-hover": "#37363F",
+  "secondary-bor-static": "#292735",
+  "secondary-cont": "#292735",
+  "tertiary-bg-static": "#E3E3E9",
+  "tertiary-bg-disabled": "#D5D5DC",
+  "tertiary-cont": "#292735",
+  "tertiary-cont-disabled": "#ACACB3",
+  "link-static": "#3378F6",
+  "link-hover": "#292735",
+  "option-bg-static": "#E4E4EC",
+  "option-bg-hover": "#DADAE0",
+  "option-bg-active": "#A1A0AB",
+  "option-cont": "#4F4E57",
+  "option-cont-active": "#ffffff",
+  "knob-bg-hover": "#E4E4EC",
+  "knob-bg-active": "#292735",
+  "knob-cont": "#ffffff",
+  "knob-bor": "#292735",
+  "toggle-bg-static": "#DADAE0",
+  "toggle-bg-on": "#292735",
+  "toggle-cont": "#ffffff",
+  "option-bg-disabled": "#D5D5DC",
+  "option-cont-disabled": "#ACACB3",
+  "knob-bg-disabled-off": "#EDEDF2",
+  "knob-bg-disabled-on": "#D5D5DC",
+  "knob-cont-disabled-on": "#ffffff",
+  "toggle-bg-disabled": "#D5D5DC",
+  "toggle-cont-disabled": "#EDEDF2",
+  "header-cont": "#ffffff",
+  "header-btn-cont": "#ffffff",
+  "header-bg-static": "#37363F",
+  "header-btn-bg-hover": "#37363F",
+  "header-btn-bg-active": "#E3E3E9",
+  "header-btn-bg-static": "#292735",
+  "header-btn-bor-hover": "#292735",
+  "header-btn-cont-active": "#292735",
+  "knob-bg-static": "#ffffff",
+  Shadows: {
+    Huge: {
+      x: "2",
+      y: "16",
+      blur: "32",
+      type: "dropShadow",
+      color: "#37364066",
+      spread: "-8",
+    },
+    Gentle: {
+      x: "1",
+      y: "2",
+      blur: "4",
+      type: "dropShadow",
+      color: "#37364014",
+      spread: "-2",
+    },
+    Normal: {
+      x: "2",
+      y: "8",
+      blur: "24",
+      type: "dropShadow",
+      color: "#37364042",
+      spread: "-6",
+    },
+    "Bottom-scroll": {
+      x: "0",
+      y: "-8",
+      blur: "24",
+      type: "dropShadow",
+      color: "#37364029",
+      spread: "-8",
+    },
+  },
+};