YPE-1001: Add dark mode ability to BibleTextView React component

[cameronapak]

Jira Ticket: https://lifechurch.atlassian.net/browse/YPE-1001

The goal of this is to add dark mode ability to the BibleTextView React component. It's a little odd trying to figure this one out because it requires updating the actual component itself. And so updating the component and not just the story requires me to say that this is a minor bump in the change set for the package. But it was fun to work on.

This change also results in BibleReader needing to be updated as well. And so I did a small update for BibleReader.

[changeset-bot]

🦋 Changeset detected

Latest commit: be87934

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-react-ui	Minor
@youversion/platform-core	Minor
@youversion/platform-react-hooks	Minor
nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[greptile-apps]

Greptile Summary

This PR adds dark mode support to the BibleTextView and BibleReader components by introducing a new theme prop that accepts 'light' or 'dark' values. The implementation:

• Added a theme prop to BibleTextView that integrates with the existing useTheme hook from @youversion/platform-react-hooks
• Implemented theme inheritance from YouVersionProvider via the useTheme hook, with the component prop taking precedence
• Added data-yv-sdk and data-yv-theme attributes to the wrapper div for CSS theme targeting
• Updated BibleReader to pass the background prop as theme to BibleTextView
• Created a new DarkMode story in Storybook with appropriate styling wrappers to showcase the functionality
• Used a minor version bump as this adds new functionality to existing components

The implementation is clean, follows existing patterns in the codebase, and properly handles theme fallbacks. All loading and error states are wrapped with the theme attributes ensuring consistent theming across all component states.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-structured and follow existing patterns. The implementation properly handles theme inheritance with fallback to provider context, maintains backward compatibility by making the theme prop optional, and consistently applies the theme wrapper to all component states (loading, error, success). No breaking changes, security issues, or logical errors detected.
• No files require special attention

Important Files Changed

Filename	Overview
packages/ui/src/components/verse.tsx	Added dark mode support with theme prop, integrated useTheme hook, and wrapped all return states with data-yv-theme attributes
packages/ui/src/components/bible-reader.tsx	Added theme prop passing from BibleReader context to BibleTextView component
packages/ui/src/components/verse.stories.tsx	Added new DarkMode story with theme control and appropriate styling wrapper
.changeset/slick-worlds-rule.md	Changeset documenting the dark mode feature addition with proper semver bump (minor)

Sequence Diagram

sequenceDiagram
    participant User
    participant BibleReader
    participant BibleReaderContext
    participant BibleTextView
    participant useTheme
    participant YouVersionProvider
    participant DOM

    User->>BibleReader: Renders with background prop
    BibleReader->>useTheme: Call useTheme() hook
    useTheme->>YouVersionProvider: Access YouVersionContext
    YouVersionProvider-->>useTheme: Return theme ('light' or 'dark')
    useTheme-->>BibleReader: Return providerTheme
    BibleReader->>BibleReaderContext: Store theme = background || providerTheme
    BibleReader->>DOM: Set data-yv-theme attribute
    BibleReader->>BibleTextView: Pass theme prop
    BibleTextView->>useTheme: Call useTheme() hook
    useTheme->>YouVersionProvider: Access YouVersionContext
    YouVersionProvider-->>useTheme: Return theme ('light' or 'dark')
    useTheme-->>BibleTextView: Return providerTheme
    BibleTextView->>BibleTextView: Compute currentTheme = theme || providerTheme
    BibleTextView->>DOM: Wrap with div[data-yv-sdk][data-yv-theme]
    DOM-->>User: Rendered with theme-aware CSS

Loading

[bmanquen]

One small comment, great work!