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,378 +19,425 @@ 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 = () => {}}) => {
-  <SafeAreaView
+  const [colors, setColors] = useState(COLOR_SCHEME);
-    style={{
+  const forceUpdate = useForceUpdate();
-      height: '100%',
+
-      opacity: hide ? 0 : 1,
+  useEffect(() => {
-      backgroundColor: colors.navbg,
+    onThemeUpdate(() => {
-    }}>
+      forceUpdate();
-    <ScrollView
+    });
-      contentContainerStyle={{
+    return () => {
-        justifyContent: 'space-between',
+      clearThemeUpdateListener(() => {
+        forceUpdate();
+      });
+    };
+  }, []);
+
+  return (
+    <SafeAreaView
+      style={{
         height: '100%',
+        opacity: hide ? 0 : 1,
+        backgroundColor: colors.navbg,
       }}>
-      <View>
+      <ScrollView
-        <View
+        contentContainerStyle={{
-          style={{
+          justifyContent: 'space-between',
-            borderWidth: 1,
+          height: '100%',
-            borderColor: colors.navbg,
+          backgroundColor: colors.navbg,
-            height: 2,
+        }}>
-            backgroundColor: colors.navbg,
+        <View>
-            width: '100%',
-            marginBottom: 5,
-            marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
-          }}
-        />
-        <FlatList
-          data={[
-            {
-              name: 'Home',
-              icon: 'home',
-              func: () => NavigationService.navigate('Home'),
-            },
-
-            {
-              name: 'Notebooks',
-              icon: 'book',
-              func: () =>
-                NavigationService.navigate('Folders', {
-                  title: 'Notebooks',
-                }),
-            },
-            {
-              name: 'Lists',
-              icon: 'list',
-              func: () => NavigationService.navigate('Lists'),
-            },
-            {
-              name: 'Favorites',
-              icon: 'star',
-              func: () => NavigationService.navigate('Favorites'),
-            },
-
-            {
-              name: 'Dark Mode',
-              icon: 'moon',
-              func: () => NavigationService.navigate('Folders'),
-              switch: true,
-              on: false,
-            },
-            {
-              name: 'Trash',
-              icon: 'trash',
-              func: () => NavigationService.navigate('Trash'),
-            },
-            {
-              name: 'Settings',
-              icon: 'settings',
-              func: () => NavigationService.navigate('Settings'),
-            },
-          ]}
-          keyExtractor={(item, index) => item.name}
-          renderItem={({item, index}) => (
-            <TouchableOpacity
-              activeOpacity={opacity}
-              onPress={() => {
-                close();
-                item.func();
-              }}
-              style={{
-                width: '100%',
-                alignSelf: 'center',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'flex-end',
-                paddingHorizontal: ph,
-                paddingVertical: 15,
-              }}>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'flex-end',
-                }}>
-                <Icon
-                  style={{
-                    width: 30,
-                  }}
-                  name={item.icon}
-                  color={colors.icon}
-                  size={SIZE.md}
-                />
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    fontSize: SIZE.sm - 1,
-                  }}>
-                  {item.name}
-                </Text>
-              </View>
-              {item.switch ? (
-                <Icon
-                  size={SIZE.lg}
-                  color={item.on ? colors.accent : colors.icon}
-                  name={item.on ? 'toggle-right' : 'toggle-left'}
-                />
-              ) : (
-                undefined
-              )}
-            </TouchableOpacity>
-          )}
-        />
-
-        <TouchableOpacity
-          onPress={() => {
-            close();
-            NavigationService.navigate('Tags');
-          }}
-          style={{
-            width: '100%',
-            alignSelf: 'center',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'flex-end',
-            paddingHorizontal: ph,
-            marginTop: 15,
-          }}>
           <View
             style={{
-              flexDirection: 'row',
+              borderWidth: 1,
-              justifyContent: 'flex-start',
+              borderColor: colors.navbg,
-              alignItems: 'flex-end',
+              height: 2,
-            }}>
+              backgroundColor: colors.navbg,
-            <Icon
+              width: '100%',
-              style={{
+              marginBottom: 5,
-                width: 30,
+              marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
-              }}
+            }}
-              name="tag"
+          />
-              color={colors.icon}
+          <FlatList
-              size={SIZE.md}
+            data={[
-            />
+              {
-            <Text
+                name: 'Home',
-              style={{
+                icon: 'home',
-                fontFamily: WEIGHT.medium,
+                func: () => NavigationService.navigate('Home'),
-                fontSize: SIZE.sm - 1,
+                close: true,
-              }}>
+              },
-              Tags
-            </Text>
-          </View>
-          <Text
-            style={{
-              fontSize: SIZE.xs,
-              fontFamily: WEIGHT.regular,
-              color: colors.pri,
-            }}>
-            View All
-          </Text>
-        </TouchableOpacity>
 
-        <View
+              {
-          style={{
+                name: 'Notebooks',
-            borderWidth: 1,
+                icon: 'book',
-            borderColor: colors.navbg,
+                func: () =>
-            height: 2,
+                  NavigationService.navigate('Folders', {
-            backgroundColor: colors.navbg,
+                    title: 'Notebooks',
-            width: '100%',
+                  }),
-            marginBottom: 5,
+                close: true,
-          }}
+              },
-        />
+              {
-        <ScrollView
+                name: 'Lists',
-          contentContainerStyle={{
+                icon: 'list',
-            flexDirection: 'row',
+                func: () => NavigationService.navigate('Lists'),
-            flexWrap: 'wrap',
+                close: true,
-            paddingHorizontal: '5%',
+              },
-            marginBottom: 0,
+              {
-          }}>
+                name: 'Favorites',
-          {[
+                icon: 'star',
-            'home',
+                func: () => NavigationService.navigate('Favorites'),
-            'office',
+                close: true,
-            'work',
+              },
-            'book_notes',
+
-            'poem',
+              {
-            'lists',
+                name: 'Dark Mode',
-            'water',
+                icon: 'moon',
-          ].map(item => (
+                func: () => {
-            <TouchableOpacity
+                  if (!colors.night) {
-              onPress={() => {
+                    AsyncStorage.setItem(
-                close();
+                      'theme',
-                NavigationService.navigate('Notes', {
+                      JSON.stringify(COLOR_SCHEME_DARK),
-                  heading: item,
+                    );
-                });
+                    setColorScheme(COLOR_SCHEME_DARK);
-              }}
+                  } else {
+                    AsyncStorage.setItem(
+                      'theme',
+                      JSON.stringify(COLOR_SCHEME_LIGHT),
+                    );
+                    setColorScheme(COLOR_SCHEME_LIGHT);
+                  }
+                },
+                switch: true,
+                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}
+            renderItem={({item, index}) => (
+              <TouchableOpacity
+                activeOpacity={opacity}
+                onPress={() => {
+                  item.close === false ? null : close();
+                  item.func();
+                }}
+                style={{
+                  width: '100%',
+                  alignSelf: 'center',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'flex-end',
+                  paddingHorizontal: ph,
+                  paddingVertical: 15,
+                }}>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'flex-end',
+                  }}>
+                  <Icon
+                    style={{
+                      width: 30,
+                    }}
+                    name={item.icon}
+                    color={colors.icon}
+                    size={SIZE.md}
+                  />
+                  <Text
+                    style={{
+                      fontFamily: WEIGHT.medium,
+                      fontSize: SIZE.sm - 1,
+                      color: colors.pri,
+                    }}>
+                    {item.name}
+                  </Text>
+                </View>
+                {item.switch ? (
+                  <Icon
+                    size={SIZE.lg}
+                    color={item.on ? colors.accent : colors.icon}
+                    name={item.on ? 'toggle-right' : 'toggle-left'}
+                  />
+                ) : (
+                  undefined
+                )}
+              </TouchableOpacity>
+            )}
+          />
+
+          <TouchableOpacity
+            onPress={() => {
+              close();
+              NavigationService.navigate('Tags');
+            }}
+            style={{
+              width: '100%',
+              alignSelf: 'center',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'flex-end',
+              paddingHorizontal: ph,
+              marginTop: 15,
+            }}>
+            <View
               style={{
                 flexDirection: 'row',
                 justifyContent: 'flex-start',
-                alignItems: 'center',
+                alignItems: 'flex-end',
-                margin: 5,
               }}>
+              <Icon
+                style={{
+                  width: 30,
+                }}
+                name="tag"
+                color={colors.icon}
+                size={SIZE.md}
+              />
               <Text
                 style={{
-                  fontFamily: WEIGHT.regular,
+                  fontFamily: WEIGHT.medium,
-                  fontSize: SIZE.sm - 2,
+                  fontSize: SIZE.sm - 1,
-                  color: colors.icon,
+                  color: colors.pri,
                 }}>
-                #{item}
+                Tags
               </Text>
-            </TouchableOpacity>
+            </View>
-          ))}
+            <Text
-        </ScrollView>
+              style={{
+                fontSize: SIZE.xs,
+                fontFamily: WEIGHT.regular,
+                color: colors.pri,
+              }}>
+              View All
+            </Text>
+          </TouchableOpacity>
 
-        <View
+          <View
-          style={{
+            style={{
-            borderWidth: 1,
+              borderWidth: 1,
-            borderColor: colors.navbg,
+              borderColor: colors.navbg,
-            height: 2,
+              height: 2,
-            backgroundColor: colors.navbg,
+              backgroundColor: colors.navbg,
-            width: '100%',
+              width: '100%',
-            marginBottom: 5,
+              marginBottom: 5,
-          }}
+            }}
-        />
+          />
-        <ScrollView
+          <ScrollView
-          contentContainerStyle={{
+            contentContainerStyle={{
-            flexDirection: 'row',
+              flexDirection: 'row',
-            flexWrap: 'wrap',
+              flexWrap: 'wrap',
-            paddingHorizontal: '5%',
+              paddingHorizontal: '5%',
-            marginBottom: 15,
+              marginBottom: 0,
-          }}>
+            }}>
-          {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
+            {[
-            item => (
+              'home',
+              'office',
+              'work',
+              'book_notes',
+              'poem',
+              'lists',
+              'water',
+            ].map(item => (
               <TouchableOpacity
+                onPress={() => {
+                  close();
+                  NavigationService.navigate('Notes', {
+                    heading: item,
+                  });
+                }}
                 style={{
                   flexDirection: 'row',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
                   margin: 5,
                 }}>
-                <View
+                <Text
                   style={{
-                    width: 25,
+                    fontFamily: WEIGHT.regular,
-                    height: 25,
+                    fontSize: SIZE.sm - 2,
-                    backgroundColor: item,
+                    color: colors.icon,
-                    borderRadius: 100,
+                  }}>
-                  }}
+                  #{item}
-                />
+                </Text>
               </TouchableOpacity>
-            ),
+            ))}
-          )}
+          </ScrollView>
-        </ScrollView>
-      </View>
 
-      {/*  <View
+          <View
             style={{
-              backgroundColor: '#F3A712',
+              borderWidth: 1,
-              width: '90%',
+              borderColor: colors.navbg,
-              alignSelf: 'center',
+              height: 2,
-              borderRadius: 5,
+              backgroundColor: colors.navbg,
+              width: '100%',
+              marginBottom: 5,
+            }}
+          />
+          <ScrollView
+            contentContainerStyle={{
               flexDirection: 'row',
-              justifyContent: 'space-between',
+              flexWrap: 'wrap',
-              alignItems: 'center',
+              paddingHorizontal: '5%',
-              height: 40,
+              marginBottom: 15,
-              paddingHorizontal: ph,
-              marginVertical: 10,
             }}>
-            <Text
+            {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
-              style={{
+              item => (
-                fontFamily: WEIGHT.medium,
+                <TouchableOpacity
-                color: 'white',
+                  style={{
-              }}>
+                    flexDirection: 'row',
-              Upgrade to Pro
+                    justifyContent: 'flex-start',
-            </Text>
+                    alignItems: 'center',
+                    margin: 5,
+                  }}>
+                  <View
+                    style={{
+                      width: 25,
+                      height: 25,
+                      backgroundColor: item,
+                      borderRadius: 100,
+                    }}
+                  />
+                </TouchableOpacity>
+              ),
+            )}
+          </ScrollView>
+        </View>
 
-            <View
+        {/*  <View
-              style={{
-                ...getElevation(5),
-                paddingHorizontal: ph,
-                backgroundColor: 'white',
-                paddingVertical: pv - 8,
-                borderRadius: 5,
-              }}>
-              <Icon name="star" color="#FCBA04" size={SIZE.lg} />
-            </View>
-          </View> */}
-
-      <View
-        style={{
-          width: '100%',
-          justifyContent: 'space-between',
-          paddingHorizontal: '5%',
-          alignItems: 'center',
-          alignSelf: 'center',
-          marginBottom: 20,
-          flexDirection: 'row',
-        }}>
-        <TouchableOpacity
-          onPress={() => {
-            close();
-
-            NavigationService.navigate('Login');
-          }}
-          activeOpacity={opacity}
           style={{
-            paddingVertical: pv,
+            backgroundColor: '#F3A712',
-            paddingHorizontal: ph,
+            width: '90%',
+            alignSelf: 'center',
             borderRadius: 5,
-            width: '100%',
+            flexDirection: 'row',
-            justifyContent: 'center',
+            justifyContent: 'space-between',
             alignItems: 'center',
-            borderColor: colors.accent,
+            height: 40,
-            backgroundColor: colors.accent,
+            paddingHorizontal: ph,
-            borderWidth: 1,
+            marginVertical: 10,
           }}>
           <Text
             style={{
               fontFamily: WEIGHT.medium,
               color: 'white',
-              fontSize: SIZE.sm,
             }}>
-            Login to Sync
+            Upgrade to Pro
           </Text>
-        </TouchableOpacity>
 
-        {/* <Text
+          <View
+            style={{
+              ...getElevation(5),
+              paddingHorizontal: ph,
+              backgroundColor: 'white',
+              paddingVertical: pv - 8,
+              borderRadius: 5,
+            }}>
+            <Icon name="star" color="#FCBA04" size={SIZE.lg} />
+          </View>
+        </View> */}
+
+        <View
           style={{
-            fontFamily: WEIGHT.semibold,
+            width: '100%',
-            color: colors.accent,
+            justifyContent: 'space-between',
-            fontSize: SIZE.md,
+            paddingHorizontal: '5%',
-            marginTop: 10,
+            alignItems: 'center',
+            alignSelf: 'center',
+            marginBottom: 20,
+            flexDirection: 'row',
           }}>
-          Hi, Ammar!
+          <TouchableOpacity
-        </Text>
+            onPress={() => {
+              close();
 
+              NavigationService.navigate('Login');
+            }}
+            activeOpacity={opacity}
+            style={{
+              paddingVertical: pv,
+              paddingHorizontal: ph,
+              borderRadius: 5,
+              width: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderColor: colors.accent,
+              backgroundColor: colors.accent,
+              borderWidth: 1,
+            }}>
+            <Text
+              style={{
+                fontFamily: WEIGHT.medium,
+                color: 'white',
+                fontSize: SIZE.sm,
+              }}>
+              Login to Sync
+            </Text>
+          </TouchableOpacity>
+
+          {/* <Text
+        style={{
+          fontFamily: WEIGHT.semibold,
+          color: colors.accent,
+          fontSize: SIZE.md,
+          marginTop: 10,
+        }}>
+        Hi, Ammar!
+      </Text>
+
+      <Text
+        style={{
+          fontFamily: WEIGHT.regular,
+          color: colors.accent,
+          fontSize: SIZE.xs,
+          marginTop: 10,
+        }}>
+        80.45/100 MB
+      </Text> */}
+
+          {/*  <View
+        style={{
+          borderRadius: 2.5,
+          backgroundColor: colors.accent,
+          marginTop: 10,
+          paddingHorizontal: 5,
+          paddingVertical: 2,
+        }}>
         <Text
           style={{
-            fontFamily: WEIGHT.regular,
+            fontFamily: WEIGHT.bold,
-            color: colors.accent,
+            fontSize: SIZE.xxs,
-            fontSize: SIZE.xs,
+            color: 'white',
-            marginTop: 10,
           }}>
-          80.45/100 MB
+          Basic User
-        </Text> */}
+        </Text>
-
+      </View> */}
-        {/*  <View
+        </View>
-          style={{
+      </ScrollView>
-            borderRadius: 2.5,
+    </SafeAreaView>
-            backgroundColor: colors.accent,
+  );
-            marginTop: 10,
+};
-            paddingHorizontal: 5,
-            paddingVertical: 2,
-          }}>
-          <Text
-            style={{
-              fontFamily: WEIGHT.bold,
-              fontSize: SIZE.xxs,
-              color: 'white',
-            }}>
-            Basic User
-          </Text>
-        </View> */}
-      </View>
-    </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,232 +19,275 @@ 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
-      <Header colors={colors} heading="Settings" canGoBack={false} />
+      style={{
+        backgroundColor: colors.bg,
+        height: '100%',
+      }}>
+      <View>
+        <Header colors={colors} heading="Settings" canGoBack={false} />
 
-      <FlatList
+        <FlatList
-        data={[
+          data={[
-          {
+            {
-            name: 'Sync',
+              name: 'Sync',
-            icon: 'refresh-ccw',
+              icon: 'refresh-ccw',
-            switch: true,
+              switch: true,
-          },
+            },
-          {
+            {
-            name: 'Dark Mode',
+              name: 'Dark Mode',
-            icon: 'moon',
+              icon: 'moon',
-            switch: true,
+              switch: true,
-          },
+            },
-          {
+            {
-            name: 'Sunset to Sunrise',
+              name: 'Sunset to Sunrise',
-            icon: null,
+              icon: null,
-            switch: true,
+              switch: true,
-            step: true,
+              step: true,
-          },
+            },
-        ]}
+          ]}
-        ListHeaderComponent={
+          ListHeaderComponent={
-          <View>
+            <View>
+              <TouchableOpacity
+                activeOpacity={opacity}
+                onPress={() => {
+                  NavigationService.navigate('AccountSettings');
+                }}
+                style={{
+                  borderWidth: 1,
+                  borderRadius: 5,
+                  width: '90%',
+                  marginHorizontal: '5%',
+                  paddingHorizontal: ph,
+                  borderColor: colors.nav,
+                  paddingVertical: pv + 5,
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginBottom: 10,
+                  backgroundColor: colors.bg,
+                }}>
+                <Text
+                  style={{
+                    fontSize: SIZE.md,
+                    fontFamily: WEIGHT.regular,
+                    color: colors.pri,
+                  }}>
+                  My Account
+                </Text>
+              </TouchableOpacity>
+            </View>
+          }
+          renderItem={({item, index}) => (
             <TouchableOpacity
               activeOpacity={opacity}
-              onPress={() => {
-                NavigationService.navigate('AccountSettings');
-              }}
               style={{
-                borderWidth: 1,
+                borderBottomWidth: 1,
-                borderRadius: 5,
+                width: item.step ? '85%' : '90%',
-                width: '90%',
                 marginHorizontal: '5%',
-                paddingHorizontal: ph,
+                borderBottomColor: colors.nav,
-                borderColor: '#f0f0f0',
                 paddingVertical: pv + 5,
                 flexDirection: 'row',
+                paddingHorizontal: ph,
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                marginBottom: 10,
+                marginLeft: item.step ? '10%' : '5%',
-                backgroundColor: colors.bg,
               }}>
               <Text
                 style={{
-                  fontSize: SIZE.md,
+                  fontSize: item.step ? SIZE.sm : SIZE.md,
                   fontFamily: WEIGHT.regular,
+                  textAlignVertical: 'center',
                   color: colors.pri,
                 }}>
-                My Account
+                <Icon name={item.icon} size={SIZE.md} color={colors.icon} />
+                {'  '} {item.name}
               </Text>
+              {item.switch ? (
+                <Icon
+                  name="toggle-right"
+                  color={colors.icon}
+                  size={item.step ? SIZE.sm : SIZE.md}
+                />
+              ) : null}
             </TouchableOpacity>
-          </View>
+          )}
-        }
+        />
-        renderItem={({item, index}) => (
+
-          <TouchableOpacity
+        <View
-            activeOpacity={opacity}
+          style={{
+            borderBottomWidth: 1,
+            width: '90%',
+            marginHorizontal: '5%',
+            borderBottomColor: colors.nav,
+            paddingVertical: pv + 5,
+
+            paddingHorizontal: ph,
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+          }}>
+          <Text
             style={{
-              borderBottomWidth: 1,
+              fontSize: SIZE.md,
-              width: item.step ? '85%' : '90%',
+              fontFamily: WEIGHT.regular,
-              marginHorizontal: '5%',
+              color: colors.pri,
-              borderBottomColor: '#f0f0f0',
-              paddingVertical: pv + 5,
-              flexDirection: 'row',
-              paddingHorizontal: ph,
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              marginLeft: item.step ? '10%' : '5%',
             }}>
-            <Text
+            Accent Color
-              style={{
+          </Text>
-                fontSize: item.step ? SIZE.sm : SIZE.md,
-                fontFamily: WEIGHT.regular,
-                textAlignVertical: 'center',
-              }}>
-              <Icon name={item.icon} size={SIZE.md} />
-              {'  '} {item.name}
-            </Text>
-            {item.switch ? (
-              <Icon name="toggle-right" size={item.step ? SIZE.sm : SIZE.md} />
-            ) : null}
-          </TouchableOpacity>
-        )}
-      />
 
-      <View
+          <ScrollView
-        style={{
+            contentContainerStyle={{
-          borderBottomWidth: 1,
+              flexDirection: 'row',
-          width: '90%',
+              flexWrap: 'wrap',
-          marginHorizontal: '5%',
+              marginTop: 10,
-          borderBottomColor: '#f0f0f0',
+            }}>
-          paddingVertical: pv + 5,
+            {[
-
+              '#e6194b',
-          paddingHorizontal: ph,
+              '#3cb44b',
-          justifyContent: 'space-between',
+              '#ffe119',
-          alignItems: 'flex-start',
+              '#0560FF',
-        }}>
+              '#f58231',
-        <Text
+              '#911eb4',
-          style={{
+              '#46f0f0',
-            fontSize: SIZE.md,
+              '#f032e6',
-            fontFamily: WEIGHT.regular,
+              '#bcf60c',
-          }}>
+              '#fabebe',
-          Accent Color
+            ].map(item => (
-        </Text>
+              <TouchableOpacity
-
+                onPress={() => {
-        <ScrollView
+                  setAccentColor(item);
-          contentContainerStyle={{
+                  setColorScheme(
-            flexDirection: 'row',
+                    colors.night ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT,
-            flexWrap: 'wrap',
+                  );
-            marginTop: 10,
+                  AsyncStorage.setItem('accentColor', item);
-          }}>
+                }}
-          {[
-            '#e6194b',
-            '#3cb44b',
-            '#ffe119',
-            '#1790F3',
-            '#f58231',
-            '#911eb4',
-            '#46f0f0',
-            '#f032e6',
-            '#bcf60c',
-            '#fabebe',
-          ].map(item => (
-            <TouchableOpacity
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                marginRight: 10,
-                marginVertical: 5,
-              }}>
-              <View
                 style={{
-                  width: 45,
+                  flexDirection: 'row',
-                  height: 45,
+                  justifyContent: 'flex-start',
-                  backgroundColor: item,
-                  borderRadius: 100,
-                  justifyContent: 'center',
                   alignItems: 'center',
+                  marginRight: 10,
+                  marginVertical: 5,
                 }}>
-                <Icon size={SIZE.lg} color="white" name="check" />
+                <View
-              </View>
+                  style={{
-            </TouchableOpacity>
+                    width: 45,
-          ))}
+                    height: 45,
-        </ScrollView>
+                    backgroundColor: item,
+                    borderRadius: 100,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}>
+                  {colors.accent === item ? (
+                    <Icon size={SIZE.lg} color="white" name="check" />
+                  ) : null}
+                </View>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+
+        <TouchableOpacity
+          activeOpacity={opacity}
+          style={{
+            borderBottomWidth: 1,
+            width: '90%',
+            marginHorizontal: '5%',
+            borderBottomColor: colors.nav,
+            paddingVertical: pv + 5,
+            flexDirection: 'row',
+            paddingHorizontal: ph,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.md,
+              fontFamily: WEIGHT.regular,
+              color: colors.pri,
+            }}>
+            Terms of Service
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          activeOpacity={opacity}
+          style={{
+            borderBottomWidth: 1,
+            width: '90%',
+            marginHorizontal: '5%',
+            borderBottomColor: colors.nav,
+            paddingVertical: pv + 5,
+            flexDirection: 'row',
+            paddingHorizontal: ph,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.md,
+              fontFamily: WEIGHT.regular,
+              color: colors.pri,
+            }}>
+            Privacy Policy
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          activeOpacity={opacity}
+          style={{
+            borderBottomWidth: 1,
+            width: '90%',
+            marginHorizontal: '5%',
+            borderBottomColor: colors.nav,
+            paddingVertical: pv + 5,
+            flexDirection: 'row',
+            paddingHorizontal: ph,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.md,
+              fontFamily: WEIGHT.regular,
+              color: colors.pri,
+            }}>
+            About Notes.
+          </Text>
+        </TouchableOpacity>
       </View>
-
-      <TouchableOpacity
-        activeOpacity={opacity}
-        style={{
-          borderBottomWidth: 1,
-          width: '90%',
-          marginHorizontal: '5%',
-          borderBottomColor: '#f0f0f0',
-          paddingVertical: pv + 5,
-          flexDirection: 'row',
-          paddingHorizontal: ph,
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}>
-        <Text
-          style={{
-            fontSize: SIZE.md,
-            fontFamily: WEIGHT.regular,
-          }}>
-          Terms of Service
-        </Text>
-      </TouchableOpacity>
-
-      <TouchableOpacity
-        activeOpacity={opacity}
-        style={{
-          borderBottomWidth: 1,
-          width: '90%',
-          marginHorizontal: '5%',
-          borderBottomColor: '#f0f0f0',
-          paddingVertical: pv + 5,
-          flexDirection: 'row',
-          paddingHorizontal: ph,
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}>
-        <Text
-          style={{
-            fontSize: SIZE.md,
-            fontFamily: WEIGHT.regular,
-          }}>
-          Privacy Policy
-        </Text>
-      </TouchableOpacity>
-
-      <TouchableOpacity
-        activeOpacity={opacity}
-        style={{
-          borderBottomWidth: 1,
-          width: '90%',
-          marginHorizontal: '5%',
-          borderBottomColor: '#f0f0f0',
-          paddingVertical: pv + 5,
-          flexDirection: 'row',
-          paddingHorizontal: ph,
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}>
-        <Text
-          style={{
-            fontSize: SIZE.md,
-            fontFamily: WEIGHT.regular,
-          }}>
-          About Notes.
-        </Text>
-      </TouchableOpacity>
     </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}