feat: added experimental light mode toggle

Vali-98 · Feb 7, 2025 · f880684 · f880684
1 parent 7750003
commit f880684
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 15 deletions.
diff --git a/app/AppSettingsMenu.tsx b/app/AppSettingsMenu.tsx
@@ -16,6 +16,8 @@ import React from 'react'
 import { ScrollView, Text, View } from 'react-native'
 import { useMMKVBoolean } from 'react-native-mmkv'
 
+import DarkModeSwitch from './DarkModeSwitch'
+
 const appVersion = appConfig.expo.version
 
 const exportDB = async (notify: boolean = true) => {
@@ -98,14 +100,14 @@ const AppSettingsMenu = () => {
             <HeaderTitle title="Settings" />
 
             <SectionTitle>Style</SectionTitle>
-            <ThemedButton
+            {/*<ThemedButton
                 label="Customize Colors"
                 variant="secondary"
                 onPress={() => {
                     router.push('/ColorSettings')
                 }}
-            />
-
+            />*/}
+            <DarkModeSwitch />
             <SectionTitle>Chat</SectionTitle>
 
             <ThemedSwitch

diff --git a/app/DarkModeSwitch.tsx b/app/DarkModeSwitch.tsx
@@ -0,0 +1,23 @@
+import ThemedSwitch from '@components/input/ThemedSwitch'
+import { DefaultColorSchemes } from '@lib/theme/ThemeColor'
+import { Theme } from '@lib/theme/ThemeManager'
+import React from 'react'
+
+const DarkModeSwitch = () => {
+    const { color, setColor } = Theme.useColorState((state) => ({
+        color: state.color,
+        setColor: state.setColor,
+    }))
+
+    return (
+        <ThemedSwitch
+            label="Dark Mode"
+            value={color.name === DefaultColorSchemes.lavenderDark.name}
+            onChangeValue={(b) =>
+                setColor(b ? DefaultColorSchemes.lavenderDark : DefaultColorSchemes.lavenderLight)
+            }
+        />
+    )
+}
+
+export default DarkModeSwitch
diff --git a/lib/theme/ThemeColor.ts b/lib/theme/ThemeColor.ts
@@ -23,7 +23,7 @@ export interface ColorScheme {
 }
 
 export namespace DefaultColorSchemes {
-    export const navyBlueDark: ColorScheme = {
+    export const lavenderDark: ColorScheme = {
         name: 'NavyBlueDark',
         primary: {
             _100: '#2a254d',
@@ -167,7 +167,7 @@ export namespace DefaultColorSchemes {
         shadow: '#000000',
     }
 
-    export const navyBlueLight: ColorScheme = {
+    export const lavenderLight: ColorScheme = {
         name: 'NavyBlueLight',
         primary: {
             _100: '#e8e6ff',
@@ -192,15 +192,15 @@ export namespace DefaultColorSchemes {
             _900: '#2e387b',
         },
         neutral: {
-            _100: '#f0e6f8',
-            _200: '#dccbf0',
-            _300: '#c3a8e0',
-            _400: '#ad89d0',
-            _500: '#976bbf',
-            _600: '#7a5299',
-            _700: '#62407a',
-            _800: '#482f5a',
-            _900: '#2e1c3a',
+            _100: '#EDEAF4', // Lightest - subtle lavender off-white
+            _200: '#D8D4E6',
+            _300: '#C4BED8',
+            _400: '#B0A8CA',
+            _500: '#9C92BB', // Midpoint - neutral gray with a lavender undertone
+            _600: '#7D759A',
+            _700: '#5E5878',
+            _800: '#3F3B55',
+            _900: '#211F33',
         },
         warning: {
             _100: '#fff5e6',

diff --git a/lib/theme/ThemeManager.ts b/lib/theme/ThemeManager.ts
@@ -18,7 +18,7 @@ export namespace Theme {
     export const useColorState = create<ColorStateProps>()(
         persist(
             (set, get) => ({
-                color: DefaultColorSchemes.navyBlueDark,
+                color: DefaultColorSchemes.lavenderDark,
                 setColor: (color) => {
                     set((state) => ({ ...state, color: color }))
                 },
@@ -27,6 +27,7 @@ export namespace Theme {
                 name: 'colorscheme-storage',
                 storage: createJSONStorage(() => mmkvStorage),
                 version: 1,
+                partialize: (state) => ({ color: state.color }),
             }
         )
     )