Skip to content

Conversation

@IamLRBA
Copy link
Contributor

@IamLRBA IamLRBA commented Jan 21, 2026

Pull Request Title

feat(formplayer): implement dark mode support

Description

Implements dark mode support in Formplayer that adapts to the device's system theme preference.
Formulus detects the system setting using React Native's useColorScheme hook and passes it to Formplayer as an initialization parameter. Formplayer then renders a dark theme using ODE design tokens with dark backgrounds, light text, and appropriate contrast for UI elements.

How it works

Formulus (React Native):

  • Uses useColorScheme() to detect the device's dark mode preference
  • Passes darkMode: boolean in formParams when initializing Formplayer

Formplayer (React Web App):

  • Extracts darkMode from initialization parameters
  • Creates Material-UI theme using getThemeOptions(mode) function
  • Applies dark mode colors using ODE design tokens:

Screenshots

Light Mode Dark Mode
dm11 dm1
dm22 dm2
dm33 dm3
dm44 dm4

Type of Change

  • Bug Fix
  • New Feature / Enhancement
  • Refactor / Code Cleanup
  • Documentation Update
  • Maintenance / Chore
  • Other (please specify):

Component(s) Affected

  • formulus (React Native mobile app)
  • formulus-formplayer (React web app)
  • synkronus (Go backend server)
  • synkronus-cli (Command-line utility)
  • Documentation
  • DevOps / CI/CD
  • Other:

Related Issue(s)

Closes/Fixes/Resolves: Closes #11


Testing

  • Unit tests added/updated
  • Integration tests added/updated
  • Manually tested
  • Tested on multiple platforms (if applicable)
  • Not applicable

Breaking Changes

  • This PR introduces breaking changes
  • This PR does NOT introduce breaking changes

If breaking changes, please describe migration steps:


Documentation Updates

  • Documentation has been updated
  • Documentation update is not required

Thank you for contributing to Open Data Ensemble (ODE)!

@IamLRBA IamLRBA requested review from Bahati308 and r0ssing January 21, 2026 01:17
@IamLRBA
Copy link
Contributor Author

IamLRBA commented Jan 21, 2026

For this implementation, no user configuration is required and instead theme Switching is automatic.
It follows system preference on each form initialization for a seamless transition between light and dark modes.

If perhaps in the future we might need to have a theme icon and feature to assist users who might want to toggle between the modes by themselves, we can have a discussion about that for a another PR.

@IamLRBA IamLRBA force-pushed the Dark-Mode branch 2 times, most recently from ce27cfa to 912b7d9 Compare January 21, 2026 01:49
Copy link
Contributor

@r0ssing r0ssing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @IamLRBA - I love dark mode!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support Dark Mode in Formplayer (and Formulus)

2 participants