[formulus & formulus-formplayer] In-app theme switcher

[IamLRBA]

Component

• formulus (React Native mobile app)
• formulus-formplayer (React web app)
• synkronus (Go backend server)
• synkronus-cli (Command-line utility)
• Documentation
• synkronus-portal

Goal

Give users in-app control over theme (System / Dark / Light) in Formulus and Formulus-formplayer, matching the behavior of the synkronus-portal theme switcher, so they can change appearance without leaving the app to change device/system settings.

Problem Statement

Theme switching is currently tied to the device/system theme: Formulus and formplayer follow the device theme and do not offer an in-app override. Users who want a fixed theme (e.g. always dark in low light, or always light for readability) must change their phone or OS theme, which:

• Affects every app on the device, not just ODE apps.
• Is harder to discover and use (different paths on Android vs iOS).
• Is inconsistent with the synkronus-portal, where users can choose System, Dark, or Light directly in the UI (ThemeSwitcher dropdown) and it looks good :)

Providing the same three choices (System, Dark, Light) inside the app would make behavior consistent across ODE products and improve usability.

Proposed Solution

1. Formulus (React Native)

• In the “More” screen (or equivalent settings/menu screen), we can add a “Theme” or “Appearance” control.
• Tapping it opens a dropdown or expanded modal with three options, consistent with the portal:
  • System - follow device theme (current behavior).
  • Dark - force dark mode.
  • Light - force light mode.
• Persist the user’s choice (e.g. AsyncStorage or existing app storage) so it survives app restarts.
• Apply the selected theme app-wide (screens, WebView/formplayer if it receives theme from the host).
• Reuse or align with any existing “theme follows device” logic so that “System” continues to track the OS and “Dark”/“Light” override it.

2. Formulus-formplayer (React web)

• If formplayer is embedded in Formulus (e.g. WebView), it should receive the host’s theme and render accordingly; no separate UI may be needed inside the WebView if the host controls theme.
• If formplayer is used standalone (e.g. in a browser), add a theme control (e.g. in a header or settings area) with the same three options (System / Dark / Light), persist the choice (e.g. localStorage), and apply it to the theme (e.g. existing getThemeOptions(mode)).
• Align behavior and labels with the portal (“System”, “Dark”, “Light”) for consistency.

Reference implementation

• synkronus-portal: src/components/ThemeSwitcher.tsx plus ThemeContext and theme state; dropdown with System (computer icon), Dark (moon), Light (sun). Use as UX and copy reference when implementing in Formulus/formplayer.

Success Criteria

• Formulus: “More” (or settings) screen has a clear Theme/Appearance control that opens a choice of System, Dark, or Light.
• Formulus: Selected theme is persisted and applied app-wide, including any embedded formplayer content where the host supplies theme.
• Formulus-formplayer: When used in a context where it owns the UI (e.g. standalone web), it offers the same three options and persists/applies the choice; when embedded, it respects the host-provided theme.
• Labels and behavior match the portal (System = follow device, Dark = force dark, Light = force light).
• No regression in existing “theme follows device” behavior when “System” is selected.