add support to change theme based on system

apps/mobile/App.js

@@ -11,11 +11,16 @@ import {db, DDS, ToastEvent} from './src/utils/utils';
 import {useNetInfo} from '@react-native-community/netinfo';
 import RNHTMLtoPDF from 'react-native-html-to-pdf';
 import { MMKV } from './src/utils/storage';
+import {
+  Appearance,
+  useColorScheme,
+  StatusBar} from "react-native";
 
 const App = () => {
   const [state, dispatch] = useTracked();
   const [init, setInit] = useState(false);
   const netInfo = useNetInfo();
+  const colorScheme = useColorScheme();
   const I = DDS.isTab ? require('./index.tablet') : require('./index.mobile');
   const _onOrientationChange = o => {
     // Currently orientation is locked on tablet.
@@ -26,6 +31,31 @@ const App = () => {
     }, 1000); */
   };
 
+  useEffect(() => {
+
+    systemThemeChange();
+  
+  },[colorScheme])
+
+
+  const systemThemeChange = async () => {
+    let s;
+    try {
+      s = await MMKV.getStringAsync('settings');
+    } catch (e) {
+    }
+    console.log("HEREE");
+    console.log('heree');
+    if (!s) return;
+    s = JSON.parse(s);
+    console.log(s);
+    if (s.useSystemTheme) {
+      let newColors = await getColorScheme(s.useSystemTheme);
+      StatusBar.setBarStyle(Appearance.getColorScheme() === "dark" ? 'light-content' : 'dark-content');
+      dispatch({type: ACTIONS.THEME, colors: newColors});
+    }
+  }
+
   useEffect(() => {
     if (!netInfo.isConnected || !netInfo.isInternetReachable) {
       db.user?.get().then(user => {
@@ -111,7 +141,6 @@ const App = () => {
   }, []);
 
   async function Initialize(colors = colors) {
-    let newColors = await getColorScheme(colors);
 
     let s;
     try {
@@ -136,6 +165,7 @@ const App = () => {
       dispatch({type: ACTIONS.SETTINGS, settings: {...s}});
     }
 
+    let newColors = await getColorScheme(s.useSystemTheme);
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }
 

apps/mobile/src/common/common.js

@@ -1,4 +1,4 @@
-import { Dimensions, PixelRatio, StatusBar, Platform } from 'react-native';
+import { Dimensions, PixelRatio, StatusBar, Platform, Appearance } from 'react-native';
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -185,7 +185,7 @@ export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
   return COLOR_SCHEME;
 }
 
-export async function getColorScheme() {
+export async function getColorScheme(useSystemTheme) {
   let accentColor;
   try {
     accentColor = await MMKV.getStringAsync('accentColor');
@@ -201,13 +201,16 @@ export async function getColorScheme() {
   } else {
     setAccentColor(accentColor);
   }
+  if (useSystemTheme) {
     
+    StatusBar.setBarStyle(Appearance.getColorScheme() === "dark" ? 'light-content' : 'dark-content');
+    return Appearance.getColorScheme() === "dark" ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT
+  }
   if (typeof t !== 'string') {
     MMKV.setStringAsync('theme', JSON.stringify({ night: false }));
     setColorScheme(COLOR_SCHEME_LIGHT);
   } else {
     let themeToSet = JSON.parse(t);
-
     themeToSet.night
       ? setColorScheme(COLOR_SCHEME_DARK)
       : setColorScheme(COLOR_SCHEME_LIGHT);

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -258,15 +258,12 @@ export class AddNotebookDialog extends React.Component {
             style={styles.wrapper}>
             <TouchableOpacity onPress={this.close} style={styles.overlay} />
             <View
-              style={{
-                width: DDS.isTab ? '50%' : '100%',
-                height: DDS.isTab ? '80%' : '100%',
-                maxHeight: DDS.isTab ? '80%' : '100%',
-                borderRadius: DDS.isTab ? 5 : 0,
+              style={[
+                styles.container,
+                {
                   backgroundColor: colors.bg,
-                paddingHorizontal: ph,
-                paddingVertical: pv,
-              }}>
+                },
+              ]}>
               <View style={styles.headingContainer}>
                 <Icon
                   name="book-outline"
@@ -516,6 +513,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  container: {
+    width: DDS.isTab ? '50%' : '100%',
+    height: DDS.isTab ? '80%' : '100%',
+    maxHeight: DDS.isTab ? '80%' : '100%',
+    borderRadius: DDS.isTab ? 5 : 0,
+    paddingHorizontal: ph,
+    paddingVertical: pv,
+  },
   overlay: {
     width: '100%',
     height: '100%',

apps/mobile/src/provider/defaultState.js

@@ -22,6 +22,7 @@ export const defaultState = {
     showKeyboardOnOpen: false,
     fontScale: 1,
     forcePortraitOnTablet: false,
+    useSystemTheme:true
   },
   currentScreen: 'home',
   colors: {

apps/mobile/src/views/Settings/index.js

@@ -1,11 +1,33 @@
 import {useIsFocused} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import { Clipboard, Linking, Modal, Platform, ScrollView, StatusBar, Text, TouchableOpacity, View } from 'react-native';
+import {
+  Clipboard,
+  Linking,
+  Modal,
+  Platform,
+  ScrollView,
+  StatusBar,
+  Text,
+  TouchableOpacity,
+  View,
+  Appearance,
+} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 
 import QRCode from 'react-native-qrcode-generator';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { ACCENT, COLOR_SCHEME, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT, opacity, ph, pv, setColorScheme, SIZE, WEIGHT } from '../../common/common';
+import {
+  ACCENT,
+  COLOR_SCHEME,
+  COLOR_SCHEME_DARK,
+  COLOR_SCHEME_LIGHT,
+  opacity,
+  ph,
+  pv,
+  setColorScheme,
+  SIZE,
+  WEIGHT,
+} from '../../common/common';
 import {Toast} from '../../components/Toast';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
@@ -332,7 +354,7 @@ export const Settings = ({route, navigation}) => {
                   ToastEvent.show('Logged out, syncing disabled', 'success');
                 },
               },
-            ].map(item => (
+            ].map((item) => (
               <TouchableOpacity
                 key={item.name}
                 activeOpacity={opacity}
@@ -479,7 +501,7 @@ export const Settings = ({route, navigation}) => {
             '#f032e6',
             '#bcf60c',
             '#fabebe',
-          ].map(item => (
+          ].map((item) => (
             <TouchableOpacity
               key={item}
               onPress={() => {
@@ -510,6 +532,54 @@ export const Settings = ({route, navigation}) => {
             </TouchableOpacity>
           ))}
         </View>
+
+        <TouchableOpacity
+          onPress={async () => {
+            await setSetting(
+              settings,
+              'useSystemTheme',
+              !settings.useSystemTheme,
+            );
+
+            if (!settings.useSystemTheme) {
+              MMKV.setStringAsync(
+                'theme',
+                JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
+              );
+              changeColorScheme(
+                Appearance.getColorScheme() === 'dark'
+                  ? COLOR_SCHEME_DARK
+                  : COLOR_SCHEME_LIGHT,
+              );
+            }
+          }}
+          activeOpacity={opacity}
+          style={{
+            width: '100%',
+            marginHorizontal: 0,
+            paddingVertical: pv + 5,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              textAlignVertical: 'center',
+              color: colors.pri,
+            }}>
+            Use System Dark Mode
+          </Text>
+          <Icon
+            size={SIZE.xl}
+            color={settings.useSystemTheme ? colors.accent : colors.icon}
+            name={
+              settings.useSystemTheme ? 'toggle-switch' : 'toggle-switch-off'
+            }
+          />
+        </TouchableOpacity>
+
         <TouchableOpacity
           onPress={() => {
             if (!colors.night) {
@@ -537,7 +607,7 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Dark mode
+            Dark Mode
           </Text>
           <Icon
             size={SIZE.xl}
@@ -677,7 +747,7 @@ export const Settings = ({route, navigation}) => {
               Linking.openURL('https://www.notesnook.com');
             },
           },
-        ].map(item => (
+        ].map((item) => (
           <TouchableOpacity
             key={item.name}
             activeOpacity={opacity}