Some basic styling

src/utils/styles/ThemeManager.tsx

@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { Appearance, useColorScheme } from 'react-native-appearance'
+import { ColorDefinitions, getTheme } from 'src/utils/styles/themes'
+
+const osTheme = Appearance.getColorScheme() as 'light' | 'dark'
+
+export const ManageThemeContext: React.Context<{
+  mode: 'light' | 'dark'
+  theme: { [key in ColorDefinitions]: string }
+  toggle: () => void
+}> = createContext({
+  mode: osTheme,
+  theme: getTheme(osTheme),
+  toggle: () => {}
+})
+
+export const useTheme = () => useContext(ManageThemeContext)
+
+const ThemeManager: React.FC = ({ children }) => {
+  const [mode, setMode] = useState(osTheme)
+  const systemTheme = useColorScheme()
+
+  const toggleTheme = () => {
+    mode === 'light' ? setMode('dark') : setMode('light')
+  }
+
+  useEffect(() => {
+    setMode(systemTheme === 'no-preference' ? 'light' : systemTheme)
+  }, [systemTheme])
+
+  return (
+    <ManageThemeContext.Provider
+      value={{
+        mode: mode,
+        theme: getTheme(mode),
+        toggle: toggleTheme
+      }}
+    >
+      {children}
+    </ManageThemeContext.Provider>
+  )
+}
+
+export default ThemeManager

src/utils/styles/constants.ts

@@ -0,0 +1,16 @@
+export default {
+  FONT_SIZE_S: 12,
+  FONT_SIZE_M: 14,
+  FONT_SIZE_L: 18,
+
+  SPACING_XS: 4,
+  SPACING_S: 8,
+  SPACING_M: 16,
+  SPACING_L: 24,
+  SPACING_XL: 40,
+
+  GLOBAL_PAGE_PADDING: 16, // SPACING_M
+
+  AVATAR_S: 52,
+  AVATAR_L: 104
+}

src/utils/styles/themes.ts

@@ -0,0 +1,80 @@
+import { DefaultTheme, DarkTheme } from '@react-navigation/native'
+
+export type ColorDefinitions =
+  | 'primary'
+  | 'secondary'
+  | 'background'
+  | 'link'
+  | 'border'
+  | 'separator'
+
+const themeColors: {
+  [key in ColorDefinitions]: {
+    light: string
+    dark: string
+  }
+} = {
+  primary: {
+    light: 'rgb(0, 0, 0)',
+    dark: 'rgb(255, 255, 255)'
+  },
+  secondary: {
+    light: 'rgb(153, 153, 153)',
+    dark: 'rgb(117, 117, 117)'
+  },
+  background: {
+    light: 'rgb(255, 255, 255)',
+    dark: 'rgb(0, 0, 0)'
+  },
+  link: {
+    light: 'rgb(0, 122, 255)',
+    dark: 'rgb(10, 132, 255)'
+  },
+  border: {
+    light: 'rgba(0, 0, 0, 0.3)',
+    dark: 'rgba(255, 255, 255, 0.16)'
+  },
+  separator: {
+    light: 'rgba(0, 0, 0, 0.1)',
+    dark: 'rgba(255, 255, 255, 0.1)'
+  }
+}
+
+const getTheme = (mode: 'light' | 'dark') => {
+  let Theme = {} as {
+    [key in ColorDefinitions]: string
+  }
+  const keys = Object.keys(themeColors) as ColorDefinitions[]
+  keys.forEach(key => (Theme[key] = themeColors[key][mode]))
+
+  return Theme
+}
+
+const themes = {
+  light: {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      primary: themeColors.primary.light,
+      background: themeColors.background.light,
+      card: themeColors.background.light || 'rgba(249, 249, 249, 0.94)',
+      text: themeColors.primary.light,
+      border: themeColors.border.light,
+      notification: 'rgb(255, 59, 48)'
+    }
+  },
+  dark: {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      primary: themeColors.primary.dark,
+      background: themeColors.background.dark,
+      card: themeColors.background.dark || 'rgba(22, 22, 22, 0.94)',
+      text: themeColors.primary.dark,
+      border: themeColors.border.dark,
+      notification: 'rgb(255, 69, 58)'
+    }
+  }
+}
+
+export { themeColors, getTheme, themes }