feat(theme): default to gray theme when no preference exists

- Use  as the initial theme and when no saved preference is found

- Applies  class on first load for consistent styling

Author: 123vivekr

src/contexts/ThemeContext.tsx

@@ -58,7 +58,7 @@ const DEFAULT_CUSTOM_COLORS: CustomThemeColors = {
 };
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme, setThemeState] = useState<ThemeMode>('dark');
+  const [theme, setThemeState] = useState<ThemeMode>('gray');
   const [customColors, setCustomColorsState] = useState<CustomThemeColors>(DEFAULT_CUSTOM_COLORS);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -73,6 +73,10 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
           const themeMode = savedTheme as ThemeMode;
           setThemeState(themeMode);
           await applyTheme(themeMode, customColors);
+        } else {
+          // No saved preference: apply gray as the default theme
+          setThemeState('gray');
+          await applyTheme('gray', customColors);
         }
 
         // Load custom colors
@@ -181,4 +185,4 @@ export const useThemeContext = () => {
     throw new Error('useThemeContext must be used within a ThemeProvider');
   }
   return context;
-};
+};