[brionmario]

Purpose

An app that renders its own ThemeProvider inside the one ThunderIDProvider renders, to theme the SDK components with its own design system, loses to the outer one:

• React: on load, the outer provider writes its CSS variables onto the document root after the inner one does, because parent effects run after child effects. When the application has a Design theme in flow meta, the SDK components show that theme instead of the app's. They switch to the app's theme only once something makes the inner provider write again, such as toggling the color scheme.
• React and Vue: whenever the outer provider's theme changes, for example when flow meta arrives, it writes over the inner one's variables.
• React and Vue: mode only seeds the color scheme, so a host app that drives mode from its own color scheme toggle never sees the change.

This showed up in the Admin Console (thunder-id/thunderid#6164). On a reload, the manage-* pages rendered in the application's orange, light Design theme inside the app's dark shell. The app currently works around it.

Approach

• The innermost ThemeProvider owns the document root. Each provider shares a private "theme root" context (ThemeRootContext in React, THEME_ROOT_KEY in Vue).
  • A nested provider claims the root from the one above it.
  • While a claim stands, the outer provider stops writing its CSS variables and text direction.
  • When the nested provider unmounts and releases its claim, the outer provider writes its own theme again.
  • The public ThemeContext and useTheme don't change.
• The color scheme follows mode when it changes.
  • React re-seeds the scheme from mode during render when the prop changes, the pattern React recommends for adjusting state when a prop changes.
  • Vue watches mode, re-seeds the scheme and restarts the system/class detection.
• A provider rendered on its own behaves exactly as before.

Related Issues

• N/A

Related PRs

• Build the Admin Console on the manage-* packages thunderid#6164: the Admin Console, which renders its own ThemeProvider for the manage-* pages. Its workaround can go once this is released.

Checklist

• Followed the contribution guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Tests provided. (Add links if there are any)
  • Unit Tests: packages/react/src/contexts/Theme/__tests__/ThemeProvider.nested.test.tsx and packages/vue/src/__tests__/providers/ThemeProvider.nested.test.ts. Both cover keeping the nested theme when the outer theme changes, writing the outer theme again when the nested one unmounts, and following a change of mode. They fail without the fix.
  • Integration Tests
• Breaking changes. (Fill if applicable)
  • Breaking changes section filled.
  • breaking change label added.
• Cross-SDK parity. Exactly one of parity/prs-raised or parity/prs-not-needed added.
  • parity/prs-not-needed: the bug comes from web providers sharing the DOM document root, which the iOS, Android and Flutter SDKs don't have. React and Vue are both fixed here; Next.js and Nuxt use them.
  • No sample is affected: a provider rendered on its own behaves as before.

Security checks

• Followed secure coding standards.
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

• Source mode: Auto
• Repository: thunder-id/javascript-sdks
• Branch: main
• File: .coderabbit.yaml
• Commit: 0fdbebc
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1c71cac0-4a67-4725-b146-db6b0f193058

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}