Polished up some UI and added dark/light mode

FastNotes/src/theme/AppThemeProvider.tsx

@@ -0,0 +1,58 @@
+import { createContext, useContext, useEffect, useState } from "react"
+import { Appearance } from "react-native"
+
+import { AppColorScheme, getThemePalette } from "@/src/theme/palette"
+
+type AppThemeContextValue = {
+    colorScheme: AppColorScheme
+    palette: ReturnType<typeof getThemePalette>
+}
+
+const AppThemeContext = createContext<AppThemeContextValue | undefined>(undefined)
+
+function resolveColorScheme(colorScheme: "light" | "dark" | null | undefined): AppColorScheme {
+    return colorScheme === "dark" ? "dark" : "light"
+}
+
+export function AppThemeProvider({ children }: { children: React.ReactNode }) {
+    const [colorScheme, setColorScheme] = useState<AppColorScheme>(() =>
+        resolveColorScheme(Appearance.getColorScheme())
+    )
+
+    useEffect(() => {
+        const subscription = Appearance.addChangeListener(({ colorScheme: nextColorScheme }) => {
+            setColorScheme(resolveColorScheme(nextColorScheme))
+        })
+
+        setColorScheme(resolveColorScheme(Appearance.getColorScheme()))
+
+        return () => {
+            subscription.remove()
+        }
+    }, [])
+
+    return (
+        <AppThemeContext.Provider
+            value={{
+                colorScheme,
+                palette: getThemePalette(colorScheme),
+            }}
+        >
+            {children}
+        </AppThemeContext.Provider>
+    )
+}
+
+export function useAppTheme() {
+    const value = useContext(AppThemeContext)
+
+    if (!value) {
+        throw new Error("useAppTheme must be used inside AppThemeProvider")
+    }
+
+    return value
+}
+
+export function useAppColorScheme() {
+    return useAppTheme().colorScheme
+}

FastNotes/src/theme/palette.ts

@@ -0,0 +1,31 @@
+export type AppColorScheme = "light" | "dark"
+
+const lightPalette = {
+    background: "#f5efe6",
+    surface: "#fffdf8",
+    elevated: "#ffffff",
+    text: "#111111",
+    mutedText: "#5f5a52",
+    border: "#77736e",
+    input: "#ffffff",
+    accent: "#111111",
+    destructive: "#b71c1c",
+    statusBar: "#fffdf8",
+}
+
+const darkPalette = {
+    background: "#000000",
+    surface: "#0b0b0b",
+    elevated: "#111111",
+    text: "#ffffff",
+    mutedText: "#b8b8b8",
+    border: "#ffffff",
+    input: "#151515",
+    accent: "#ffffff",
+    destructive: "#ff6b6b",
+    statusBar: "#000000",
+}
+
+export function getThemePalette(colorScheme: AppColorScheme) {
+    return colorScheme === "dark" ? darkPalette : lightPalette
+}