Theming

Set the theme via the YouVersionProvider's theme prop. Defaults to 'light'.

Code
import { useState } from "react";
import { YouVersionProvider, BibleCard } from "@youversion/platform-react-ui";

function App() {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  return (
    <YouVersionProvider appKey="YOUR_APP_KEY" theme={theme}>
      {/* SDK components will automatically use the correct theme */}
      <BibleCard reference="JHN.3.16" versionId={3034} />
    </YouVersionProvider>
  );
}

Theme Options

Following OS Theme

Pass theme="system" to automatically match the user's OS light/dark setting. The SDK listens for changes in real time — no page reload needed.

Code
<YouVersionProvider appKey="YOUR_APP_KEY" theme="system">
  {/* YouVersion React components will switch between light/dark based on OS preference */}
</YouVersionProvider>

Toggling Theme Manually

Code
import { useState } from "react";
import {
  YouVersionProvider,
  BibleTextView,
} from "@youversion/platform-react-ui";

function App() {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  return (
    <YouVersionProvider appKey="YOUR_APP_KEY" theme={theme}>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Toggle theme
      </button>
      <BibleTextView reference="JHN.1.1-4" versionId={3034} />
    </YouVersionProvider>
  );
}

Per-Component Overrides

Individual components accept a background prop to override the provider theme locally:

Code
<YouVersionProvider appKey="YOUR_APP_KEY" theme="light">
  {/* This component uses dark styling despite the provider being light */}
  <BibleReader.Root background="dark" versionId={3034}>
    <BibleReader.Content />
  </BibleReader.Root>
</YouVersionProvider>

Custom CSS Variables

The React SDK uses scoped CSS variables prefixed with --yv- to avoid conflicts with your app.

CSS
[data-yv-sdk] {
  --yv-reader-font-family: "Georgia", "Times New Roman", serif;
  --yv-reader-font-size: 20px;
  --yv-reader-line-height: 1.8;
  --yv-reader-letter-spacing: 0.02em;
}