diff --git a/app/App.tsx b/app/App.tsx
index fc6433e..1df94e8 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Platform } from "react-native";
-import { StatusBar } from "expo-status-bar";
+import { AppearanceProvider, useColorScheme } from "react-native-appearance";
+import { StatusBar, StatusBarStyle } from "expo-status-bar";
 import App from "./src/App";
 
 const editorSource =
@@ -9,10 +10,14 @@ const editorSource =
     : { html: null };
 
 export default function Root() {
+  const isDark = useColorScheme() === "dark";
+  const style: StatusBarStyle = isDark ? "light" : "dark";
   return (
-    <>
-      <StatusBar style="dark" />
-      <App editorSource={editorSource} />
-    </>
+    <AppearanceProvider>
+      <>
+        <StatusBar style={style} />
+        <App editorSource={editorSource} />
+      </>
+    </AppearanceProvider>
   );
 }
diff --git a/app/app.config.js b/app/app.config.js
index 857336d..f7bf4b9 100644
--- a/app/app.config.js
+++ b/app/app.config.js
@@ -7,6 +7,7 @@ export default {
     version: "1.6.6",
     orientation: "portrait",
     icon: "./src/assets/icon.png",
+    userInterfaceStyle: "automatic",
     splash: {
       image: "./src/assets/splash.png",
       resizeMode: "contain",
diff --git a/app/package.json b/app/package.json
index f0efe2f..b3a0852 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,7 +1,7 @@
 {
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "API_URL=http://localhost:4000/graphql expo start",
+    "start": "API_URL=https://api.serenity.re/graphql expo start",
     "start:prod": "expo start",
     "eject": "expo eject",
     "test": "jest",
@@ -33,6 +33,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-appearance": "^0.3.4",
     "react-native-elements": "^3.3.2",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-get-random-values": "~1.7.0",
diff --git a/app/src/components/Navigation.tsx b/app/src/components/Navigation.tsx
index 4302fc8..40ee443 100644
--- a/app/src/components/Navigation.tsx
+++ b/app/src/components/Navigation.tsx
@@ -1,15 +1,11 @@
 import React from "react";
-import { NavigationContainer } from "@react-navigation/native";
+import { NavigationContainer, Theme } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 
 import { Icon, ThemeProvider } from "react-native-elements";
-import {
-  DefaultTheme,
-  Provider as PaperProvider,
-  configureFonts,
-} from "react-native-paper";
+import { Provider as PaperProvider } from "react-native-paper";
 import HomeScreen from "./screens/HomeScreen";
 import NoteScreen from "./screens/NoteScreen";
 import SettingsScreen from "./screens/SettingsScreen";
@@ -33,22 +29,30 @@ import useDevice from "../hooks/useDevice";
 import useUser from "../hooks/useUser";
 import fetchAllLicenseTokens from "../utils/server/fetchAllLicenseTokens";
 import { useClient } from "urql";
-import colors from "../styles/colors";
+import { legacyColors } from "../styles/legacyColors";
 import GoodbyeScreen from "./screens/GoodbyeScreen";
 import DebugScreen from "./screens/DebugScreen";
 import { sizes } from "../styles/fonts";
 import { Platform } from "react-native";
+import useCurrentTheme, { DerivedTheme } from "../hooks/useCurrentTheme";
+import { NoteStackParamsList } from "./NavigationTypes";
 
 const RootStack = createStackNavigator();
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<NoteStackParamsList>();
 const Tab = createBottomTabNavigator();
 const Drawer = createDrawerNavigator();
 
-const theme = {
-  colors: {
-    primary: colors.text,
+const getHeaderOptions = (theme: DerivedTheme) => ({
+  headerTintColor: theme.colors.primary,
+  headerTitleStyle: {
+    color: theme.colors.text,
   },
-};
+  headerStyle: {
+    backgroundColor: theme.colors.background,
+    shadowColor: "transparent",
+    elevation: 0,
+  },
+});
 
 const fontConfig = {
   macos: {
@@ -71,30 +75,9 @@ const fontConfig = {
   },
 };
 
-const nativePaperTheme = {
-  ...DefaultTheme,
-  fonts: configureFonts(fontConfig),
-  colors: {
-    ...DefaultTheme.colors,
-    primary: colors.text,
-    accent: colors.textBrightest,
-  },
-};
-
-const headerOptions = {
-  headerTintColor: colors.primary,
-  headerTitleStyle: {
-    color: colors.text,
-  },
-  headerStyle: {
-    backgroundColor: colors.background,
-    shadowColor: "transparent",
-    borderBottomWidth: 0,
-    elevation: 0,
-  },
-};
-
 function Notes() {
+  const theme = useCurrentTheme();
+  const headerOptions = getHeaderOptions(theme);
   return (
     <Stack.Navigator screenOptions={headerOptions}>
       <Stack.Screen
@@ -123,6 +106,8 @@ function Notes() {
 }
 
 function Settings() {
+  const theme = useCurrentTheme();
+  const headerOptions = getHeaderOptions(theme);
   return (
     <Stack.Navigator screenOptions={headerOptions}>
       <Stack.Screen
@@ -155,6 +140,8 @@ function Settings() {
 }
 
 function Contacts() {
+  const theme = useCurrentTheme();
+  const headerOptions = getHeaderOptions(theme);
   return (
     <Stack.Navigator screenOptions={headerOptions}>
       <Stack.Screen
@@ -187,11 +174,13 @@ function Contacts() {
 }
 
 function MainApp() {
+  const theme = useCurrentTheme();
+
   return (
     <Tab.Navigator
       tabBarOptions={{
-        inactiveTintColor: colors.text,
-        activeTintColor: colors.primary,
+        inactiveTintColor: theme.colors.text,
+        activeTintColor: theme.colors.primary,
         style: {
           // // https://ethercreative.github.io/react-native-shadow-generator/
           shadowColor: "#000",
@@ -241,17 +230,18 @@ function MainApp() {
 }
 
 function MainAppMacos() {
+  const theme = useCurrentTheme();
   return (
     <Drawer.Navigator
       drawerType="permanent"
       drawerStyle={{
-        backgroundColor: colors.backgroundDesktopSidebar,
+        backgroundColor: legacyColors.backgroundDesktopSidebar,
         width: 200,
       }}
       drawerContentOptions={{
-        inactiveTintColor: colors.text,
-        activeTintColor: colors.primary,
-        activeBackgroundColor: colors.backgroundDesktopSidebar,
+        inactiveTintColor: theme.colors.text,
+        activeTintColor: theme.colors.primary,
+        activeBackgroundColor: legacyColors.backgroundDesktopSidebar,
         labelStyle: {
           fontSize: sizes.medium,
           marginTop: 3,
@@ -313,6 +303,7 @@ function MainAppMacos() {
 }
 
 export default function Navigation() {
+  const theme = useCurrentTheme();
   const deviceResult = useDevice();
   const userResult = useUser();
   const { encryptAndUploadAllRepositories } = useSync();
@@ -333,11 +324,13 @@ export default function Navigation() {
   if (deviceResult.type === "loading" || userResult.type === "loading")
     return null;
 
+  const headerOptions = getHeaderOptions(theme);
+
   return (
     <UtilsProvider value={{ encryptAndUploadAllRepositories }}>
-      <PaperProvider theme={nativePaperTheme}>
+      <PaperProvider theme={theme}>
         <ThemeProvider theme={theme}>
-          <NavigationContainer>
+          <NavigationContainer theme={(theme as any) as Theme}>
             <RootStack.Navigator
               screenOptions={headerOptions}
               initialRouteName={
diff --git a/app/src/components/NavigationTypes.tsx b/app/src/components/NavigationTypes.tsx
new file mode 100644
index 0000000..873b6a3
--- /dev/null
+++ b/app/src/components/NavigationTypes.tsx
@@ -0,0 +1,18 @@
+import { StackNavigationProp } from "@react-navigation/stack";
+import { RouteProp } from "@react-navigation/native";
+
+export type NoteStackParamsList = {
+  Notes: undefined;
+  Note: {
+    id: string;
+    isNew: boolean;
+  };
+  AddCollaboratorToNote: { repositoryId: string };
+  NoteSettings: { id: string };
+  NoteCollaborator: { repositoryId: string; collaboratorId: string };
+};
+
+export type NoteStackProps<T extends keyof NoteStackParamsList> = {
+  navigation: StackNavigationProp<NoteStackParamsList, T>;
+  route: RouteProp<NoteStackParamsList, T>;
+};
diff --git a/app/src/components/screens/ContactsScreen.tsx b/app/src/components/screens/ContactsScreen.tsx
index 3e02d45..7e2327f 100644
--- a/app/src/components/screens/ContactsScreen.tsx
+++ b/app/src/components/screens/ContactsScreen.tsx
@@ -6,14 +6,14 @@ import usePrivateInfo from "../../hooks/usePrivateInfo";
 import useContactsAndContactInvitations from "../../hooks/useContactsAndContactInvitations";
 import ListItemButton from "../ui/ListItemButton";
 import ListItemLink from "../ui/ListItemLink";
-import colors from "../../styles/colors";
 import ListItemDivider from "../ui/ListItemDivider";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     width: "100%",
-    backgroundColor: colors.background,
+    paddingTop: 16,
   },
   sectionTitle: {
     fontSize: 14,
@@ -22,6 +22,7 @@ const styles = StyleSheet.create({
 });
 
 export default function ContactsScreen({ navigation }) {
+  const theme = useCurrentTheme();
   const deviceResult = useDevice();
   const privateInfoResult = usePrivateInfo();
   // also converts accepted contactInvitations to contacts
@@ -69,7 +70,9 @@ export default function ContactsScreen({ navigation }) {
   }
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.backdrop }]}
+    >
       <ListItemButton
         onPress={async () => {
           navigation.navigate("AcceptContactInvitationScreen");
@@ -113,14 +116,20 @@ export default function ContactsScreen({ navigation }) {
         renderSectionHeader={({ section: { title } }) => (
           <ListItem
             containerStyle={{
-              backgroundColor: colors.background,
+              backgroundColor: theme.colors.backdrop,
               paddingTop: 20,
               marginLeft: -10,
               marginRight: -10,
             }}
           >
             <ListItem.Content>
-              <ListItem.Title style={{ fontWeight: "500", paddingTop: 18 }}>
+              <ListItem.Title
+                style={{
+                  fontWeight: "500",
+                  paddingTop: 18,
+                  color: theme.colors.text,
+                }}
+              >
                 {title}
               </ListItem.Title>
             </ListItem.Content>
@@ -135,13 +144,14 @@ export default function ContactsScreen({ navigation }) {
                   borderRadius: 6,
                 }}
                 containerStyle={{
-                  borderColor: colors.divider,
+                  borderColor: theme.colors.accent,
                   borderWidth: StyleSheet.hairlineWidth,
                   borderRadius: 6,
+                  backgroundColor: theme.colors.background,
                 }}
               >
                 <ListItem.Content>
-                  <ListItem.Title style={{ color: colors.textBrightest }}>
+                  <ListItem.Title style={{ color: theme.colors.accent }}>
                     No confirmed contacts
                   </ListItem.Title>
                 </ListItem.Content>
@@ -155,13 +165,14 @@ export default function ContactsScreen({ navigation }) {
                   borderRadius: 6,
                 }}
                 containerStyle={{
-                  borderColor: colors.divider,
+                  backgroundColor: theme.colors.background,
+                  borderColor: theme.colors.accent,
                   borderWidth: StyleSheet.hairlineWidth,
                   borderRadius: 6,
                 }}
               >
                 <ListItem.Content>
-                  <ListItem.Title style={{ color: colors.textBrightest }}>
+                  <ListItem.Title style={{ color: theme.colors.accent }}>
                     No open invitations
                   </ListItem.Title>
                 </ListItem.Content>
@@ -182,7 +193,7 @@ export default function ContactsScreen({ navigation }) {
                       index === contactInvitations.length - 1 ? 6 : 0,
                   }}
                   containerStyle={{
-                    borderColor: colors.divider,
+                    borderColor: theme.colors.accent,
                     borderLeftWidth: StyleSheet.hairlineWidth,
                     borderRightWidth: StyleSheet.hairlineWidth,
                     borderTopLeftRadius: index === 0 ? 6 : 0,
@@ -209,7 +220,7 @@ export default function ContactsScreen({ navigation }) {
                     <Icon
                       name="alert-triangle"
                       type="feather"
-                      color={colors.error}
+                      color={theme.colors.error}
                       size={16}
                       style={{
                         display: "flex",
@@ -233,7 +244,7 @@ export default function ContactsScreen({ navigation }) {
                 borderBottomRightRadius: index === contacts.length - 1 ? 6 : 0,
               }}
               containerStyle={{
-                borderColor: colors.divider,
+                borderColor: theme.colors.accent,
                 borderLeftWidth: StyleSheet.hairlineWidth,
                 borderRightWidth: StyleSheet.hairlineWidth,
                 borderTopLeftRadius: index === 0 ? 6 : 0,
@@ -255,7 +266,7 @@ export default function ContactsScreen({ navigation }) {
                 <Icon
                   name="alert-triangle"
                   type="feather"
-                  color={colors.error}
+                  color={theme.colors.error}
                   size={16}
                   style={{
                     display: "flex",
diff --git a/app/src/components/screens/NoteCollaboratorScreen.tsx b/app/src/components/screens/NoteCollaboratorScreen.tsx
index 30a6783..d364887 100644
--- a/app/src/components/screens/NoteCollaboratorScreen.tsx
+++ b/app/src/components/screens/NoteCollaboratorScreen.tsx
@@ -14,8 +14,12 @@ import usePrivateInfo from "../../hooks/usePrivateInfo";
 import ServerSyncInfo from "../ui/ServerSyncInfo";
 import ListWrapper from "../ui/ListWrapper";
 import OutlineButton from "../ui/OutlineButton";
+import { NoteStackProps } from "../NavigationTypes";
 
-export default function NoteSettingsScreen({ navigation, route }) {
+export default function NoteCollaboratorScreen({
+  navigation,
+  route,
+}: NoteStackProps<"NoteCollaborator">) {
   const repositoryResult = useRepository(route.params.repositoryId);
   const userResult = useUser();
   const deviceResult = useDevice();
diff --git a/app/src/components/screens/NoteScreen.tsx b/app/src/components/screens/NoteScreen.tsx
index 6043083..3a58c3b 100644
--- a/app/src/components/screens/NoteScreen.tsx
+++ b/app/src/components/screens/NoteScreen.tsx
@@ -14,14 +14,17 @@ import UploadArrow from "../ui/UploadArrow";
 import DownloadArrow from "../ui/DownloadArrow";
 import ServerSyncInfo from "../ui/ServerSyncInfo";
 import { Repository } from "../../types";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
+
+import * as Colors from "../../styles/colors";
+
 import * as mutationQueue from "../../hooks/useSyncUtils/mutationQueue";
 import { loadEditorSourceForAndroid } from "../../utils/editorSource/editorSource";
 import { useEditorSource } from "../../context/EditorSourceContext";
+import { NoteStackProps } from "../NavigationTypes";
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#fff",
     // changing it to flex: 1 leads to weird behaviour e.g. notes don't render at the top and it somehow flickers
     height: "100%",
   },
@@ -47,6 +50,8 @@ type HeaderRightProps = {
 };
 
 const HeaderRight = ({ navigation, repository }: HeaderRightProps) => {
+  const theme = useCurrentTheme();
+
   const [
     uploadSyncState,
     setUploadSyncState,
@@ -111,14 +116,14 @@ const HeaderRight = ({ navigation, repository }: HeaderRightProps) => {
               uploadSyncState.state === "unknown"
                 ? "#aaa"
                 : uploadSyncState.state === "retry-in-progress"
-                ? colors.error
-                : colors.success
+                ? theme.colors.error
+                : Colors.SUCCESS
             }
           />
           <DownloadArrow
             // TODO show when a update decryption is in progress
             animationActive={false}
-            color={failedDownload ? colors.error : colors.success}
+            color={failedDownload ? theme.colors.error : Colors.SUCCESS}
             style={{
               marginLeft: 2,
             }}
@@ -128,7 +133,7 @@ const HeaderRight = ({ navigation, repository }: HeaderRightProps) => {
 
       <IconButton
         icon="account-multiple"
-        color={colors.primary}
+        color={theme.colors.primary}
         onPress={() => {
           navigation.navigate("NoteSettings", {
             id: repository.id,
@@ -140,7 +145,7 @@ const HeaderRight = ({ navigation, repository }: HeaderRightProps) => {
       />
       <IconButton
         icon="dots-horizontal-circle-outline"
-        color={colors.primary}
+        color={theme.colors.primary}
         onPress={() => {
           navigation.navigate("NoteSettings", {
             id: repository.id,
@@ -153,13 +158,17 @@ const HeaderRight = ({ navigation, repository }: HeaderRightProps) => {
 
 let androidEditorSource = { html: null };
 
-export default function NoteScreen({ route, navigation }) {
+export default function NoteScreen({
+  route,
+  navigation,
+}: NoteStackProps<"Note">) {
   const { id, isNew } = route.params;
+  const theme = useCurrentTheme();
   const yDocRef = useRef(null);
   const contentRef = useRef(null);
   const initializedRef = useRef(false);
   const webViewRef = useRef(null);
-  const [, updateState] = React.useState();
+  const [, updateState] = React.useState<unknown>();
   const [isDeleted, setIsDeleted] = React.useState(false);
   const forceUpdate = useCallback(() => updateState({}), []);
   const editorSource = useEditorSource();
@@ -230,7 +239,7 @@ export default function NoteScreen({ route, navigation }) {
     return (
       <View style={styles.container}>
         <Spacer />
-        <LoadingView style={{ backgroundColor: colors.white }} />
+        <LoadingView style={{ backgroundColor: theme.colors.backdrop }} />
       </View>
     );
   }
@@ -250,7 +259,7 @@ export default function NoteScreen({ route, navigation }) {
         renderLoading={() => (
           <View style={styles.container}>
             <Spacer />
-            <LoadingView style={{ backgroundColor: colors.white }} />
+            <LoadingView style={{ backgroundColor: theme.colors.backdrop }} />
           </View>
         )}
         onMessage={async (event) => {
diff --git a/app/src/components/screens/NoteSettingsScreen.tsx b/app/src/components/screens/NoteSettingsScreen.tsx
index c142994..96f8c66 100644
--- a/app/src/components/screens/NoteSettingsScreen.tsx
+++ b/app/src/components/screens/NoteSettingsScreen.tsx
@@ -1,36 +1,40 @@
 import React from "react";
+import { Alert } from "react-native";
 import { ListItem } from "react-native-elements";
 import { useClient } from "urql";
-import Spacer from "../ui/Spacer";
-import ScrollScreenContainer from "../ui/ScrollScreenContainer";
-import ListHeader from "../ui/ListHeader";
-import ListItemInfo from "../ui/ListItemInfo";
+import { NoteStackProps } from "../NavigationTypes";
 import useRepository from "../../hooks/useRepository";
 import useUser from "../../hooks/useUser";
 import useDevice from "../../hooks/useDevice";
-import { getIdentityKeys } from "../../utils/device";
-import deleteRepository from "../../utils/server/deleteRepository";
-import removeCollaboratorFromRepository from "../../utils/server/removeCollaboratorFromRepository";
-import { Alert } from "react-native";
-import * as repositoryStore from "../../utils/repositoryStore";
-import Text from "../ui/Text";
-import { RepositoryUpdate, RepositoryCollaborator } from "../../types";
 import usePrivateInfo from "../../hooks/usePrivateInfo";
 import useVerifiedDevicesForRepository from "../../hooks/useVerifiedDevicesForRepository";
-import ServerSyncInfo from "../ui/ServerSyncInfo";
 import useHasActiveLicense from "../../hooks/useHasActiveLicense";
+import { RepositoryUpdate, RepositoryCollaborator } from "../../types";
+import Text from "../ui/Text";
+import Spacer from "../ui/Spacer";
+import ScrollScreenContainer from "../ui/ScrollScreenContainer";
+import ListHeader from "../ui/ListHeader";
+import ListItemInfo from "../ui/ListItemInfo";
+import ServerSyncInfo from "../ui/ServerSyncInfo";
 import ListWrapper from "../ui/ListWrapper";
 import ListItemDivider from "../ui/ListItemDivider";
 import OutlineButton from "../ui/OutlineButton";
-import colors from "../../styles/colors";
 import UploadArrow from "../ui/UploadArrow";
 import DownloadArrow from "../ui/DownloadArrow";
+import removeCollaboratorFromRepository from "../../utils/server/removeCollaboratorFromRepository";
+import * as repositoryStore from "../../utils/repositoryStore";
+import { getIdentityKeys } from "../../utils/device";
+import deleteRepository from "../../utils/server/deleteRepository";
+import colors from "../../styles/colors";
 
 type RepositoryCollaboratorWithMostRecentUpdate = RepositoryCollaborator & {
   mostRecentUpdate?: RepositoryUpdate;
 };
 
-export default function NoteSettingsScreen({ navigation, route }) {
+export default function NoteSettingsScreen({
+  navigation,
+  route,
+}: NoteStackProps<"NoteSettings">) {
   const repositoryResult = useRepository(route.params.id);
   const userResult = useUser();
   const deviceResult = useDevice();
diff --git a/app/src/components/screens/NotesScreen.tsx b/app/src/components/screens/NotesScreen.tsx
index f2e26d5..34fdab2 100644
--- a/app/src/components/screens/NotesScreen.tsx
+++ b/app/src/components/screens/NotesScreen.tsx
@@ -13,30 +13,33 @@ import EmptyList from "../ui/EmptyList";
 import ServerSyncInfo from "../ui/ServerSyncInfo";
 import useHasActiveLicense from "../../hooks/useHasActiveLicense";
 import useRepositoriesWithMutationRetries from "../../hooks/useRepositoriesWithMutationRetries";
-import colors from "../../styles/colors";
 import Spacer from "../ui/Spacer";
 import OutlineButton from "../ui/OutlineButton";
 import ListItemDivider from "../ui/ListItemDivider";
 import DownloadArrow from "../ui/DownloadArrow";
 import UploadArrow from "../ui/UploadArrow";
 import Text from "../ui/Text";
+import { NoteStackProps } from "../NavigationTypes";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
+import { legacyColors } from "../../styles/legacyColors";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     width: "100%",
-    backgroundColor: colors.background,
+    paddingTop: 16,
   },
   note: {
     padding: 10,
     fontSize: 16,
     height: 44,
-    borderBottomColor: colors.divider,
+    borderBottomColor: legacyColors.divider,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
 });
 
-export default function Notes({ navigation }) {
+export default function Notes({ navigation }: NoteStackProps<"Notes">) {
+  const theme = useCurrentTheme();
   const repositoriesState = useRepositories(navigation);
   const privateInfoResult = usePrivateInfo();
   const hasActiveLicenseResult = useHasActiveLicense();
@@ -78,7 +81,9 @@ export default function Notes({ navigation }) {
       : [];
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.backdrop }]}
+    >
       <ServerSyncInfo />
 
       <OutlineButton
@@ -127,22 +132,26 @@ export default function Notes({ navigation }) {
         <>
           <ListItem
             containerStyle={{
-              backgroundColor: colors.background,
+              backgroundColor: theme.colors.backdrop,
               paddingTop: 20,
             }}
           >
             <ListItem.Content>
-              <ListItem.Title style={{ fontWeight: "500" }}>
+              <ListItem.Title
+                style={{ fontWeight: "500", color: theme.colors.text }}
+              >
                 Notes
               </ListItem.Title>
             </ListItem.Content>
-            <ListItem.Subtitle style={{ fontSize: 12 }}>
+            <ListItem.Subtitle
+              style={{ color: theme.colors.text, opacity: 0.5, fontSize: 12 }}
+            >
               Sorted by last update
             </ListItem.Subtitle>
           </ListItem>
           <FlatList
             style={{
-              backgroundColor: colors.background,
+              backgroundColor: theme.colors.backdrop,
               marginLeft: 10,
               marginRight: 10,
             }}
@@ -181,7 +190,7 @@ export default function Notes({ navigation }) {
                 <React.Fragment key={item.id}>
                   {index === 0 ? null : <ListItemDivider />}
                   <ListItem
-                    underlayColor={colors.underlay}
+                    underlayColor={theme.colors.onSurface}
                     onPress={() => {
                       navigation.navigate("Note", {
                         id: item.id,
@@ -197,7 +206,7 @@ export default function Notes({ navigation }) {
                         index === notesList.length - 1 ? 6 : 0,
                     }}
                     containerStyle={{
-                      borderColor: colors.divider,
+                      backgroundColor: theme.colors.surface,
                       borderLeftWidth: StyleSheet.hairlineWidth,
                       borderRightWidth: StyleSheet.hairlineWidth,
                       borderTopLeftRadius: index === 0 ? 6 : 0,
@@ -215,13 +224,16 @@ export default function Notes({ navigation }) {
                     }}
                   >
                     <ListItem.Content>
-                      <ListItem.Title numberOfLines={1}>
+                      <ListItem.Title
+                        style={{ color: theme.colors.text }}
+                        numberOfLines={1}
+                      >
                         {item.name}
                       </ListItem.Title>
 
                       <ListItem.Subtitle
                         numberOfLines={1}
-                        style={{ fontSize: 12, color: "#8A8B96" }}
+                        style={{ fontSize: 12, color: theme.colors.accent }}
                       >
                         {names.length > 0
                           ? `Shared with ${names.join(", ")}`
@@ -233,14 +245,14 @@ export default function Notes({ navigation }) {
                       <>
                         <UploadArrow
                           animationActive={false}
-                          color={colors.error}
+                          color={theme.colors.error}
                           style={{
                             transform: [{ scale: 0.8 }],
                           }}
                         />
                         <DownloadArrow
                           animationActive={false}
-                          color={colors.error}
+                          color={theme.colors.error}
                           style={{
                             transform: [{ scale: 0.8 }],
                           }}
@@ -250,7 +262,7 @@ export default function Notes({ navigation }) {
                     {failedUpload && !failedToDecryptContent ? (
                       <UploadArrow
                         animationActive={false}
-                        color={colors.error}
+                        color={theme.colors.error}
                         style={{
                           transform: [{ scale: 0.8 }],
                         }}
@@ -259,21 +271,21 @@ export default function Notes({ navigation }) {
                     {!failedUpload && failedToDecryptContent ? (
                       <DownloadArrow
                         animationActive={false}
-                        color={colors.error}
+                        color={theme.colors.error}
                         style={{
                           transform: [{ scale: 0.8 }],
                         }}
                       />
                     ) : null}
                     <ListItem.Subtitle
-                      style={{ fontSize: 12, color: "#8A8B96" }}
+                      style={{ fontSize: 12, color: theme.colors.accent }}
                     >
                       {item.updatedAt
                         ? formatDistanceToNow(new Date(item.updatedAt))
                         : "-"}
                     </ListItem.Subtitle>
 
-                    <ListItem.Chevron color={colors.primary} />
+                    <ListItem.Chevron color={theme.colors.primary} />
                   </ListItem>
                 </React.Fragment>
               );
diff --git a/app/src/components/screens/OnboardingScreen.tsx b/app/src/components/screens/OnboardingScreen.tsx
index 30389d4..e3153f1 100644
--- a/app/src/components/screens/OnboardingScreen.tsx
+++ b/app/src/components/screens/OnboardingScreen.tsx
@@ -26,11 +26,11 @@ import { Y } from "../../vendor/index.js";
 import { Icon } from "react-native-elements";
 import colors from "../../styles/colors";
 import ActivityIndicator from "../ui/ActivityIndicator";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.background,
     justifyContent: "center",
     paddingHorizontal: 20,
     paddingVertical: 60,
@@ -57,6 +57,7 @@ export default function OnboardingScreen({ navigation }) {
   const [processState, setProcessState] = React.useState<
     "default" | "createDeviceAndKeys" | "createUser" | "ready" | "failed"
   >("default");
+  const theme = useCurrentTheme();
   const [, createUser] = useMutation(createUserMutation);
   const client = useClient();
 
@@ -116,7 +117,9 @@ export default function OnboardingScreen({ navigation }) {
   }, []);
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.backdrop }]}
+    >
       <Spacer />
       <Spacer />
       <Spacer />
@@ -145,7 +148,7 @@ export default function OnboardingScreen({ navigation }) {
           {/* avoid the text to jump left then right due the icon loading, by applying a fixed with */}
           <View style={{ width: 24 }}>
             {processState === "default" ? (
-              <ActivityIndicator color={colors.background} />
+              <ActivityIndicator color={theme.colors.background} />
             ) : null}
             {processState === "createDeviceAndKeys" ? (
               <ActivityIndicator />
@@ -154,7 +157,7 @@ export default function OnboardingScreen({ navigation }) {
               <Icon
                 name="check-circle"
                 type="feather"
-                color={"#000"}
+                color={colors.success}
                 size={24}
               />
             ) : null}
@@ -169,7 +172,12 @@ export default function OnboardingScreen({ navigation }) {
           ) : null}
           {processState === "createUser" ? <ActivityIndicator /> : null}
           {processState === "ready" ? (
-            <Icon name="check-circle" type="feather" color={"#000"} size={24} />
+            <Icon
+              name="check-circle"
+              type="feather"
+              color={colors.success}
+              size={24}
+            />
           ) : null}
           <Text size="l">{"\xa0\xa0"} Setting up User Account</Text>
         </View>
diff --git a/app/src/components/screens/WelcomeScreen.tsx b/app/src/components/screens/WelcomeScreen.tsx
index 9f05f97..26e6b5f 100644
--- a/app/src/components/screens/WelcomeScreen.tsx
+++ b/app/src/components/screens/WelcomeScreen.tsx
@@ -11,11 +11,12 @@ import Text from "../ui/Text";
 import OutlineButton from "../ui/OutlineButton";
 import colors from "../../styles/colors";
 import { privacyPolicyLink, termsOfServiceLink } from "../../utils/links";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
+import { StackNavigationProp } from "@react-navigation/stack";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.background,
     justifyContent: "flex-end",
     paddingHorizontal: 10,
     paddingVertical: 60,
@@ -36,9 +37,17 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function WelcomeScreen({ navigation }) {
+interface WelcomeScreenProps {
+  navigation: StackNavigationProp<undefined>;
+}
+
+export default function WelcomeScreen({ navigation }: WelcomeScreenProps) {
+  const theme = useCurrentTheme();
+  console.log(theme);
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.backdrop }]}
+    >
       <View style={styles.content}>
         <Image
           style={styles.logo}
diff --git a/app/src/components/ui/ListHeader.tsx b/app/src/components/ui/ListHeader.tsx
index 30e39d1..dd38476 100644
--- a/app/src/components/ui/ListHeader.tsx
+++ b/app/src/components/ui/ListHeader.tsx
@@ -1,21 +1,23 @@
 import React from "react";
 import { ListItem } from "react-native-elements";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 type Props = {
   children: React.ReactNode;
 };
 
 export default function ListHeader(props: Props) {
+  const theme = useCurrentTheme();
+
   return (
     <ListItem
       containerStyle={{
-        backgroundColor: colors.background,
+        backgroundColor: theme.colors.backdrop,
         paddingTop: 20,
       }}
     >
       <ListItem.Content>
-        <ListItem.Title style={{ fontWeight: "500" }}>
+        <ListItem.Title style={{ color: theme.colors.text, fontWeight: "500" }}>
           {props.children}
         </ListItem.Title>
       </ListItem.Content>
diff --git a/app/src/components/ui/ListItemButton.tsx b/app/src/components/ui/ListItemButton.tsx
index db5dfc7..6a371d6 100644
--- a/app/src/components/ui/ListItemButton.tsx
+++ b/app/src/components/ui/ListItemButton.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 import { ListItem, Icon } from "react-native-elements";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 type Props = {
   children: string;
@@ -10,10 +10,11 @@ type Props = {
 };
 
 export default function ListItemButton(props: Props) {
+  const theme = useCurrentTheme();
   const style = props.style || {};
   return (
     <ListItem
-      underlayColor={colors.underlay}
+      underlayColor={theme.colors.onSurface}
       {...props}
       style={{
         marginLeft: 10,
@@ -23,26 +24,27 @@ export default function ListItemButton(props: Props) {
       }}
       containerStyle={{
         borderRadius: 6,
-        borderColor: colors.divider,
+        borderColor: theme.colors.accent,
         borderWidth: StyleSheet.hairlineWidth,
+        backgroundColor: theme.colors.background,
       }}
     >
       <Icon
         name="plus-circle"
         type="feather"
-        color={colors.primary}
+        color={theme.colors.primary}
         //   color={userResult.type === "user" ? "#000" : "#aaa"}
       />
       <ListItem.Content>
         <ListItem.Title
           style={{
-            color: colors.primary,
+            color: theme.colors.primary,
           }}
         >
           {props.children}
         </ListItem.Title>
       </ListItem.Content>
-      <ListItem.Chevron color={colors.primary} />
+      <ListItem.Chevron color={theme.colors.primary} />
     </ListItem>
   );
 }
diff --git a/app/src/components/ui/ListItemExternalLink.tsx b/app/src/components/ui/ListItemExternalLink.tsx
index 3b5d788..f5e8782 100644
--- a/app/src/components/ui/ListItemExternalLink.tsx
+++ b/app/src/components/ui/ListItemExternalLink.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 import { ListItem, Icon } from "react-native-elements";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 import colors from "../../styles/colors";
 
 type Props = {
@@ -10,10 +11,11 @@ type Props = {
 };
 
 export default function ListItemExternalLink(props: Props) {
+  const theme = useCurrentTheme();
   const style = props.style || {};
   return (
     <ListItem
-      underlayColor={colors.underlay}
+      underlayColor={theme.colors.onSurface}
       {...props}
       style={{
         marginLeft: 10,
@@ -23,21 +25,22 @@ export default function ListItemExternalLink(props: Props) {
       }}
       containerStyle={{
         borderRadius: 6,
-        borderColor: colors.divider,
+        borderColor: theme.colors.accent,
         borderWidth: StyleSheet.hairlineWidth,
+        backgroundColor: theme.colors.backdrop,
       }}
     >
-      <Icon name="external-link" type="feather" color={colors.primary} />
+      <Icon name="external-link" type="feather" color={theme.colors.primary} />
       <ListItem.Content>
         <ListItem.Title
           style={{
-            color: colors.primary,
+            color: theme.colors.primary,
           }}
         >
           {props.children}
         </ListItem.Title>
       </ListItem.Content>
-      <ListItem.Chevron color={colors.primary} />
+      <ListItem.Chevron color={theme.colors.primary} />
     </ListItem>
   );
 }
diff --git a/app/src/components/ui/ListItemInfo.tsx b/app/src/components/ui/ListItemInfo.tsx
index f872bb0..cfa89c9 100644
--- a/app/src/components/ui/ListItemInfo.tsx
+++ b/app/src/components/ui/ListItemInfo.tsx
@@ -3,6 +3,7 @@ import { Clipboard, Alert } from "react-native";
 import { ListItem, Icon } from "react-native-elements";
 import colors from "../../styles/colors";
 import ListItemDivider from "../ui/ListItemDivider";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 type Props = {
   children: string;
@@ -11,22 +12,26 @@ type Props = {
 };
 
 export default function ListItemInfo(props: Props) {
+  const theme = useCurrentTheme();
   return (
     <>
       {props.topDivider ? <ListItemDivider /> : null}
       <ListItem
-        underlayColor={colors.underlay}
+        underlayColor={theme.colors.onSurface}
+        containerStyle={{ backgroundColor: theme.colors.background }}
         onPress={async () => {
           await Clipboard.setString(props.children);
           Alert.alert("Copied to Clipboard");
         }}
       >
-        <Icon name="copy" type="feather" color={colors.primary} />
+        <Icon name="copy" type="feather" color={theme.colors.primary} />
         <ListItem.Content>
           <ListItem.Subtitle style={{ fontSize: 12, color: "#8A8B96" }}>
             {props.label}
           </ListItem.Subtitle>
-          <ListItem.Title>{props.children}</ListItem.Title>
+          <ListItem.Title style={{ color: theme.colors.text }}>
+            {props.children}
+          </ListItem.Title>
         </ListItem.Content>
       </ListItem>
     </>
diff --git a/app/src/components/ui/ListItemLink.tsx b/app/src/components/ui/ListItemLink.tsx
index 8cac151..2355e7d 100644
--- a/app/src/components/ui/ListItemLink.tsx
+++ b/app/src/components/ui/ListItemLink.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { StyleProp, ViewStyle, View } from "react-native";
 import { ListItem } from "react-native-elements";
 import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
+
 import ListItemDivider from "../ui/ListItemDivider";
 
 type Props = {
@@ -14,21 +16,25 @@ type Props = {
 };
 
 export default function ListItemLink(props: Props) {
+  const theme = useCurrentTheme();
+
+  const color = props.disabled ? theme.colors.accent : theme.colors.text;
+
   const { topDivider, ...otherProps } = props;
   return (
     <View>
       {topDivider ? <ListItemDivider /> : null}
-      <ListItem underlayColor={colors.underlay} {...otherProps}>
+      <ListItem
+        underlayColor={theme.colors.onSurface}
+        containerStyle={{
+          backgroundColor: theme.colors.background,
+        }}
+        {...otherProps}
+      >
         <ListItem.Content>
-          <ListItem.Title
-            style={{ color: props.disabled ? colors.divider : colors.text }}
-          >
-            {props.children}
-          </ListItem.Title>
+          <ListItem.Title style={{ color }}>{props.children}</ListItem.Title>
         </ListItem.Content>
-        <ListItem.Chevron
-          color={props.disabled ? colors.divider : colors.primary}
-        />
+        <ListItem.Chevron color={color} />
       </ListItem>
     </View>
   );
diff --git a/app/src/components/ui/ListWrapper.tsx b/app/src/components/ui/ListWrapper.tsx
index 9c5960c..7562e71 100644
--- a/app/src/components/ui/ListWrapper.tsx
+++ b/app/src/components/ui/ListWrapper.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 const styles = StyleSheet.create({
   listWrapper: {
@@ -8,7 +8,6 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     marginLeft: 10,
     marginRight: 10,
-    borderColor: colors.divider,
     borderWidth: StyleSheet.hairlineWidth,
   },
 });
@@ -19,6 +18,18 @@ type Props = {
 };
 
 export default function ListWrapper(props: Props) {
+  const theme = useCurrentTheme();
   const style = props.style ? props.style : {};
-  return <View {...props} style={[styles.listWrapper, style]} />;
+  return (
+    <View
+      {...props}
+      style={[
+        styles.listWrapper,
+        {
+          borderColor: theme.colors.accent,
+        },
+        style,
+      ]}
+    />
+  );
 }
diff --git a/app/src/components/ui/OutlineButton.tsx b/app/src/components/ui/OutlineButton.tsx
index 26f8051..dc957cf 100644
--- a/app/src/components/ui/OutlineButton.tsx
+++ b/app/src/components/ui/OutlineButton.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "react-native-paper";
 import { StyleSheet } from "react-native";
 import { Icon } from "react-native-elements";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 type ButtonProps = {
   iconType?: "plus" | "minus" | "share" | "verify";
@@ -17,8 +17,9 @@ type ButtonProps = {
 
 export default function MyButton(props: ButtonProps) {
   const style = props.style ? props.style : {};
+  const theme = useCurrentTheme();
   let icon = undefined;
-  let labelColor = props.secondary ? colors.textBright : colors.primary;
+  let labelColor = props.secondary ? theme.colors.accent : theme.colors.primary;
   if (props.iconType === "plus") {
     icon = ({ color }: { color: string; size: any }) => {
       return (
@@ -46,7 +47,7 @@ export default function MyButton(props: ButtonProps) {
         />
       );
     };
-    labelColor = colors.error;
+    labelColor = theme.colors.error;
   }
   if (props.iconType === "share") {
     icon = ({ color }: { color: string; size: any }) => {
@@ -82,7 +83,7 @@ export default function MyButton(props: ButtonProps) {
     <Button
       {...props}
       uppercase={false}
-      mode="outline"
+      mode="outlined"
       icon={icon}
       labelStyle={{
         fontSize: 16,
@@ -91,15 +92,15 @@ export default function MyButton(props: ButtonProps) {
       }}
       contentStyle={{
         height: 50,
-        backgroundColor: colors.white,
+        backgroundColor: theme.colors.backdrop,
         justifyContent: props.align === "center" ? "center" : "flex-start",
       }}
       style={{
-        backgroundColor: colors.white,
+        backgroundColor: theme.colors.backdrop,
         marginLeft: 10,
         marginRight: 10,
         borderRadius: 6,
-        borderColor: colors.divider,
+        borderColor: theme.colors.accent,
         borderWidth: StyleSheet.hairlineWidth,
         ...style,
       }}
diff --git a/app/src/components/ui/ScrollScreenContainer.tsx b/app/src/components/ui/ScrollScreenContainer.tsx
index 462e02f..5607ba4 100644
--- a/app/src/components/ui/ScrollScreenContainer.tsx
+++ b/app/src/components/ui/ScrollScreenContainer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import KeyboardAvoidContainer from "./KeyboardAvoidContainer";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 type Props = {
   horizontalPadding?: boolean;
@@ -9,7 +9,6 @@ type Props = {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.background,
     height: "100%",
   },
   scrollView: {
@@ -25,9 +24,12 @@ const ScrollScreenContainer: React.FC<Props> = ({
   horizontalPadding = false,
   children,
 }) => {
+  const theme = useCurrentTheme();
   return (
     <KeyboardAvoidContainer>
-      <View style={styles.container}>
+      <View
+        style={[styles.container, { backgroundColor: theme.colors.backdrop }]}
+      >
         <ScrollView
           style={
             horizontalPadding ? styles.scrollView : styles.scrollViewNoPadding
diff --git a/app/src/components/ui/ServerSyncInfo.tsx b/app/src/components/ui/ServerSyncInfo.tsx
index 5164b4b..9eb6802 100644
--- a/app/src/components/ui/ServerSyncInfo.tsx
+++ b/app/src/components/ui/ServerSyncInfo.tsx
@@ -4,7 +4,7 @@ import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import { sizes } from "../../styles/fonts";
 import { useSyncInfo } from "../../context/SyncInfoContext";
 import LoadingEllipsis from "./LoadingEllipsis";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 const styles = StyleSheet.create({
   hint: {
@@ -15,7 +15,6 @@ const styles = StyleSheet.create({
     padding: sizes.medium * 0.8,
   },
   hintWrapper: {
-    borderColor: colors.divider,
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderTopWidth: StyleSheet.hairlineWidth,
   },
@@ -27,7 +26,6 @@ const styles = StyleSheet.create({
     padding: sizes.medium * 0.8,
   },
   warningHintWrapper: {
-    borderColor: colors.divider,
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderTopWidth: StyleSheet.hairlineWidth,
   },
@@ -37,6 +35,8 @@ const ServerSyncInfo: React.FC = () => {
   const { loadRepositoriesSyncState } = useSyncInfo();
   const [time, setTime] = React.useState(Date.now());
 
+  const theme = useCurrentTheme();
+
   React.useEffect(() => {
     const interval = setInterval(() => setTime(Date.now()), 1000);
     return () => {
@@ -59,7 +59,9 @@ const ServerSyncInfo: React.FC = () => {
               includeSeconds: true,
             });
       return (
-        <View style={styles.hintWrapper}>
+        <View
+          style={[styles.hintWrapper, { borderColor: theme.colors.accent }]}
+        >
           <Text style={styles.hint}>
             Last server sync was {timeDiff}. Syncing now <LoadingEllipsis />
           </Text>
@@ -71,7 +73,12 @@ const ServerSyncInfo: React.FC = () => {
   }
   if (!loadRepositoriesSyncState.lastSuccessDatetime) {
     return (
-      <View style={styles.warningHintWrapper}>
+      <View
+        style={[
+          styles.warningHintWrapper,
+          { borderColor: theme.colors.accent },
+        ]}
+      >
         <Text style={styles.warningHint}>
           Failed to sync with the server. Trying again <LoadingEllipsis />
         </Text>
@@ -91,7 +98,12 @@ const ServerSyncInfo: React.FC = () => {
             includeSeconds: true,
           });
     return (
-      <View style={styles.warningHintWrapper}>
+      <View
+        style={[
+          styles.warningHintWrapper,
+          { borderColor: theme.colors.accent },
+        ]}
+      >
         <Text style={styles.warningHint}>
           Failed to sync with the server since {timeDiff}. Trying again{" "}
           <LoadingEllipsis />
diff --git a/app/src/components/ui/Text.tsx b/app/src/components/ui/Text.tsx
index 9f39aab..d3ad364 100644
--- a/app/src/components/ui/Text.tsx
+++ b/app/src/components/ui/Text.tsx
@@ -1,131 +1,43 @@
 import React from "react";
-import { Text, StyleSheet } from "react-native";
-import { sizes } from "../../styles/fonts";
-import colors from "../../styles/colors";
+import { Text, StyleProp, TextStyle } from "react-native";
+import useCurrentTheme, { DerivedTheme } from "../../hooks/useCurrentTheme";
 
-const styles = StyleSheet.create({
-  textSmallBlack: {
-    fontSize: sizes.small,
-    lineHeight: sizes.small * 1.4,
-    color: colors.text,
-  },
-  textSmallBoldBlack: {
-    fontSize: sizes.small,
-    lineHeight: sizes.small * 1.4,
-    fontWeight: "bold",
-    color: colors.text,
-  },
-  textSmallGrey: {
-    fontSize: sizes.small,
-    lineHeight: sizes.small * 1.4,
-    color: "#aaa",
-  },
-  textSmallBoldGrey: {
-    fontSize: sizes.small,
-    lineHeight: sizes.small * 1.4,
-    fontWeight: "bold",
-    color: "#aaa",
-  },
-  textMediumBlack: {
-    fontSize: sizes.medium,
-    lineHeight: sizes.medium * 1.4,
-    color: colors.text,
-  },
-  textMediumBoldBlack: {
-    fontSize: sizes.medium,
-    lineHeight: sizes.medium * 1.4,
-    fontWeight: "bold",
-    color: colors.text,
-  },
-  textMediumGrey: {
-    fontSize: sizes.medium,
-    lineHeight: sizes.medium * 1.4,
-    color: "#aaa",
-  },
-  textMediumBoldGrey: {
-    fontSize: sizes.medium,
-    lineHeight: sizes.medium * 1.4,
-    fontWeight: "bold",
-    color: "#aaa",
-  },
-  textLargeBlack: {
-    fontSize: sizes.large,
-    lineHeight: sizes.large * 1.4,
-    color: colors.text,
-  },
-  textLargeBoldBlack: {
-    fontSize: sizes.large,
-    lineHeight: sizes.large * 1.4,
-    fontWeight: "bold",
-    color: colors.text,
-  },
-  textLargeGrey: {
-    fontSize: sizes.large,
-    lineHeight: sizes.large * 1.4,
-    color: "#aaa",
-  },
-  textLargeBoldGrey: {
-    fontSize: sizes.large,
-    lineHeight: sizes.large * 1.4,
-    fontWeight: "bold",
-    color: "#aaa",
-  },
-});
+import { sizes } from "../../styles/fonts";
 
 type Props = {
   size?: "s" | "m" | "l";
   weight?: "default" | "bold";
   color?: "default" | "grey";
+  style?: StyleProp<TextStyle>;
 };
 
-const MyText: React.FC<Props> = (props) => {
-  if (props.size === "s") {
-    return (
-      <Text
-        style={
-          props.color === "grey"
-            ? props.weight === "bold"
-              ? styles.textSmallBoldGrey
-              : styles.textSmallGrey
-            : props.weight === "bold"
-            ? styles.textSmallBoldBlack
-            : styles.textSmallBlack
-        }
-        {...props}
-      />
-    );
-  }
-  if (props.size === "l") {
-    return (
-      <Text
-        style={
-          props.color === "grey"
-            ? props.weight === "bold"
-              ? styles.textLargeBoldGrey
-              : styles.textLargeGrey
-            : props.weight === "bold"
-            ? styles.textLargeBoldBlack
-            : styles.textLargeBlack
-        }
-        {...props}
-      />
-    );
+const getTextStyles = (
+  { size, color, weight }: Props,
+  theme: DerivedTheme
+): StyleProp<TextStyle> => {
+  const fontSize =
+    size === "s" ? sizes.small : size === "l" ? sizes.large : sizes.medium;
+  const lineHeight = fontSize * 1.4;
+  const textColor =
+    color === "default" ? theme.colors.text : theme.colors.accent;
+  const styles: StyleProp<TextStyle> = {
+    fontSize,
+    lineHeight,
+    color: textColor,
+  };
+
+  if (weight === "bold") {
+    styles.fontWeight = "bold";
   }
 
-  return (
-    <Text
-      style={
-        props.color === "grey"
-          ? props.weight === "bold"
-            ? styles.textMediumBoldGrey
-            : styles.textMediumGrey
-          : props.weight === "bold"
-          ? styles.textMediumBoldBlack
-          : styles.textMediumBlack
-      }
-      {...props}
-    />
-  );
+  return styles;
+};
+
+// eslint-disable-next-line react/prop-types
+const MyText: React.FC<Props> = ({ size, color, weight, style, ...props }) => {
+  const theme = useCurrentTheme();
+  const styles = getTextStyles({ size, color, weight }, theme);
+  return <Text style={[styles, style]} {...props} />;
 };
 
-export default MyText;
+export default MyText;
\ No newline at end of file
diff --git a/app/src/components/ui/TextInput.tsx b/app/src/components/ui/TextInput.tsx
index c2460ce..13dd9d9 100644
--- a/app/src/components/ui/TextInput.tsx
+++ b/app/src/components/ui/TextInput.tsx
@@ -4,7 +4,7 @@ import {
   TextInputProps,
   StyleSheet,
 } from "react-native";
-import colors from "../../styles/colors";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 const styles = StyleSheet.create({
   textInput: {
@@ -12,11 +12,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 14,
     paddingBottom: 14,
-    backgroundColor: colors.white,
     lineHeight: 22,
     borderRadius: 6,
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.divider,
   },
 });
 
@@ -26,15 +24,18 @@ type Props = TextInputProps & {
 };
 
 const TextInput = (props: Props) => {
+  const theme = useCurrentTheme();
   const style = {
     minHeight: props.minHeight ? props.minHeight : 0,
-    color: props.disabled ? colors.textBrightest : colors.text,
+    color: props.disabled ? theme.colors.accent : theme.colors.text,
+    backgroundColor: theme.colors.background,
+    borderColor: theme.colors.accent,
   };
   return (
     <NativeTextInput
-      selectionColor={colors.primary}
+      selectionColor={theme.colors.primary}
       placeholderTextColor={
-        props.disabled ? colors.divider : colors.textBrightest
+        props.disabled ? theme.colors.accent : theme.colors.placeholder
       }
       style={[styles.textInput, style]}
       multiline
diff --git a/app/src/hooks/useCurrentTheme.ts b/app/src/hooks/useCurrentTheme.ts
new file mode 100644
index 0000000..61e0f11
--- /dev/null
+++ b/app/src/hooks/useCurrentTheme.ts
@@ -0,0 +1,13 @@
+import { useMemo, } from "react";
+import { useColorScheme } from "react-native-appearance";
+import { getCurrentTheme } from "../utils/theme";
+
+function useCurrentTheme() {
+  const colorScheme = useColorScheme();
+
+  return useMemo(() => getCurrentTheme(colorScheme === "dark"), [colorScheme]);
+}
+
+export type DerivedTheme = ReturnType<typeof useCurrentTheme>;
+
+export default useCurrentTheme;
\ No newline at end of file
diff --git a/app/src/styles/colors.ts b/app/src/styles/colors.ts
index 7d0651d..3e58272 100644
--- a/app/src/styles/colors.ts
+++ b/app/src/styles/colors.ts
@@ -1,7 +1,25 @@
-export default {
+export const PRIMARY = "#4454CF";
+export const SUCCESS = "#48AD83";
+
+export const lightColors = {
+  white: "#fff",
+  background: "#f8f8f8",
+  divider: "#e4e5ed",
+  text: "#1F1F1F",
+  textBright: "#4F5057",
+  textBrightest: "#8A8B96",
+  primary: "#4454CF",
+  primaryHover: "#5367DB",
+  primaryActive: "#3c479a",
+  success: "#48AD83",
+  warning: "#F09334",
+  error: "#CE3E6A",
+  underlay: "#333",
+};
+
+export const darkColors = {
   white: "#fff",
   background: "#f8f8f8",
-  backgroundDesktopSidebar: "#f1eeee",
   divider: "#e4e5ed",
   text: "#1F1F1F",
   textBright: "#4F5057",
diff --git a/app/src/styles/legacyColors.ts b/app/src/styles/legacyColors.ts
new file mode 100644
index 0000000..eed0438
--- /dev/null
+++ b/app/src/styles/legacyColors.ts
@@ -0,0 +1,16 @@
+export const legacyColors =  {
+    white: "#fff",
+    background: "#f8f8f8",
+    backgroundDesktopSidebar: "#f1eeee",
+    divider: "#e4e5ed",
+    text: "#1F1F1F",
+    textBright: "#4F5057",
+    textBrightest: "#8A8B96",
+    primary: "#4454CF",
+    primaryHover: "#5367DB",
+    primaryActive: "#3c479a",
+    success: "#48AD83",
+    warning: "#F09334",
+    error: "#CE3E6A",
+    underlay: "#333",
+  };
\ No newline at end of file
diff --git a/app/src/utils/theme.ts b/app/src/utils/theme.ts
new file mode 100644
index 0000000..d1c3844
--- /dev/null
+++ b/app/src/utils/theme.ts
@@ -0,0 +1,52 @@
+import { Appearance } from "react-native";
+import { DarkTheme, DefaultTheme, configureFonts } from "react-native-paper";
+import { legacyColors } from "../styles/legacyColors";
+
+const fontConfig = {
+  macos: {
+    regular: {
+      fontFamily: "System",
+      fontWeight: "400",
+    },
+    medium: {
+      fontFamily: "System",
+      fontWeight: "500",
+    },
+    light: {
+      fontFamily: "System",
+      fontWeight: "300",
+    },
+    thin: {
+      fontFamily: "System",
+      fontWeight: "100",
+    },
+  },
+};
+
+export const getCurrentTheme = (isDarkMode: boolean) => {
+  return isDarkMode
+    ? {
+        ...DarkTheme,
+        fonts: configureFonts(fontConfig),
+        colors: {
+          ...DarkTheme.colors,
+          primary: legacyColors.primary,
+          accent: legacyColors.textBrightest,
+          backdrop: "#090909",
+          background: "#121212",
+        },
+      }
+    : {
+        ...DefaultTheme,
+        fonts: configureFonts(fontConfig),
+        colors: {
+          ...DefaultTheme.colors,
+          primary: legacyColors.primary,
+          accent: legacyColors.textBrightest,
+          backdrop: legacyColors.background,
+          background: "#fff",
+        },
+      };
+};
+
+export const isNativeDarkMode = () => Appearance.getColorScheme() === "dark";
diff --git a/app/yarn.lock b/app/yarn.lock
index d2a91e0..62f7e10 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -9609,6 +9609,15 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-native-appearance@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/react-native-appearance/-/react-native-appearance-0.3.4.tgz#2cbcbc5142cdc1898c116684f519b16c879cbec2"
+  integrity sha512-Vz3zdJbAEiMDwuw6wH98TT1WVfBvWjvANutYtkIbl16KGRCigtSgt6IIiLsF3/TSS3y3FtHhWDelFeGw/rtuig==
+  dependencies:
+    fbemitter "^2.1.1"
+    invariant "^2.2.4"
+    use-subscription "^1.0.0"
+
 react-native-elements@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-3.3.2.tgz#42cc05c90a5c85c8aee95ce363bce0c5a39fe633"
diff --git a/editor/components/BlockTypeButton.tsx b/editor/components/BlockTypeButton.tsx
index af68672..4922c09 100644
--- a/editor/components/BlockTypeButton.tsx
+++ b/editor/components/BlockTypeButton.tsx
@@ -4,6 +4,7 @@ import { EditorState } from "prosemirror-state";
 import { IconType } from "react-icons/lib";
 import { NodeType } from "prosemirror-model";
 import { setBlockType } from "prosemirror-commands";
+import { classNames } from "./classnames";
 
 type Attrs = {
   level?: 2;
@@ -48,7 +49,7 @@ export default function BlockTypeButton({
   const canDoCommand =
     !isActive({ state: editorView.state, nodeType, attrs }) &&
     command(editorView.state);
-
+  const cx = classNames("ToolbarIcon", canDoCommand && "enabled");
   return (
     <button
       title={title}
@@ -60,11 +61,10 @@ export default function BlockTypeButton({
         border: "0 solid transparent",
         fontSize: 24,
         borderRadius: 4,
-        background: "white",
-        color: canDoCommand ? "black" : "#ccc",
         padding: "0rem 0.3rem 0.2rem",
         marginRight: "0.1rem",
       }}
+      className={cx}
     >
       <Icon
         style={{
diff --git a/editor/components/ChecklistButton.tsx b/editor/components/ChecklistButton.tsx
index 92d166a..08f8653 100644
--- a/editor/components/ChecklistButton.tsx
+++ b/editor/components/ChecklistButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { EditorView } from "prosemirror-view";
 import { wrapInList } from "../commands/lists";
 import ChecklistIcon from "./ChecklistIcon";
+import { classNames } from "./classnames";
 
 type Props = {
   editorView: EditorView;
@@ -12,7 +13,7 @@ type Props = {
 export default function ListButton({ editorView, nodeType, title }: Props) {
   const command = wrapInList(nodeType);
   const canWrap = command(editorView.state);
-
+  const cx = classNames("ToolbarIcon", canWrap && "enabled");
   return (
     <button
       title={title}
@@ -24,11 +25,10 @@ export default function ListButton({ editorView, nodeType, title }: Props) {
         border: "0 solid transparent",
         fontSize: 24,
         borderRadius: 4,
-        background: "white",
-        color: canWrap ? "black" : "#ccc",
         padding: "0rem 0.3rem 0.2rem",
         marginRight: "0.1rem",
       }}
+      className={cx}
     >
       <ChecklistIcon
         style={{
diff --git a/editor/components/CommandButton.tsx b/editor/components/CommandButton.tsx
index 7e9a4da..182f54c 100644
--- a/editor/components/CommandButton.tsx
+++ b/editor/components/CommandButton.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { EditorView } from "prosemirror-view";
 import { IconType } from "react-icons/lib";
+import { classNames } from "./classnames";
 
 type Props = {
   editorView: EditorView;
@@ -18,6 +19,8 @@ export default function CommandButton({
   const Icon = icon;
   const canDoCommand = command(editorView.state);
 
+  const cx = classNames("ToolbarIcon", canDoCommand && "enabled");
+
   return (
     <button
       title={title}
@@ -29,11 +32,10 @@ export default function CommandButton({
         border: "0 solid transparent",
         fontSize: 24,
         borderRadius: 4,
-        background: "white",
-        color: canDoCommand ? "black" : "#ccc",
         padding: "0rem 0.3rem 0.2rem",
         marginRight: "0.1rem",
       }}
+      className={cx}
     >
       <Icon
         style={{
diff --git a/editor/components/ListButton.tsx b/editor/components/ListButton.tsx
index 4d433f0..3edac07 100644
--- a/editor/components/ListButton.tsx
+++ b/editor/components/ListButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { EditorView } from "prosemirror-view";
 import { wrapInList } from "../commands/lists";
 import { IconType } from "react-icons/lib";
+import { classNames } from "./classnames";
 
 type Props = {
   editorView: EditorView;
@@ -20,6 +21,8 @@ export default function ListButton({
   const canWrap = command(editorView.state);
   const Icon = icon;
 
+  const cx = classNames("ToolbarIcon", canWrap && "enabled");
+
   return (
     <button
       title={title}
@@ -31,11 +34,10 @@ export default function ListButton({
         border: "0 solid transparent",
         fontSize: 24,
         borderRadius: 4,
-        background: "white",
-        color: canWrap ? "black" : "#ccc",
         padding: "0rem 0.3rem 0.2rem",
         marginRight: "0.1rem",
       }}
+      className={cx}
     >
       <Icon
         style={{
diff --git a/editor/components/ToggleMarkButton.tsx b/editor/components/ToggleMarkButton.tsx
index c686223..1f4dd54 100644
--- a/editor/components/ToggleMarkButton.tsx
+++ b/editor/components/ToggleMarkButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { EditorView } from "prosemirror-view";
 import { toggleMark } from "prosemirror-commands";
 import { IconType } from "react-icons/lib";
+import { classNames } from "./classnames";
 
 function markActive(state: any, type: any) {
   let { from, $from, to, empty } = state.selection;
@@ -16,10 +17,17 @@ type Props = {
   title: string;
 };
 
-export default function Toolbar({ editorView, icon, mark, title }: Props) {
+export default function ToggleMarkButton({
+  editorView,
+  icon,
+  mark,
+  title,
+}: Props) {
   const isBold = markActive(editorView.state, mark);
   const Icon = icon;
 
+  const cx = classNames("ToolbarMark", isBold && "enabled");
+
   return (
     <button
       title={title}
@@ -32,14 +40,14 @@ export default function Toolbar({ editorView, icon, mark, title }: Props) {
         border: "0 solid transparent",
         fontSize: 26,
         borderRadius: 4,
-        background: isBold ? "black" : "white",
-        color: isBold ? "white" : "black",
         padding: "0rem 0.3rem 0.2rem",
         marginRight: "0.1rem",
       }}
+      className={cx}
     >
       <Icon
         style={{
+          fill: "currentcolor",
           display: "inline-block",
           verticalAlign: "middle",
         }}
diff --git a/editor/components/classnames.ts b/editor/components/classnames.ts
new file mode 100644
index 0000000..9d86e2e
--- /dev/null
+++ b/editor/components/classnames.ts
@@ -0,0 +1,17 @@
+export function classNames(...arguments_: unknown[]): string {
+  const result = new Set();
+
+  for (const item of arguments_) {
+    if (typeof item === "string" && item.length > 0) {
+      result.add(item);
+    } else if (typeof item === "object" && item !== null) {
+      for (const [key, value] of Object.entries(item)) {
+        if (value) {
+          result.add(key);
+        }
+      }
+    }
+  }
+
+  return [...result].join(" ");
+}
diff --git a/editor/template.html b/editor/template.html
index b516eed..a3cb33e 100644
--- a/editor/template.html
+++ b/editor/template.html
@@ -891,6 +891,60 @@
         left: 4px;
         top: 12px;
       }
+
+      .ToolbarIcon {
+        background-color: white;
+        color: #ccc;
+      }
+
+      .ToolbarIcon.enabled {
+        color: black;
+      }
+
+      .ToolbarMark {
+        background-color: white;
+        color: black;
+      }
+
+      .ToolbarMark.enabled {
+        background-color: black;
+        color: white;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        #editor,
+        .editor {
+          background: black;
+          color: white;
+        }
+        #editor-toolbar {
+          background: #121212;
+          border-top: 1px solid #090909;
+        }
+
+        .ToolbarIcon {
+          background-color: transparent;
+          color: rgb(160, 160, 160);
+        }
+
+        .ToolbarIcon.enabled {
+          color: white;
+        }
+
+        .ToolbarMark {
+          background-color: transparent;
+          color: white !important;
+        }
+
+        .ToolbarMark svg {
+          fill: currentColor;
+        }
+
+        .ToolbarMark.enabled {
+          background-color: #4454cf;
+          color: white;
+        }
+      } 
     </style>
   </head>
   <body>