Follow system night mode when available

App.js

@@ -42,6 +42,7 @@ export default class App extends React.Component<Props, State> {
         super();
         LocaleManager.initTranslations();
         this.onIntroDone = this.onIntroDone.bind(this);
+        SplashScreen.preventAutoHide();
     }
 
     /**
@@ -84,13 +85,9 @@ export default class App extends React.Component<Props, State> {
 
     async loadAssetsAsync() {
         // Wait for custom fonts to be loaded before showing the app
-        // console.log("loading Fonts");
-        SplashScreen.preventAutoHide();
-        // console.log("loading preferences");
         await AsyncStorageManager.getInstance().loadPreferences();
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
-        // console.log("loading Expo token");
+        // await NotificationsManager.initExpoToken();
-        await NotificationsManager.initExpoToken();
         this.onLoadFinished();
     }
 
@@ -122,7 +119,6 @@ export default class App extends React.Component<Props, State> {
                 isAprilFools={this.state.showAprilFools && !this.state.showIntro}
             />;
         } else {
-
             return (
                 <PaperProvider theme={this.state.currentTheme}>
                     <NavigationContainer theme={this.state.currentTheme}>

app.json

@@ -13,6 +13,7 @@
     "version": "1.5.2",
     "orientation": "portrait",
     "primaryColor": "#be1522",
+    "userInterfaceStyle": "automatic",
     "icon": "./assets/android.icon.png",
     "splash": {
       "backgroundColor": "#be1522",

package.json

@@ -34,7 +34,8 @@
     "react-native-render-html": "^4.1.2",
     "react-native-safe-area-context": "0.6.0",
     "react-native-screens": "2.0.0-alpha.12",
-    "react-native-webview": "7.4.3"
+    "react-native-webview": "7.4.3",
+    "react-native-appearance": "~0.3.1"
   },
   "devDependencies": {
     "babel-preset-expo": "^8.0.0"

screens/SettingsScreen.js

@@ -7,6 +7,7 @@ import i18n from "i18n-js";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
 import NotificationsManager from "../utils/NotificationsManager";
 import {Card, List, Switch, ToggleButton} from 'react-native-paper';
+import {Appearance} from "react-native-appearance";
 
 type Props = {
     navigation: Object,
@@ -14,6 +15,7 @@ type Props = {
 
 type State = {
     nightMode: boolean,
+    nightModeFollowSystem: boolean,
     proxiwashNotifPickerSelected: string,
     startScreenPickerSelected: string,
 };
@@ -24,6 +26,8 @@ type State = {
 export default class SettingsScreen extends React.Component<Props, State> {
     state = {
         nightMode: ThemeManager.getNightMode(),
+        nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' &&
+        Appearance.getColorScheme() !== 'no-preference',
         proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current,
         startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
     };
@@ -31,12 +35,14 @@ export default class SettingsScreen extends React.Component<Props, State> {
     onProxiwashNotifPickerValueChange: Function;
     onStartScreenPickerValueChange: Function;
     onToggleNightMode: Function;
+    onToggleNightModeFollowSystem: Function;
 
     constructor() {
         super();
         this.onProxiwashNotifPickerValueChange = this.onProxiwashNotifPickerValueChange.bind(this);
         this.onStartScreenPickerValueChange = this.onStartScreenPickerValueChange.bind(this);
         this.onToggleNightMode = this.onToggleNightMode.bind(this);
+        this.onToggleNightModeFollowSystem = this.onToggleNightModeFollowSystem.bind(this);
     }
 
     /**
@@ -119,6 +125,18 @@ export default class SettingsScreen extends React.Component<Props, State> {
         this.setState({nightMode: !this.state.nightMode});
     }
 
+    onToggleNightModeFollowSystem() {
+        const value = !this.state.nightModeFollowSystem;
+        this.setState({nightModeFollowSystem: value});
+        let key = AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.key;
+        AsyncStorageManager.getInstance().savePref(key, value ? '1' : '0');
+        if (value) {
+            const nightMode = Appearance.getColorScheme() === 'dark';
+            ThemeManager.getInstance().setNightMode(nightMode);
+            this.setState({nightMode: nightMode});
+        }
+    }
+
     /**
      * Get a list item using a checkbox control
      *
@@ -128,7 +146,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
      * @param subtitle The text to display as this list item subtitle
      * @returns {React.Node}
      */
-    getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) {
+    getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) {
         return (
             <List.Item
                 title={title}
@@ -136,7 +154,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 left={props => <List.Icon {...props} icon={icon}/>}
                 right={props =>
                     <Switch
-                        value={this.state.nightMode}
+                        value={state}
                         onValueChange={onPressCallback}
                     />}
             />
@@ -149,14 +167,27 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 <Card style={{margin: 5}}>
                     <Card.Title title={i18n.t('settingsScreen.generalCard')}/>
                     <List.Section>
-                        {this.getToggleItem(
+                        {Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem(
-                            this.onToggleNightMode,
+                            this.onToggleNightModeFollowSystem,
                             'theme-light-dark',
-                            i18n.t('settingsScreen.nightMode'),
+                            i18n.t('settingsScreen.nightModeAuto'),
                             this.state.nightMode ?
                                 i18n.t('settingsScreen.nightModeSubOn') :
-                                i18n.t('settingsScreen.nightModeSubOff')
+                                i18n.t('settingsScreen.nightModeSubOff'),
-                        )}
+                            this.state.nightModeFollowSystem
+                        ) : null}
+                        {
+                            Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
+                            this.getToggleItem(
+                                this.onToggleNightMode,
+                                'theme-light-dark',
+                                i18n.t('settingsScreen.nightMode'),
+                                this.state.nightMode ?
+                                    i18n.t('settingsScreen.nightModeSubOn') :
+                                    i18n.t('settingsScreen.nightModeSubOff'),
+                                this.state.nightMode
+                            ) : null
+                        }
                         <List.Accordion
                             title={i18n.t('settingsScreen.startScreen')}
                             description={i18n.t('settingsScreen.startScreenSub')}

translations/en.json

@@ -67,6 +67,7 @@
     "nightMode": "Night Mode",
     "nightModeSubOn": "Your eyes are at peace",
     "nightModeSubOff": "Your eyes are burning",
+    "nightModeAuto": "Follow system dark mode",
     "startScreen": "Start Screen",
     "startScreenSub": "Select which screen to start the app on",
     "proxiwashNotifReminder": "Machine running reminder",

translations/fr.json

@@ -65,8 +65,9 @@
   "settingsScreen": {
     "generalCard": "Général",
     "nightMode": "Mode Nuit",
-    "nightModeSubOn": "Vos yeux brulent",
+    "nightModeSubOn": "Vos yeux vous remercient",
-    "nightModeSubOff": "Vos yeux vous remercient",
+    "nightModeSubOff": "Vos yeux brulent",
+    "nightModeAuto": "Mode nuit système",
     "startScreen": "Écran de démarrage",
     "startScreenSub": "Choisissez l'écran utilisé au démarrage",
     "proxiwashNotifReminder": "Rappel de machine en cours",

utils/AsyncStorageManager.js

@@ -44,6 +44,11 @@ export default class AsyncStorageManager {
             default: '[]',
             current: '',
         },
+        nightModeFollowSystem: {
+            key: 'nightModeFollowSystem',
+            default: '1',
+            current: '',
+        },
         nightMode: {
             key: 'nightMode',
             default: '0',

utils/ThemeManager.js

@@ -3,6 +3,9 @@
 import AsyncStorageManager from "./AsyncStorageManager";
 import {DarkTheme, DefaultTheme} from 'react-native-paper';
 import AprilFoolsManager from "./AprilFoolsManager";
+import { Appearance } from 'react-native-appearance';
+
+const colorScheme = Appearance.getColorScheme();
 
 /**
  * Singleton class used to manage themes
@@ -107,7 +110,8 @@ export default class ThemeManager {
      * @returns {boolean} Night mode state
      */
     static getNightMode(): boolean {
-        return AsyncStorageManager.getInstance().preferences.nightMode.current === '1';
+        return AsyncStorageManager.getInstance().preferences.nightMode.current === '1' ||
+            AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' && colorScheme === 'dark';
     }
 
     /**