@youversion/platform-react-hooks 0.9.0 → 0.10.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @youversion/platform-react-hooks@0.9.0 build /home/runner/work/platform-sdk-react/platform-sdk-react/packages/hooks
+> @youversion/platform-react-hooks@0.10.1 build /home/runner/work/platform-sdk-react/platform-sdk-react/packages/hooks
 > tsc -p tsconfig.build.json
 

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @youversion/platform-react-hooks
 
+## 0.10.1
+
+### Patch Changes
+
+- 8e3a672: fix(ui): fix the css build so that it removes our css from all layers
+  - this fixes the issue where our sdk css was getting overridden due to
+    the consuming app having css that is unlayered and unlayered css will
+    always take precedence over layered css.
+
+- Updated dependencies [8e3a672]
+  - @youversion/platform-core@0.10.1
+
+## 0.10.0
+
+### Minor Changes
+
+- df2082d: Added version picker functionality to BibleWidgetView component with enhanced UI theming and user experience improvements.
+
+  New Features
+  - BibleWidgetView Version Picker: Added showVersionPicker prop enabling dynamic Bible version switching within the widget
+  - Enhanced Version Display: Improved version abbreviation presentation (e.g., "KJV1984" displays as "KJV" over "1984" in stacked format)
+  - Auto-Scroll Navigation: Bible chapter picker now automatically scrolls to and expands the current book when opened
+  - Added the ability to customize the text on the YouVersionAuthButton
+  - Add theme to the YouVersionProvider to specify light or dark mode to the SDK
+
+  UI/UX Improvements
+  - Consistent Button Styling: Updated all picker buttons to use secondary variant with bold typography
+  - Better Theme Support: Added comprehensive dark/light mode theming with data-yv-theme attributes
+  - Improved Accessibility: Enhanced search functionality with proper ARIA labels
+  - Cleaner DOM Structure: Simplified component hierarchy by removing unnecessary wrapper elements
+  - Improve component theming to apply theme to the ui components and improve
+    isolating the sdk css.
+
+### Patch Changes
+
+- Updated dependencies [df2082d]
+  - @youversion/platform-core@0.10.0
+
 ## 0.9.0
 
 ### Minor Changes

package/dist/context/YouVersionContext.d.ts

@@ -2,6 +2,7 @@ type YouVersionContextData = {
     appKey: string;
     apiHost?: string;
     installationId?: string;
+    theme?: 'light' | 'dark';
 };
 export declare const YouVersionContext: import("react").Context<YouVersionContextData | null>;
 export {};

package/dist/context/YouVersionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YouVersionContext.d.ts","sourceRoot":"","sources":["../../src/context/YouVersionContext.tsx"],"names":[],"mappings":"AAIA,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,uDAAoD,CAAC"}
+{"version":3,"file":"YouVersionContext.d.ts","sourceRoot":"","sources":["../../src/context/YouVersionContext.tsx"],"names":[],"mappings":"AAIA,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,uDAAoD,CAAC"}

package/dist/context/YouVersionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"YouVersionContext.js","sourceRoot":"","sources":["../../src/context/YouVersionContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAA+B,IAAI,CAAC,CAAC"}
+{"version":3,"file":"YouVersionContext.js","sourceRoot":"","sources":["../../src/context/YouVersionContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAStC,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAA+B,IAAI,CAAC,CAAC"}

package/dist/context/YouVersionProvider.d.ts

@@ -3,6 +3,7 @@ interface YouVersionProviderPropsBase {
     children: ReactNode;
     appKey: string;
     apiHost?: string;
+    theme?: 'light' | 'dark';
 }
 interface YouVersionProviderPropsWithAuth extends YouVersionProviderPropsBase {
     authRedirectUrl: string;

package/dist/context/YouVersionProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YouVersionProvider.d.ts","sourceRoot":"","sources":["../../src/context/YouVersionProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,UAAU,2BAA2B;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,+BAAgC,SAAQ,2BAA2B;IAC3E,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,IAAI,CAAC;CACnB;AAED,UAAU,kCAAmC,SAAQ,2BAA2B;IAC9E,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAID,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,iBAAiB,CAAC,+BAA+B,GAAG,kCAAkC,CAAC,GAC7F,KAAK,CAAC,YAAY,CAqCpB"}
+{"version":3,"file":"YouVersionProvider.d.ts","sourceRoot":"","sources":["../../src/context/YouVersionProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,UAAU,2BAA2B;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,UAAU,+BAAgC,SAAQ,2BAA2B;IAC3E,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,IAAI,CAAC;CACnB;AAED,UAAU,kCAAmC,SAAQ,2BAA2B;IAC9E,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAID,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,iBAAiB,CAAC,+BAA+B,GAAG,kCAAkC,CAAC,GAC7F,KAAK,CAAC,YAAY,CA0CpB"}

package/dist/context/YouVersionProvider.js

@@ -5,7 +5,7 @@ import { YouVersionContext } from './YouVersionContext';
 import { YouVersionPlatformConfiguration } from '@youversion/platform-core';
 const AuthProvider = lazy(() => import('./YouVersionAuthProvider'));
 export function YouVersionProvider(props) {
-    const { appKey, apiHost = 'api.youversion.com', includeAuth, children } = props;
+    const { appKey, apiHost = 'api.youversion.com', includeAuth, theme = 'light', children } = props;
     // Syncing appKey and apiHost to YouVersionPlatformConfiguration
     // so that this can be in sync with any other code that uses
     // the YouVersionPlatformConfiguration, of which a lot of our
@@ -17,7 +17,12 @@ export function YouVersionProvider(props) {
     if (includeAuth) {
         const { authRedirectUrl } = props;
         // Installation ID gets set automatically by YouVersionPlatformConfiguration
-        return (_jsx(YouVersionContext.Provider, { value: { appKey, apiHost, installationId: YouVersionPlatformConfiguration.installationId }, children: _jsx(Suspense, { children: _jsx(AuthProvider, { config: { appKey, apiHost, redirectUri: authRedirectUrl }, children: _jsx("div", { "data-yv-sdk": true, children: children }) }) }) }));
+        return (_jsx(YouVersionContext.Provider, { value: {
+                appKey,
+                apiHost,
+                installationId: YouVersionPlatformConfiguration.installationId,
+                theme,
+            }, children: _jsx(Suspense, { children: _jsx(AuthProvider, { config: { appKey, apiHost, redirectUri: authRedirectUrl }, children: children }) }) }));
     }
     // Installation ID gets set automatically by YouVersionPlatformConfiguration
     return (_jsx(YouVersionContext.Provider, { value: { appKey, apiHost, installationId: YouVersionPlatformConfiguration.installationId }, children: children }));

package/dist/context/YouVersionProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"YouVersionProvider.js","sourceRoot":"","sources":["../../src/context/YouVersionProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAkB5E,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;AAEpE,MAAM,UAAU,kBAAkB,CAChC,KAA8F;IAE9F,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,oBAAoB,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEhF,gEAAgE;IAChE,4DAA4D;IAC5D,6DAA6D;IAC7D,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,+BAA+B,CAAC,MAAM,GAAG,MAAM,CAAC;QAChD,+BAA+B,CAAC,OAAO,GAAG,OAAO,CAAC;IACpD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;QAElC,4EAA4E;QAC5E,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,+BAA+B,CAAC,cAAc,EAAE,YAE1F,KAAC,QAAQ,cACP,KAAC,YAAY,IAAC,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YACrE,6CAAkB,QAAQ,GAAO,GACpB,GACN,GACgB,CAC9B,CAAC;IACJ,CAAC;IAED,4EAA4E;IAC5E,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,+BAA+B,CAAC,cAAc,EAAE,YAEzF,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"YouVersionProvider.js","sourceRoot":"","sources":["../../src/context/YouVersionProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAmB5E,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;AAEpE,MAAM,UAAU,kBAAkB,CAChC,KAA8F;IAE9F,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,oBAAoB,EAAE,WAAW,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEjG,gEAAgE;IAChE,4DAA4D;IAC5D,6DAA6D;IAC7D,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,+BAA+B,CAAC,MAAM,GAAG,MAAM,CAAC;QAChD,+BAA+B,CAAC,OAAO,GAAG,OAAO,CAAC;IACpD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;QAElC,4EAA4E;QAC5E,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;gBACL,MAAM;gBACN,OAAO;gBACP,cAAc,EAAE,+BAA+B,CAAC,cAAc;gBAC9D,KAAK;aACN,YAED,KAAC,QAAQ,cACP,KAAC,YAAY,IAAC,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YACpE,QAAQ,GACI,GACN,GACgB,CAC9B,CAAC;IACJ,CAAC;IAED,4EAA4E;IAC5E,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,+BAA+B,CAAC,cAAc,EAAE,YAEzF,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from './usePassage';
 export * from './useVOTD';
 export * from './useHighlights';
 export * from './useLanguages';
+export * from './useTheme';
 export * from './useYVAuth';
 export * from './types/auth';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAG3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -18,6 +18,7 @@ export * from './usePassage';
 export * from './useVOTD';
 export * from './useHighlights';
 export * from './useLanguages';
+export * from './useTheme';
 // Auth hooks
 export * from './useYVAuth';
 export * from './types/auth';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAE/B,aAAa;AACb,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAE3B,aAAa;AACb,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/useTheme.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook to access the current theme from YouVersionContext
+ *
+ * @returns The current theme ('light' or 'dark'), defaults to 'light' if provider is missing
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme();
+ * }
+ * ```
+ */
+export declare function useTheme(): 'light' | 'dark';
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,IAAI,OAAO,GAAG,MAAM,CAK3C"}

package/dist/useTheme.js

@@ -0,0 +1,21 @@
+'use client';
+import { useContext } from 'react';
+import { YouVersionContext } from './context';
+/**
+ * Hook to access the current theme from YouVersionContext
+ *
+ * @returns The current theme ('light' or 'dark'), defaults to 'light' if provider is missing
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme();
+ * }
+ * ```
+ */
+export function useTheme() {
+    const context = useContext(YouVersionContext);
+    // Default to 'light' to match YouVersionProvider's default
+    return context?.theme || 'light';
+}
+//# sourceMappingURL=useTheme.js.map

package/dist/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE9C,2DAA2D;IAC3D,OAAO,OAAO,EAAE,KAAK,IAAI,OAAO,CAAC;AACnC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youversion/platform-react-hooks",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@youversion/platform-core": "0.9.0"
+    "@youversion/platform-core": "0.10.1"
   },
   "peerDependencies": {
     "react": ">=19.1.0 <20.0.0"

package/src/context/YouVersionContext.tsx

@@ -6,6 +6,7 @@ type YouVersionContextData = {
   appKey: string;
   apiHost?: string;
   installationId?: string;
+  theme?: 'light' | 'dark';
 };
 
 export const YouVersionContext = createContext<YouVersionContextData | null>(null);

package/src/context/YouVersionProvider.tsx

@@ -9,6 +9,7 @@ interface YouVersionProviderPropsBase {
   children: ReactNode;
   appKey: string;
   apiHost?: string;
+  theme?: 'light' | 'dark';
 }
 
 interface YouVersionProviderPropsWithAuth extends YouVersionProviderPropsBase {
@@ -26,7 +27,7 @@ const AuthProvider = lazy(() => import('./YouVersionAuthProvider'));
 export function YouVersionProvider(
   props: PropsWithChildren<YouVersionProviderPropsWithAuth | YouVersionProviderPropsWithoutAuth>,
 ): React.ReactElement {
-  const { appKey, apiHost = 'api.youversion.com', includeAuth, children } = props;
+  const { appKey, apiHost = 'api.youversion.com', includeAuth, theme = 'light', children } = props;
 
   // Syncing appKey and apiHost to YouVersionPlatformConfiguration
   // so that this can be in sync with any other code that uses
@@ -43,11 +44,16 @@ export function YouVersionProvider(
     // Installation ID gets set automatically by YouVersionPlatformConfiguration
     return (
       <YouVersionContext.Provider
-        value={{ appKey, apiHost, installationId: YouVersionPlatformConfiguration.installationId }}
+        value={{
+          appKey,
+          apiHost,
+          installationId: YouVersionPlatformConfiguration.installationId,
+          theme,
+        }}
       >
         <Suspense>
           <AuthProvider config={{ appKey, apiHost, redirectUri: authRedirectUrl }}>
-            <div data-yv-sdk>{children}</div>
+            {children}
           </AuthProvider>
         </Suspense>
       </YouVersionContext.Provider>

package/src/index.ts

@@ -18,6 +18,7 @@ export * from './usePassage';
 export * from './useVOTD';
 export * from './useHighlights';
 export * from './useLanguages';
+export * from './useTheme';
 
 // Auth hooks
 export * from './useYVAuth';

package/src/useTheme.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { useContext } from 'react';
+import { YouVersionContext } from './context';
+
+/**
+ * Hook to access the current theme from YouVersionContext
+ *
+ * @returns The current theme ('light' or 'dark'), defaults to 'light' if provider is missing
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme();
+ * }
+ * ```
+ */
+export function useTheme(): 'light' | 'dark' {
+  const context = useContext(YouVersionContext);
+
+  // Default to 'light' to match YouVersionProvider's default
+  return context?.theme || 'light';
+}