@farcaster/snap 1.15.0 → 1.15.1

package/dist/react/accent-context.d.ts

@@ -1,6 +1,8 @@
 import { type ReactNode } from "react";
-export declare function SnapPreviewAccentProvider({ pageAccent, children, }: {
+export declare function SnapPreviewAccentProvider({ pageAccent, appearance, children, }: {
     pageAccent: string | undefined;
+    appearance?: "light" | "dark";
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useSnapPreviewPageAccent(): string | undefined;
+export declare function useSnapAppearance(): "light" | "dark";

package/dist/react/accent-context.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-const SnapPreviewAccentContext = createContext(null);
-export function SnapPreviewAccentProvider({ pageAccent, children, }) {
-    return (_jsx(SnapPreviewAccentContext.Provider, { value: { pageAccent }, children: children }));
+const SnapPreviewContext = createContext(null);
+export function SnapPreviewAccentProvider({ pageAccent, appearance = "dark", children, }) {
+    return (_jsx(SnapPreviewContext.Provider, { value: { pageAccent, appearance }, children: children }));
 }
 export function useSnapPreviewPageAccent() {
-    return useContext(SnapPreviewAccentContext)?.pageAccent;
+    return useContext(SnapPreviewContext)?.pageAccent;
+}
+export function useSnapAppearance() {
+    return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

package/dist/react/hooks/use-snap-colors.js

@@ -1,9 +1,8 @@
 "use client";
 import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
-import { useColorMode } from "@neynar/ui/color-mode";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
-import { useSnapPreviewPageAccent } from "../accent-context.js";
+import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context.js";
 import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
 /** Readable foreground color (black or white) for a given hex background. */
 export function pickForegroundForBg(hex) {
@@ -69,7 +68,7 @@ function buildSnapColors(accentName, mode) {
  */
 export function useSnapColors() {
     const { get } = useStateStore();
-    const { mode } = useColorMode();
+    const mode = useSnapAppearance();
     const pageAccent = useSnapPreviewPageAccent();
     const fromState = get("/theme/accent");
     const accentRaw = (typeof pageAccent === "string" && pageAccent.length > 0

package/dist/react/index.js

@@ -188,7 +188,7 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                     opacity: loading ? 1 : 0,
                     pointerEvents: loading ? "auto" : "none",
                     transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
-                }, children: "Loading..." }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                }, children: "Loading..." }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                             applyStatePaths(stateRef.current, changes);
                         }, onAction: handleAction }, pageKey) }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/accent-context.tsx

@@ -2,28 +2,35 @@
 
 import { createContext, useContext, type ReactNode } from "react";
 
-type SnapPreviewAccentContextValue = {
+type SnapPreviewContextValue = {
   /** From loaded snap `page.theme.accent` (undefined if the snap omits it). */
   pageAccent: string | undefined;
+  /** Light/dark appearance passed from SnapView. */
+  appearance: "light" | "dark";
 };
 
-const SnapPreviewAccentContext =
-  createContext<SnapPreviewAccentContextValue | null>(null);
+const SnapPreviewContext = createContext<SnapPreviewContextValue | null>(null);
 
 export function SnapPreviewAccentProvider({
   pageAccent,
+  appearance = "dark",
   children,
 }: {
   pageAccent: string | undefined;
+  appearance?: "light" | "dark";
   children: ReactNode;
 }) {
   return (
-    <SnapPreviewAccentContext.Provider value={{ pageAccent }}>
+    <SnapPreviewContext.Provider value={{ pageAccent, appearance }}>
       {children}
-    </SnapPreviewAccentContext.Provider>
+    </SnapPreviewContext.Provider>
   );
 }
 
 export function useSnapPreviewPageAccent(): string | undefined {
-  return useContext(SnapPreviewAccentContext)?.pageAccent;
+  return useContext(SnapPreviewContext)?.pageAccent;
+}
+
+export function useSnapAppearance(): "light" | "dark" {
+  return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

package/src/react/hooks/use-snap-colors.ts

@@ -2,9 +2,8 @@
 
 import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
-import { useColorMode } from "@neynar/ui/color-mode";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
-import { useSnapPreviewPageAccent } from "../accent-context";
+import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context";
 import type { PaletteColor } from "@farcaster/snap";
 import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
 
@@ -113,7 +112,7 @@ function buildSnapColors(
  */
 export function useSnapColors(): SnapColors {
   const { get } = useStateStore();
-  const { mode } = useColorMode();
+  const mode = useSnapAppearance();
   const pageAccent = useSnapPreviewPageAccent();
   const fromState = get("/theme/accent");
   const accentRaw =

package/src/react/index.tsx

@@ -304,7 +304,7 @@ export function SnapView({
       </div>
 
       <div style={previewSurfaceStyle}>
-        <SnapPreviewAccentProvider pageAccent={snap.theme?.accent}>
+        <SnapPreviewAccentProvider pageAccent={snap.theme?.accent} appearance={appearance}>
           <SnapCatalogView
             key={pageKey}
             spec={spec}