How to implement optional dark mode?

  1. SDK Version: 36
  2. Platforms: Android/iOS

I’ve decided to implement dark mode optionally for our users. I decided to use a value saved with Redux (theme) that takes the values light, dark and auto. auto uses the value from Appearance.getColorScheme() to apply the theme.

I have a central Colors.js in which I have 2 objects, lightColors and darkColors which have the same properties but different values. This Colors.js exports { colors, lightColors, darkColors } and my aim is to assign colors either lightColors or darkColors based on the value of theme from Redux or Appearance.getColorScheme(). colors is then used by all my components in their Styles, along with sometimes being used within render

This is all fine in theory but the problem is that Colors is initialized before pretty much anything else and doesn’t have the correct value for theme from Redux. So is there a way to export colors after Redux produces the correct value or something to that extent? I also tried settings colors in its own value within my reducer but unfortunately this.props is not available to the Styles generator.

Working in front of a bright monitor under low led light conditions, especially at night, can be stressful for the eyes. There’s a reason why so many developers prefer dark themes for their text editors and terminals. The interaction under such conditions could be improved by adding an optional dark mode.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.