From 792e1b0af6d3ad83f84e8568eda08266c37d5cd5 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Mon, 7 Sep 2020 15:55:24 +0500 Subject: [PATCH] add support to change theme based on system --- apps/mobile/App.js | 32 +++++- apps/mobile/src/common/common.js | 11 +- .../src/components/AddNotebookDialog/index.js | 25 +++-- apps/mobile/src/provider/defaultState.js | 1 + apps/mobile/src/views/Settings/index.js | 100 +++++++++++++++--- 5 files changed, 139 insertions(+), 30 deletions(-) diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 456276397..a7da5240b 100644 --- a/apps/mobile/App.js +++ b/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}); } diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js index 2c8fab22d..fb346dda8 100755 --- a/apps/mobile/src/common/common.js +++ b/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); diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js index fe29a44bb..85ff3b9c7 100644 --- a/apps/mobile/src/components/AddNotebookDialog/index.js +++ b/apps/mobile/src/components/AddNotebookDialog/index.js @@ -258,22 +258,19 @@ export class AddNotebookDialog extends React.Component { style={styles.wrapper}> + style={[ + styles.container, + { + backgroundColor: colors.bg, + }, + ]}> - + {toEdit && toEdit.dateCreated ? 'Edit Notebook' : 'New Notebook'} @@ -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%', diff --git a/apps/mobile/src/provider/defaultState.js b/apps/mobile/src/provider/defaultState.js index 2a3efa738..12e70ed57 100644 --- a/apps/mobile/src/provider/defaultState.js +++ b/apps/mobile/src/provider/defaultState.js @@ -22,6 +22,7 @@ export const defaultState = { showKeyboardOnOpen: false, fontScale: 1, forcePortraitOnTablet: false, + useSystemTheme:true }, currentScreen: 'home', colors: { diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index cc2d26f18..876dd0393 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -1,19 +1,41 @@ -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 {useIsFocused} from '@react-navigation/native'; +import React, {useEffect, useState} from 'react'; +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 { Toast } from '../../components/Toast'; -import { useTracked } from '../../provider'; -import { ACTIONS } from '../../provider/actions'; -import { eSendEvent } from '../../services/eventManager'; -import { eOpenLoginDialog, eResetApp } from '../../services/events'; +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'; +import {eSendEvent} from '../../services/eventManager'; +import {eOpenLoginDialog, eResetApp} from '../../services/events'; import NavigationService from '../../services/NavigationService'; -import { db, DDS, setSetting, ToastEvent, w } from '../../utils/utils'; -import { MMKV } from '../../utils/storage'; +import {db, DDS, setSetting, ToastEvent, w} from '../../utils/utils'; +import {MMKV} from '../../utils/storage'; export const Settings = ({route, navigation}) => { const [state, dispatch] = useTracked(); @@ -332,7 +354,7 @@ export const Settings = ({route, navigation}) => { ToastEvent.show('Logged out, syncing disabled', 'success'); }, }, - ].map(item => ( + ].map((item) => ( { '#f032e6', '#bcf60c', '#fabebe', - ].map(item => ( + ].map((item) => ( { @@ -510,6 +532,54 @@ export const Settings = ({route, navigation}) => { ))} + + { + 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', + }}> + + Use System Dark Mode + + + + { if (!colors.night) { @@ -537,7 +607,7 @@ export const Settings = ({route, navigation}) => { textAlignVertical: 'center', color: colors.pri, }}> - Dark mode + Dark Mode { Linking.openURL('https://www.notesnook.com'); }, }, - ].map(item => ( + ].map((item) => (