feat: Add Light & Dark theme support

App.js

@@ -13,6 +13,7 @@ import {CONFIGCAT_SDK_KEY_TEST, CONFIGCAT_SDK_KEY_PROD} from '@env';
 import {BannerProvider} from './src/Components/UIComp/AnimeAdBanner/BannerContext';
 import crashlytics from '@react-native-firebase/crashlytics';
 import analytics from '@react-native-firebase/analytics';
+import {ThemeProvider} from './src/Theme';
 
 /**
  * The main App component that sets up the root of the application.
@@ -54,13 +55,15 @@ const App = () => {
         sdkKey={__DEV__ ? CONFIGCAT_SDK_KEY_TEST : CONFIGCAT_SDK_KEY_PROD}>
         <Provider store={store}>
           <PersistGate loading={<Loading />} persistor={persistor}>
-            <PaperProvider>
-              <BannerProvider>
-                <RootNavigation />
-                <Toast />
-                <ForceUpdate />
-              </BannerProvider>
-            </PaperProvider>
+            <ThemeProvider>
+              <PaperProvider>
+                <BannerProvider>
+                  <RootNavigation />
+                  <Toast />
+                  <ForceUpdate />
+                </BannerProvider>
+              </PaperProvider>
+            </ThemeProvider>
           </PersistGate>
         </Provider>
       </ConfigCatProvider>

src/Navigation/BottomNavigation.js

@@ -14,6 +14,7 @@ import {View, StyleSheet} from 'react-native';
 import {useFeatureFlag} from 'configcat-react';
 import LinkListScreen from '../InkNest-Externals/Screens/Webview/LinkListScreen';
 import FloatingDonationButton from '../InkNest-Externals/Donation/FloatingDonationButton';
+import {useTheme} from '../Theme';
 
 const BottomTab = createBottomTabNavigator();
 
@@ -78,6 +79,7 @@ const TabBarIcon = props => {
  */
 export function BottomNavigation() {
   const {value: forIosValue} = useFeatureFlag('forIos', 'Default');
+  const {colors} = useTheme();
 
   return (
     <>
@@ -88,14 +90,14 @@ export function BottomNavigation() {
               style={[
                 StyleSheet.absoluteFill,
                 {
-                  backgroundColor: '#110918',
+                  backgroundColor: colors.tabBar,
                 },
               ]}
             />
           ),
           headerShown: false,
-          tabBarActiveTintColor: '#D2D2D6',
-          tabBarInactiveTintColor: '#6B666D',
+          tabBarActiveTintColor: colors.tabBarActive,
+          tabBarInactiveTintColor: colors.tabBarInactive,
           tabBarStyle: {
             paddingVertical: 4,
           },

src/Redux/Reducers/index.js

@@ -14,6 +14,7 @@ const initialState = {
   DownloadComic: {},
   scrollPreference: 'horizontal', // Default scroll mode is horizontal
   hasRewardAdsShown: false,
+  themeMode: 'system', // Theme mode: 'light', 'dark', or 'system'
 };
 
 /**
@@ -200,6 +201,10 @@ const Reducers = createSlice({
       // Update the flag indicating whether reward ads have been shown
       state.hasRewardAdsShown = action.payload;
     },
+    setThemeMode: (state, action) => {
+      // Update the theme mode: 'light', 'dark', or 'system'
+      state.themeMode = action.payload;
+    },
   },
 });
 
@@ -224,5 +229,6 @@ export const {
   clearHistory,
   setScrollPreference,
   rewardAdsShown,
+  setThemeMode,
 } = Reducers.actions;
 export default Reducers.reducer;

src/Screens/Settings/index.js

@@ -27,23 +27,136 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {NAVIGATION} from '../../Constants';
 import Header from '../../Components/UIComp/Header';
 import {useDispatch, useSelector} from 'react-redux';
-import {setScrollPreference} from '../../Redux/Reducers';
+import {setScrollPreference, setThemeMode} from '../../Redux/Reducers';
 import DonationBanner from '../../InkNest-Externals/Donation/DonationBanner';
+import {useTheme} from '../../Theme';
+
+/**
+ * Get the display label for the current theme mode
+ * @param {string} mode - The theme mode ('light', 'dark', or 'system')
+ * @returns {string} The display label
+ */
+const getThemeModeLabel = mode => {
+  switch (mode) {
+    case 'light':
+      return 'Light';
+    case 'dark':
+      return 'Dark';
+    case 'system':
+    default:
+      return 'System';
+  }
+};
+
+/**
+ * Get the icon name for the current theme mode
+ * @param {string} mode - The theme mode ('light', 'dark', or 'system')
+ * @returns {string} The icon name
+ */
+const getThemeModeIcon = mode => {
+  switch (mode) {
+    case 'light':
+      return 'white-balance-sunny';
+    case 'dark':
+      return 'moon-waning-crescent';
+    case 'system':
+    default:
+      return 'theme-light-dark';
+  }
+};
 
 export function Settings({navigation}) {
   const dispatch = useDispatch();
   const scrollPreference = useSelector(state => state.data.scrollPreference);
+  const themeMode = useSelector(state => state.data.themeMode) || 'system';
+  const {colors} = useTheme();
+
+  /**
+   * Cycle through theme modes: system -> light -> dark -> system
+   */
+  const handleThemeToggle = () => {
+    analytics().logEvent('toggle_theme_mode', {
+      item: 'Theme Mode',
+      currentMode: themeMode,
+    });
+
+    let newMode;
+    switch (themeMode) {
+      case 'system':
+        newMode = 'light';
+        break;
+      case 'light':
+        newMode = 'dark';
+        break;
+      case 'dark':
+      default:
+        newMode = 'system';
+        break;
+    }
+
+    dispatch(setThemeMode(newMode));
+
+    Alert.alert(
+      'Theme Changed',
+      `App theme is now set to ${getThemeModeLabel(newMode)}.`,
+      [{text: 'OK'}],
+    );
+  };
 
   return (
-    <SafeAreaView style={{flex: 1, backgroundColor: '#14142A'}} edges={['top']}>
-      <Header title="Settings" />
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: colors.background}}
+      edges={['top']}>
+      <Header
+        title="Settings"
+        style={{backgroundColor: colors.headerBackground}}
+        TitleStyle={{color: colors.text}}
+      />
       <DonationBanner />
 
       <ScrollView showsVerticalScrollIndicator={false}>
         <TouchableOpacity
           style={{
             paddingVertical: hp('1%'),
-            backgroundColor: '#FFF',
+            backgroundColor: colors.settingsItem,
+            marginHorizontal: widthPercentageToDP('2%'),
+            marginVertical: hp('1%'),
+            paddingHorizontal: 10,
+            borderRadius: 5,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+          onPress={handleThemeToggle}>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <MaterialCommunityIcons
+              name={getThemeModeIcon(themeMode)}
+              size={hp('2.5%')}
+              color={colors.settingsItemText}
+              style={{marginRight: 10}}
+            />
+            <Text
+              style={{
+                fontSize: hp('2%'),
+                fontWeight: 'bold',
+                color: colors.settingsItemText,
+              }}>
+              Theme
+            </Text>
+          </View>
+          <Text
+            style={{
+              fontSize: hp('1.8%'),
+              color: colors.link,
+            }}>
+            {getThemeModeLabel(themeMode)}
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={{
+            paddingVertical: hp('1%'),
+            backgroundColor: colors.settingsItem,
             marginHorizontal: widthPercentageToDP('2%'),
             marginVertical: hp('1%'),
             paddingHorizontal: 10,
@@ -60,14 +173,14 @@ export function Settings({navigation}) {
           <Ionicons
             name="information-circle-outline"
             size={hp('2.5%')}
-            color="#000"
+            color={colors.settingsItemText}
             style={{marginRight: 10}}
           />
           <Text
             style={{
               fontSize: hp('2%'),
               fontWeight: 'bold',
-              color: '#000',
+              color: colors.settingsItemText,
             }}>
             About us
           </Text>
@@ -231,7 +344,7 @@ export function Settings({navigation}) {
           <Text
             style={{
               fontSize: hp('1.8%'),
-              color: '#007AFF',
+              color: colors.link,
             }}>
             {scrollPreference === 'horizontal' ? 'Horizontal' : 'Vertical'}
           </Text>

src/Theme/ThemeContext.js

@@ -0,0 +1,76 @@
+import React, {createContext, useContext, useMemo} from 'react';
+import {useSelector} from 'react-redux';
+import {useColorScheme} from 'react-native';
+import {lightColors, darkColors} from './colors';
+
+/**
+ * @typedef {'light' | 'dark' | 'system'} ThemeMode
+ */
+
+/**
+ * Theme context that provides the current theme colors and mode information.
+ */
+const ThemeContext = createContext({
+  colors: darkColors,
+  isDark: true,
+  themeMode: 'system',
+});
+
+/**
+ * ThemeProvider component that wraps the application and provides theme context.
+ * It reads the theme preference from Redux store and the system color scheme
+ * to determine the current theme.
+ *
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components
+ * @returns {JSX.Element} The provider component wrapping children
+ */
+export function ThemeProvider({children}) {
+  const systemColorScheme = useColorScheme();
+  const themeMode = useSelector(state => state.data.themeMode) || 'system';
+
+  const {colors, isDark} = useMemo(() => {
+    let isDarkTheme;
+
+    if (themeMode === 'system') {
+      isDarkTheme = systemColorScheme === 'dark';
+    } else {
+      isDarkTheme = themeMode === 'dark';
+    }
+
+    return {
+      colors: isDarkTheme ? darkColors : lightColors,
+      isDark: isDarkTheme,
+    };
+  }, [themeMode, systemColorScheme]);
+
+  const value = useMemo(
+    () => ({
+      colors,
+      isDark,
+      themeMode,
+    }),
+    [colors, isDark, themeMode],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+/**
+ * Custom hook to access the current theme context.
+ * Must be used within a ThemeProvider.
+ *
+ * @returns {{ colors: typeof darkColors, isDark: boolean, themeMode: string }}
+ *   The current theme colors, dark mode flag, and theme mode setting
+ */
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export {lightColors, darkColors};