add themes & dark mode

apps/mobile/App.js

@@ -12,7 +12,21 @@ import {
   Text,
   Keyboard,
 } from 'react-native';
-import {COLOR_SCHEME, SIZE, opacity, WEIGHT, pv, ph} from './src/common/common';
+import AsyncStorage from '@react-native-community/async-storage';
+import {
+  COLOR_SCHEME,
+  COLOR_SCHEME_DARK,
+  SIZE,
+  opacity,
+  WEIGHT,
+  pv,
+  ph,
+  setColorScheme,
+  onThemeUpdate,
+  clearThemeUpdateListener,
+  COLOR_SCHEME_LIGHT,
+  setAccentColor,
+} from './src/common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ActionButton from 'react-native-action-button';
 import Storage from 'notes-core/api/database';
@@ -22,6 +36,7 @@ import {h, w} from './src/utils/utils';
 import {Toast} from './src/components/Toast';
 import {Menu} from './src/components/Menu';
 import SideMenu from 'react-native-side-menu';
+import {useForceUpdate} from './src/views/ListsEditor';
 const App = () => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [fab, setFab] = useState(true);
@@ -30,11 +45,29 @@ const App = () => {
   const [disableGestures, setDisableGesture] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);
   useEffect(() => {
-    if (Platform.OS === 'android') {
+    let theme = COLOR_SCHEME_LIGHT;
-      StatusBar.setBackgroundColor('transparent');
+    AsyncStorage.getItem('accentColor').then(accentColor => {
-      StatusBar.setTranslucent(true);
+      if (typeof accentColor !== 'string') {
-      StatusBar.setBarStyle('dark-content');
+        AsyncStorage.setItem('accentColor', colors.accent);
+      } else {
+        setAccentColor(accentColor);
       }
+    });
+    AsyncStorage.getItem('theme').then(t => {
+      if (typeof t !== 'string') {
+        AsyncStorage.setItem('theme', JSON.stringify(theme));
+
+        setColorScheme(COLOR_SCHEME_LIGHT);
+      } else {
+        let themeToSet = JSON.parse(t);
+        themeToSet.night
+          ? setColorScheme(COLOR_SCHEME_DARK)
+          : setColorScheme(COLOR_SCHEME_LIGHT);
+        StatusBar.setBarStyle(
+          themeToSet.night ? 'light-content' : 'dark-content',
+        );
+      }
+    });
   }, []);
 
   useEffect(() => {
@@ -110,6 +143,14 @@ const App = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor('transparent');
+      StatusBar.setTranslucent(true);
+      StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
+    }
+  }, []);
+
   return (
     <View
       style={{
@@ -126,7 +167,6 @@ const App = () => {
               width: sidebar,
             }}>
             <Menu
-              colors={colors}
               close={() => {
                 setSidebar('0%');
               }}

apps/mobile/src/common/common.js

@@ -1,38 +1,81 @@
-import Storage from '../utils/storage';
+import {DeviceEventEmitter} from 'react-native';
 //COLOR SCHEME
-
+export const ACCENT = {
-export function setColorScheme(
+  color: '#0560FF',
-  night = false,
+};
-  bg = 'white',
+export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT.color) {
-  fg = '#1790F3',
+  COLOR_SCHEME.bg = colors.bg;
-  nav = '#f2f2f2',
+  COLOR_SCHEME.fg = accent;
-  pri = 'black',
+  COLOR_SCHEME.navbg = colors.navbg;
-  sec = 'white',
+  COLOR_SCHEME.nav = colors.nav;
-  accent = '#1790F3',
+  COLOR_SCHEME.pri = colors.pri;
-  normal = 'black',
+  COLOR_SCHEME.sec = colors.sec;
-  icon = ICONS_COLOR,
-) {
-  COLOR_SCHEME.bg = bg;
-  COLOR_SCHEME.fg = fg;
-  COLOR_SCHEME.nav = nav;
-  COLOR_SCHEME.pri = pri;
-  COLOR_SCHEME.sec = sec;
   COLOR_SCHEME.accent = accent;
-  COLOR_SCHEME.normal = normal;
+  COLOR_SCHEME.normal = colors.normal;
-  COLOR_SCHEME.night = night;
+  COLOR_SCHEME.night = colors.night;
-  COLOR_SCHEME.icon = icon;
+  COLOR_SCHEME.icon = colors.icon;
 
-  return;
+  DeviceEventEmitter.emit('onThemeUpdate');
 }
 
+export function setAccentColor(color) {
+  ACCENT.color = color;
+  DeviceEventEmitter.emit('onThemeUpdate');
+}
+
+export const onThemeUpdate = (func = () => {}) => {
+  return DeviceEventEmitter.addListener('onThemeUpdate', func);
+};
+export const clearThemeUpdateListener = (func = () => {}) => {
+  return DeviceEventEmitter.removeListener('onThemeUpdate', func);
+};
+
 export const COLOR_SCHEME = {
   night: false,
   bg: 'white',
-  fg: '#0560FF',
+  fg: ACCENT.color,
   navbg: '#f6fbfc',
+  nav: '#f0f0f0',
   pri: 'black',
   sec: 'white',
-  accent: '#0560FF',
+  accent: ACCENT.color,
+  normal: 'black',
+  icon: 'gray',
+  errorBg: '#FFD2D2',
+  errorText: '#D8000C',
+  successBg: '#DFF2BF',
+  successText: '#4F8A10',
+  warningBg: '#FEEFB3',
+  warningText: '#9F6000',
+};
+
+export const COLOR_SCHEME_LIGHT = {
+  night: false,
+  bg: 'white',
+  fg: ACCENT.color,
+  navbg: '#f6fbfc',
+  nav: '#f0f0f0',
+  pri: 'black',
+  sec: 'white',
+  accent: ACCENT.color,
+  normal: 'black',
+  icon: 'gray',
+  errorBg: '#FFD2D2',
+  errorText: '#D8000C',
+  successBg: '#DFF2BF',
+  successText: '#4F8A10',
+  warningBg: '#FEEFB3',
+  warningText: '#9F6000',
+};
+export const COLOR_SCHEME_DARK = {
+  night: true,
+  bg: '#1f1f1f',
+  fg: ACCENT.color,
+  navbg: '#1c1c1c',
+  nav: '#2b2b2b',
+  pri: 'white',
+  sec: 'black',
+  accent: ACCENT.color,
   normal: 'black',
   icon: 'gray',
   errorBg: '#FFD2D2',

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

@@ -162,7 +162,7 @@ export const AddNotebookDialog = ({visible, close}) => {
             style={{
               padding: pv - 5,
               borderWidth: 1.5,
-              borderColor: '#f0f0f0',
+              borderColor: colors.nav,
               paddingHorizontal: ph,
               borderRadius: 5,
               fontSize: SIZE.sm,
@@ -258,7 +258,7 @@ export const AddNotebookDialog = ({visible, close}) => {
                 width: '45%',
                 justifyContent: 'center',
                 alignItems: 'center',
-                backgroundColor: '#f0f0f0',
+                backgroundColor: colors.nav,
               }}>
               <Text
                 style={{
@@ -298,7 +298,7 @@ const TopicItem = ({
         alignItems: 'center',
         borderRadius: 5,
         borderWidth: 1.5,
-        borderColor: '#f0f0f0',
+        borderColor: colors.nav,
         paddingHorizontal: ph,
         marginTop: 10,
       }}>

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

@@ -138,7 +138,7 @@ export const Dialog = ({
                 width: '48%',
                 justifyContent: 'center',
                 alignItems: 'center',
-                backgroundColor: '#f0f0f0',
+                backgroundColor: colors.nav,
               }}>
               <Text
                 style={{

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

@@ -26,7 +26,7 @@ export const ListItem = props => {
         marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
         alignSelf: 'center',
         borderRadius: br,
-        backgroundColor: '#f0f0f0',
+        backgroundColor: colors.nav,
 
         marginBottom: 20,
         padding: 5,

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

@@ -19,13 +19,35 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  COLOR_SCHEME_DARK,
+  setColorScheme,
+  COLOR_SCHEME_LIGHT,
+  clearThemeUpdateListener,
+  onThemeUpdate,
 } from '../../common/common';
 
 import Icon from 'react-native-vector-icons/Feather';
 
 import {getElevation, w, h, Toast} from '../../utils/utils';
+import AsyncStorage from '@react-native-community/async-storage';
+import {useForceUpdate} from '../../views/ListsEditor';
 
-export const Menu = ({colors, close = () => {}, hide}) => (
+export const Menu = ({close = () => {}, hide, update = () => {}}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
+
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
+
+  return (
     <SafeAreaView
       style={{
         height: '100%',
@@ -36,6 +58,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
         contentContainerStyle={{
           justifyContent: 'space-between',
           height: '100%',
+          backgroundColor: colors.navbg,
         }}>
         <View>
           <View
@@ -55,6 +78,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
                 name: 'Home',
                 icon: 'home',
                 func: () => NavigationService.navigate('Home'),
+                close: true,
               },
 
               {
@@ -64,34 +88,54 @@ export const Menu = ({colors, close = () => {}, hide}) => (
                   NavigationService.navigate('Folders', {
                     title: 'Notebooks',
                   }),
+                close: true,
               },
               {
                 name: 'Lists',
                 icon: 'list',
                 func: () => NavigationService.navigate('Lists'),
+                close: true,
               },
               {
                 name: 'Favorites',
                 icon: 'star',
                 func: () => NavigationService.navigate('Favorites'),
+                close: true,
               },
 
               {
                 name: 'Dark Mode',
                 icon: 'moon',
-              func: () => NavigationService.navigate('Folders'),
+                func: () => {
+                  if (!colors.night) {
+                    AsyncStorage.setItem(
+                      'theme',
+                      JSON.stringify(COLOR_SCHEME_DARK),
+                    );
+                    setColorScheme(COLOR_SCHEME_DARK);
+                  } else {
+                    AsyncStorage.setItem(
+                      'theme',
+                      JSON.stringify(COLOR_SCHEME_LIGHT),
+                    );
+                    setColorScheme(COLOR_SCHEME_LIGHT);
+                  }
+                },
                 switch: true,
-              on: false,
+                on: colors.night ? true : false,
+                close: false,
               },
               {
                 name: 'Trash',
                 icon: 'trash',
                 func: () => NavigationService.navigate('Trash'),
+                close: true,
               },
               {
                 name: 'Settings',
                 icon: 'settings',
                 func: () => NavigationService.navigate('Settings'),
+                close: true,
               },
             ]}
             keyExtractor={(item, index) => item.name}
@@ -99,7 +143,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
               <TouchableOpacity
                 activeOpacity={opacity}
                 onPress={() => {
-                close();
+                  item.close === false ? null : close();
                   item.func();
                 }}
                 style={{
@@ -128,6 +172,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
                     style={{
                       fontFamily: WEIGHT.medium,
                       fontSize: SIZE.sm - 1,
+                      color: colors.pri,
                     }}>
                     {item.name}
                   </Text>
@@ -177,6 +222,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
                 style={{
                   fontFamily: WEIGHT.medium,
                   fontSize: SIZE.sm - 1,
+                  color: colors.pri,
                 }}>
                 Tags
               </Text>
@@ -394,3 +440,4 @@ export const Menu = ({colors, close = () => {}, hide}) => (
       </ScrollView>
     </SafeAreaView>
   );
+};

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

@@ -51,7 +51,7 @@ const NoteItem = props => {
         width: Platform.isPad ? '95%' : '90%',
         alignSelf: 'center',
         borderBottomWidth: 1,
-        borderBottomColor: '#f0f0f0',
+        borderBottomColor: colors.nav,
       }}>
       <Dialog
         visible={visible}
@@ -151,6 +151,7 @@ const NoteItem = props => {
         <Menu
           style={{
             borderRadius: 5,
+            backgroundColor: colors.nav,
           }}
           ref={ref => (setMenuRef[props.index] = ref)}
           button={

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

@@ -38,7 +38,7 @@ export const NotebookItem = ({
         paddingHorizontal: ph,
         marginHorizontal: '5%',
         borderBottomWidth: 1,
-        borderBottomColor: '#f0f0f0',
+        borderBottomColor: colors.nav,
         paddingVertical: pv,
       }}>
       <View
@@ -224,7 +224,7 @@ export const NotebookItem = ({
               borderRadius: 5,
               width: '20%',
               paddingHorizontal: ph - 5,
-              borderColor: '#f0f0f0',
+              borderColor: colors.nav,
               paddingVertical: pv,
               flexDirection: 'row',
               justifyContent: 'center',

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

@@ -18,6 +18,8 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 
 import Icon from 'react-native-vector-icons/Feather';
@@ -41,6 +43,17 @@ export const RecentList = ({update, onScroll, margin}) => {
     fetchNotes();
   }, [update]);
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      setColors(COLOR_SCHEME);
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        setColors(COLOR_SCHEME);
+      });
+    };
+  }, []);
+
   return (
     <>
       <FlatList
@@ -52,6 +65,7 @@ export const RecentList = ({update, onScroll, margin}) => {
         style={{
           height: '100%',
           width: '100%',
+          backgroundColor: colors.bg,
         }}
         ListHeaderComponent={
           <View

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

@@ -25,7 +25,7 @@ export const Reminder = props => {
         marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
         alignSelf: 'center',
         borderRadius: br,
-        backgroundColor: props.invert ? '#f0f0f0' : colors.accent,
+        backgroundColor: props.invert ? colors.nav : colors.accent,
         paddingHorizontal: ph,
         marginBottom: 20,
         padding: 5,

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

@@ -48,7 +48,7 @@ export const Search = props => {
             ? pv - 3
             : pv - 8,
           marginBottom: props.hide ? 0 : 10,
-          borderColor: focus ? colors.navbg : '#f0f0f0',
+          borderColor: focus ? colors.accent : colors.nav,
           height: props.hide ? 0 : 55,
         }}>
         <TextInput

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

@@ -96,7 +96,7 @@ export const VaultDialog = ({visible, close}) => {
                 style={{
                   padding: pv - 5,
                   borderWidth: 1.5,
-                  borderColor: '#f0f0f0',
+                  borderColor: colors.nav,
                   paddingHorizontal: ph,
                   borderRadius: 5,
                   fontSize: SIZE.sm,
@@ -111,7 +111,7 @@ export const VaultDialog = ({visible, close}) => {
                 style={{
                   padding: pv - 5,
                   borderWidth: 1.5,
-                  borderColor: '#f0f0f0',
+                  borderColor: colors.nav,
                   paddingHorizontal: ph,
                   borderRadius: 5,
                   fontSize: SIZE.sm,
@@ -126,7 +126,7 @@ export const VaultDialog = ({visible, close}) => {
                 style={{
                   padding: pv - 5,
                   borderWidth: 1.5,
-                  borderColor: '#f0f0f0',
+                  borderColor: colors.nav,
                   paddingHorizontal: ph,
                   borderRadius: 5,
                   fontSize: SIZE.sm,
@@ -182,7 +182,7 @@ export const VaultDialog = ({visible, close}) => {
                 width: '45%',
                 justifyContent: 'center',
                 alignItems: 'center',
-                backgroundColor: '#f0f0f0',
+                backgroundColor: colors.nav,
               }}>
               <Text
                 style={{
@@ -222,7 +222,7 @@ const TopicItem = ({
         alignItems: 'center',
         borderRadius: 5,
         borderWidth: 1.5,
-        borderColor: '#f0f0f0',
+        borderColor: colors.nav,
         paddingHorizontal: ph,
         marginTop: 10,
       }}>

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

@@ -44,8 +44,15 @@ export const Header = ({
               justifyContent: 'center',
               alignItems: 'center',
               paddingRight: 15,
+              height: 40,
+              width: 40,
+              marginTop: 5,
             }}>
-            <Icon name={'chevron-left'} size={SIZE.xl} />
+            <Icon
+              color={colors.pri}
+              name={'chevron-left'}
+              size={hide ? SIZE.xl : SIZE.xxl}
+            />
           </TouchableOpacity>
         ) : (
           undefined
@@ -78,7 +85,7 @@ export const Header = ({
             paddingRight: 0,
             marginTop: 7,
           }}>
-          <Icon name={'search'} size={SIZE.xl} />
+          <Icon name={'search'} size={SIZE.xl} color={colors.icon} />
         </TouchableOpacity>
       </Animatable.View>
     </Animatable.View>

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

@@ -20,23 +20,37 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import NoteItem from '../../components/NoteItem';
+import {useForceUpdate} from '../ListsEditor';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const AccountSettings = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
-
+  const forceUpdate = useForceUpdate();
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   return (
     <SafeAreaView
       style={{
         height: '100%',
+        backgroundColor: colors.bg,
       }}>
       <Header colors={colors} heading="" canGoBack={true} />
 
@@ -110,7 +124,7 @@ export const AccountSettings = ({navigation}) => {
               borderBottomWidth: 1,
               width: '90%',
               marginHorizontal: '5%',
-              borderBottomColor: '#f0f0f0',
+              borderBottomColor: colors.nav,
               paddingVertical: pv + 5,
               flexDirection: 'row',
               paddingHorizontal: ph,
@@ -122,6 +136,7 @@ export const AccountSettings = ({navigation}) => {
                 fontSize: SIZE.md,
                 fontFamily: WEIGHT.regular,
                 textAlignVertical: 'center',
+                color: colors.pri,
               }}>
               <Icon name={item.icon} size={SIZE.md} />
               {'  '} {item.name}
@@ -149,9 +164,10 @@ export const AccountSettings = ({navigation}) => {
             fontFamily: WEIGHT.regular,
             color: 'white',
           }}>
+          <Icon size={SIZE.lg} color="white" name="log-out" />
+          {'  '}
           Logout
         </Text>
-        <Icon size={SIZE.lg} color="white" name="log-out" />
       </TouchableOpacity>
     </SafeAreaView>
   );

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

@@ -19,18 +19,32 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
+import {useForceUpdate} from '../ListsEditor';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Favorites = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   return (
     <SafeAreaView>
       <Header colors={colors} heading="Favorites" canGoBack={false} />

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

@@ -21,6 +21,8 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
@@ -40,6 +42,7 @@ export const Folders = ({navigation}) => {
   const [notebooks, setNotebooks] = useState([]);
   const [hideHeader, setHideHeader] = useState(false);
   const [margin, setMargin] = useState(150);
+  const forceUpdate = useForceUpdate();
   const params = navigation.state.params;
   let offsetY = 0;
   let countUp = 0;
@@ -66,10 +69,22 @@ export const Folders = ({navigation}) => {
     console.log(storage.getNotebooks());
   }, []);
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
+
   return (
     <SafeAreaView
       style={{
         height: '100%',
+        backgroundColor: colors.bg,
       }}>
       <AddNotebookDialog
         visible={addNotebook}
@@ -157,12 +172,11 @@ export const Folders = ({navigation}) => {
             setAddNotebook(true);
           }}
           style={{
-            borderWidth: 1,
             borderRadius: 5,
             width: '90%',
             marginHorizontal: '5%',
             paddingHorizontal: ph,
-            borderColor: '#f0f0f0',
+
             paddingVertical: pv + 5,
             flexDirection: 'row',
             justifyContent: 'space-between',

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

@@ -20,6 +20,8 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../../components/Reminder';
@@ -28,10 +30,22 @@ import {getElevation} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
+import {useForceUpdate} from '../ListsEditor';
 
 export const ForgotPassword = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   useEffect(() => {
     DeviceEventEmitter.emit('hide');
     return () => {
@@ -40,7 +54,11 @@ export const ForgotPassword = ({navigation}) => {
   }, []);
 
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        backgroundColor: colors.bg,
+        height: '100%',
+      }}>
       <NavigationEvents
         onWillFocus={() => {
           DeviceEventEmitter.emit('hide');
@@ -95,14 +113,14 @@ const renderForgotPassword = colors => {
           onBlur={() => {
             _email.current.setNativeProps({
               style: {
-                borderColor: '#f0f0f0',
+                borderColor: colors.nav,
               },
             });
           }}
           style={{
             padding: pv,
             borderWidth: 1.5,
-            borderColor: '#f0f0f0',
+            borderColor: colors.nav,
             marginHorizontal: '5%',
             borderRadius: 5,
             fontSize: SIZE.md,

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

@@ -9,7 +9,16 @@ import {
   Text,
   Keyboard,
 } from 'react-native';
-import {COLOR_SCHEME, opacity, pv, br, SIZE, WEIGHT} from '../../common/common';
+import {
+  COLOR_SCHEME,
+  opacity,
+  pv,
+  br,
+  SIZE,
+  WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
+} from '../../common/common';
 import {styles} from './styles';
 import {Search} from '../../components/SearchInput';
 import {RecentList} from '../../components/Recents';
@@ -21,6 +30,7 @@ import {storage} from '../../../App';
 import Icon from 'react-native-vector-icons/Feather';
 import NavigationService from '../../services/NavigationService';
 import {ScrollView} from 'react-native-gesture-handler';
+import {useForceUpdate} from '../ListsEditor';
 export const Home = ({navigation}) => {
   const [loading, setLoading] = useState(true);
   const [colors, setColors] = useState(COLOR_SCHEME);
@@ -31,6 +41,7 @@ export const Home = ({navigation}) => {
   const [hideHeader, setHideHeader] = useState(false);
   const [margin, setMargin] = useState(150);
   const [buttonHide, setButtonHide] = useState(false);
+  const forceUpdate = useForceUpdate();
   let offsetY = 0;
   let countUp = 0;
   let countDown = 0;
@@ -43,6 +54,17 @@ export const Home = ({navigation}) => {
     }, 1000);
   }, []);
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
+
   const onChangeText = value => {
     setText(value);
   };
@@ -138,10 +160,12 @@ export const Home = ({navigation}) => {
     <SafeAreaView
       style={{
         height: '100%',
+        backgroundColor: colors.bg,
       }}>
       <KeyboardAvoidingView
         style={{
           height: '100%',
+          backgroundColor: colors.bg,
         }}>
         <NavigationEvents
           onWillFocus={() => {

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

@@ -20,18 +20,32 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  clearThemeUpdateListener,
+  onThemeUpdate,
 } from '../../common/common';
-import Icon from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {getElevation} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
+import {useForceUpdate} from '../ListsEditor';
 
 export const Login = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   useEffect(() => {
     DeviceEventEmitter.emit('hide');
     return () => {
@@ -47,7 +61,11 @@ export const Login = ({navigation}) => {
   }, []);
 
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        backgroundColor: colors.bg,
+        height: '100%',
+      }}>
       <NavigationEvents
         onWillFocus={() => {
           DeviceEventEmitter.emit('hide');
@@ -102,14 +120,14 @@ const renderLogin = colors => {
           onBlur={() => {
             _email.current.setNativeProps({
               style: {
-                borderColor: '#f0f0f0',
+                borderColor: colors.nav,
               },
             });
           }}
           style={{
             padding: pv,
             borderWidth: 1.5,
-            borderColor: '#f0f0f0',
+            borderColor: colors.nav,
             marginHorizontal: '5%',
             borderRadius: 5,
             fontSize: SIZE.md,
@@ -131,14 +149,14 @@ const renderLogin = colors => {
           onBlur={() => {
             _pass.current.setNativeProps({
               style: {
-                borderColor: '#f0f0f0',
+                borderColor: colors.nav,
               },
             });
           }}
           style={{
             padding: pv,
             borderWidth: 1.5,
-            borderColor: '#f0f0f0',
+            borderColor: colors.nav,
             marginHorizontal: '5%',
             borderRadius: 5,
             fontSize: SIZE.md,

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

@@ -73,7 +73,7 @@ export const Move = ({navigation}) => {
               width: '90%',
               marginHorizontal: '5%',
               paddingHorizontal: ph,
-              borderColor: '#f0f0f0',
+              borderColor: colors.nav,
               paddingVertical: pv + 5,
               flexDirection: 'row',
               justifyContent: 'space-between',

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

@@ -21,6 +21,8 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
@@ -29,6 +31,7 @@ import {Header} from '../../components/header';
 import NoteItem from '../../components/NoteItem';
 import {NotebookItem} from '../../components/NotebookItem';
 import {Search} from '../../components/SearchInput';
+import {useForceUpdate} from '../ListsEditor';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -38,6 +41,7 @@ export const Notebook = ({navigation}) => {
   const params = navigation.state.params;
   const [hideHeader, setHideHeader] = useState(false);
   const [margin, setMargin] = useState(150);
+  const forceUpdate = useForceUpdate();
   let offsetY = 0;
   let countUp = 0;
   let countDown = 0;
@@ -57,10 +61,22 @@ export const Notebook = ({navigation}) => {
       }, 10);
     }
   };
+
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   return (
     <SafeAreaView
       style={{
         height: '100%',
+        backgroundColor: colors.bg,
       }}>
       <KeyboardAvoidingView
         style={{
@@ -132,7 +148,7 @@ export const Notebook = ({navigation}) => {
                     width: '90%',
                     marginHorizontal: '5%',
                     paddingHorizontal: ph,
-                    borderColor: '#f0f0f0',
+                    borderColor: colors.nav,
                     paddingVertical: pv + 5,
                     flexDirection: 'row',
                     justifyContent: 'space-between',
@@ -167,12 +183,10 @@ export const Notebook = ({navigation}) => {
             setAddNotebook(true);
           }}
           style={{
-            borderWidth: 1,
             borderRadius: 5,
             width: '90%',
             marginHorizontal: '5%',
             paddingHorizontal: ph,
-            borderColor: '#f0f0f0',
             paddingVertical: pv + 5,
             flexDirection: 'row',
             justifyContent: 'space-between',

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

@@ -19,19 +19,33 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import {Search} from '../../components/SearchInput';
+import {useForceUpdate} from '../ListsEditor';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Notes = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
   let params = navigation.state ? navigation.state.params : null;
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
 
   useEffect(() => {
     if (!params) {

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

@@ -19,21 +19,45 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  setAccentColor,
+  COLOR_SCHEME_DARK,
+  COLOR_SCHEME_LIGHT,
+  setColorScheme,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import {FlatList} from 'react-native-gesture-handler';
+import AsyncStorage from '@react-native-community/async-storage';
+import {useForceUpdate} from '../ListsEditor';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Settings = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        backgroundColor: colors.bg,
+        height: '100%',
+      }}>
+      <View>
         <Header colors={colors} heading="Settings" canGoBack={false} />
 
         <FlatList
@@ -68,7 +92,7 @@ export const Settings = ({navigation}) => {
                   width: '90%',
                   marginHorizontal: '5%',
                   paddingHorizontal: ph,
-                borderColor: '#f0f0f0',
+                  borderColor: colors.nav,
                   paddingVertical: pv + 5,
                   flexDirection: 'row',
                   justifyContent: 'space-between',
@@ -94,7 +118,7 @@ export const Settings = ({navigation}) => {
                 borderBottomWidth: 1,
                 width: item.step ? '85%' : '90%',
                 marginHorizontal: '5%',
-              borderBottomColor: '#f0f0f0',
+                borderBottomColor: colors.nav,
                 paddingVertical: pv + 5,
                 flexDirection: 'row',
                 paddingHorizontal: ph,
@@ -107,12 +131,17 @@ export const Settings = ({navigation}) => {
                   fontSize: item.step ? SIZE.sm : SIZE.md,
                   fontFamily: WEIGHT.regular,
                   textAlignVertical: 'center',
+                  color: colors.pri,
                 }}>
-              <Icon name={item.icon} size={SIZE.md} />
+                <Icon name={item.icon} size={SIZE.md} color={colors.icon} />
                 {'  '} {item.name}
               </Text>
               {item.switch ? (
-              <Icon name="toggle-right" size={item.step ? SIZE.sm : SIZE.md} />
+                <Icon
+                  name="toggle-right"
+                  color={colors.icon}
+                  size={item.step ? SIZE.sm : SIZE.md}
+                />
               ) : null}
             </TouchableOpacity>
           )}
@@ -123,7 +152,7 @@ export const Settings = ({navigation}) => {
             borderBottomWidth: 1,
             width: '90%',
             marginHorizontal: '5%',
-          borderBottomColor: '#f0f0f0',
+            borderBottomColor: colors.nav,
             paddingVertical: pv + 5,
 
             paddingHorizontal: ph,
@@ -134,6 +163,7 @@ export const Settings = ({navigation}) => {
             style={{
               fontSize: SIZE.md,
               fontFamily: WEIGHT.regular,
+              color: colors.pri,
             }}>
             Accent Color
           </Text>
@@ -148,7 +178,7 @@ export const Settings = ({navigation}) => {
               '#e6194b',
               '#3cb44b',
               '#ffe119',
-            '#1790F3',
+              '#0560FF',
               '#f58231',
               '#911eb4',
               '#46f0f0',
@@ -157,6 +187,13 @@ export const Settings = ({navigation}) => {
               '#fabebe',
             ].map(item => (
               <TouchableOpacity
+                onPress={() => {
+                  setAccentColor(item);
+                  setColorScheme(
+                    colors.night ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT,
+                  );
+                  AsyncStorage.setItem('accentColor', item);
+                }}
                 style={{
                   flexDirection: 'row',
                   justifyContent: 'flex-start',
@@ -173,7 +210,9 @@ export const Settings = ({navigation}) => {
                     justifyContent: 'center',
                     alignItems: 'center',
                   }}>
+                  {colors.accent === item ? (
                     <Icon size={SIZE.lg} color="white" name="check" />
+                  ) : null}
                 </View>
               </TouchableOpacity>
             ))}
@@ -186,7 +225,7 @@ export const Settings = ({navigation}) => {
             borderBottomWidth: 1,
             width: '90%',
             marginHorizontal: '5%',
-          borderBottomColor: '#f0f0f0',
+            borderBottomColor: colors.nav,
             paddingVertical: pv + 5,
             flexDirection: 'row',
             paddingHorizontal: ph,
@@ -197,6 +236,7 @@ export const Settings = ({navigation}) => {
             style={{
               fontSize: SIZE.md,
               fontFamily: WEIGHT.regular,
+              color: colors.pri,
             }}>
             Terms of Service
           </Text>
@@ -208,7 +248,7 @@ export const Settings = ({navigation}) => {
             borderBottomWidth: 1,
             width: '90%',
             marginHorizontal: '5%',
-          borderBottomColor: '#f0f0f0',
+            borderBottomColor: colors.nav,
             paddingVertical: pv + 5,
             flexDirection: 'row',
             paddingHorizontal: ph,
@@ -219,6 +259,7 @@ export const Settings = ({navigation}) => {
             style={{
               fontSize: SIZE.md,
               fontFamily: WEIGHT.regular,
+              color: colors.pri,
             }}>
             Privacy Policy
           </Text>
@@ -230,7 +271,7 @@ export const Settings = ({navigation}) => {
             borderBottomWidth: 1,
             width: '90%',
             marginHorizontal: '5%',
-          borderBottomColor: '#f0f0f0',
+            borderBottomColor: colors.nav,
             paddingVertical: pv + 5,
             flexDirection: 'row',
             paddingHorizontal: ph,
@@ -241,10 +282,12 @@ export const Settings = ({navigation}) => {
             style={{
               fontSize: SIZE.md,
               fontFamily: WEIGHT.regular,
+              color: colors.pri,
             }}>
             About Notes.
           </Text>
         </TouchableOpacity>
+      </View>
     </SafeAreaView>
   );
 };

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

@@ -20,6 +20,8 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../../components/Reminder';
@@ -28,10 +30,22 @@ import {getElevation} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {NavigationEvents} from 'react-navigation';
 import {Header} from '../../components/header';
+import {useForceUpdate} from '../ListsEditor';
 
 export const Signup = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   useEffect(() => {
     DeviceEventEmitter.emit('hide');
     return () => {
@@ -40,7 +54,11 @@ export const Signup = ({navigation}) => {
   }, []);
 
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        height: '100%',
+        backgroundColor: colors.bg,
+      }}>
       <NavigationEvents
         onWillFocus={() => {
           DeviceEventEmitter.emit('hide');
@@ -95,14 +113,14 @@ const renderSignup = colors => {
           onBlur={() => {
             _email.current.setNativeProps({
               style: {
-                borderColor: '#f0f0f0',
+                borderColor: colors.nav,
               },
             });
           }}
           style={{
             padding: pv,
             borderWidth: 1.5,
-            borderColor: '#f0f0f0',
+            borderColor: colors.nav,
             marginHorizontal: '5%',
             borderRadius: 5,
             fontSize: SIZE.md,
@@ -124,14 +142,14 @@ const renderSignup = colors => {
           onBlur={() => {
             _pass.current.setNativeProps({
               style: {
-                borderColor: '#f0f0f0',
+                borderColor: colors.nav,
               },
             });
           }}
           style={{
             padding: pv,
             borderWidth: 1.5,
-            borderColor: '#f0f0f0',
+            borderColor: colors.nav,
             marginHorizontal: '5%',
             borderRadius: 5,
             fontSize: SIZE.md,

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

@@ -20,19 +20,33 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  onThemeUpdate,
+  clearThemeUpdateListener,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import NoteItem from '../../components/NoteItem';
+import {useForceUpdate} from '../ListsEditor';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Tags = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   return (
     <SafeAreaView
       style={{

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

@@ -20,21 +20,38 @@ import {
   opacity,
   FONT,
   WEIGHT,
+  clearThemeUpdateListener,
+  onThemeUpdate,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../../components/Reminder';
 import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import NoteItem from '../../components/NoteItem';
+import {useForceUpdate} from '../ListsEditor';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Trash = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const forceUpdate = useForceUpdate();
 
+  useEffect(() => {
+    onThemeUpdate(() => {
+      forceUpdate();
+    });
+    return () => {
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        backgroundColor: colors.bg,
+      }}>
       <Header colors={colors} heading="Trash" canGoBack={false} />
       <FlatList
         numColumns={2}