feat(theme): add dark mode with next-themes and settings toggle

store/auth.ts

@@ -13,6 +13,8 @@ const defaultNotificationPrefs: NotificationPrefs = {
   system: false,
 }
 
+export type ThemePreference = "light" | "dark" | "system"
+
 interface AuthState {
   isAuthenticated: boolean
   currentRole: UserRole
@@ -20,14 +22,16 @@ interface AuthState {
   verificationStatus: Partial<Record<UserRole, VerificationStatus>>
   verificationReasons: Partial<Record<UserRole, string>>
   notificationPrefs: NotificationPrefs
+  themePreference: ThemePreference
   user: User | null
   switchRole: (role: UserRole) => void
   submitVerification: (role: UserRole) => void
   approveVerification: (role: UserRole) => void
   rejectVerification: (role: UserRole, reason: string) => void
   setNotificationPref: (type: keyof NotificationPrefs, enabled: boolean) => void
+  setThemePreference: (theme: ThemePreference) => void
   updateProfile: (patch: { nickname?: string; bio?: string; avatar?: string }) => void
-  login: (user: User, verifiedRoles?: UserRole[]) => void
+  login: (user: User, verifiedRoles?: UserRole[], themePreference?: ThemePreference) => void
   logout: () => void
 }
 
@@ -38,6 +42,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
   verificationStatus: { consumer: "approved" },
   verificationReasons: {},
   notificationPrefs: defaultNotificationPrefs,
+  themePreference: "system",
   user: null,
   switchRole: (role) => {
     const { verifiedRoles } = get()
@@ -106,6 +111,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         [type]: enabled,
       },
     })),
+  setThemePreference: (theme) => set({ themePreference: theme }),
   updateProfile: (patch) =>
     set((state) => {
       if (!state.user) return state
@@ -119,7 +125,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         },
       }
     }),
-  login: (user, verifiedRoles = ["consumer"]) =>
+  login: (user, verifiedRoles = ["consumer"], themePreference) =>
     set((state) => ({
       isAuthenticated: true,
       user,
@@ -134,6 +140,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       ),
       verificationReasons: {},
       notificationPrefs: state.notificationPrefs,
+      themePreference: themePreference ?? state.themePreference,
     })),
   logout: () =>
     set({
@@ -143,6 +150,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       verificationStatus: { consumer: "approved" },
       verificationReasons: {},
       notificationPrefs: defaultNotificationPrefs,
+      themePreference: "system",
       user: null,
     }),
 }))