refactor(Themes): Preventing possible null errors

ui/src/components/CustomizeTheme/index.tsx

@@ -9,7 +9,7 @@ import { themeSettingStore } from '@/stores';
 const Index: FC = () => {
   const { theme, theme_config } = themeSettingStore((_) => _);
   let primaryColor;
-  if (theme_config[theme]?.primary_color) {
+  if (theme_config?.[theme]?.primary_color) {
     primaryColor = Color(theme_config[theme].primary_color);
   }
 

ui/src/components/Header/index.tsx

@@ -72,17 +72,17 @@ const Header: FC = () => {
     }
   }, [location.pathname]);
 
+  let navbarStyle = 'theme-colored';
   const { theme, theme_config } = themeSettingStore((_) => _);
-  let themeType = 'theme-colored';
-  if (theme && theme_config[theme]) {
-    themeType = `theme-${theme_config[theme].navbar_style}`;
+  if (theme_config?.[theme]?.navbar_style) {
+    navbarStyle = `theme-${theme_config[theme].navbar_style}`;
   }
 
   return (
     <Navbar
-      variant={themeType === 'theme-colored' ? 'dark' : ''}
+      variant={navbarStyle === 'theme-colored' ? 'dark' : ''}
       expand="lg"
-      className={classnames('sticky-top', themeType)}
+      className={classnames('sticky-top', navbarStyle)}
       id="header">
       <Container className="d-flex align-items-center">
         <Navbar.Toggle
@@ -124,7 +124,7 @@ const Header: FC = () => {
                 {loginSetting.allow_new_registrations && (
                   <Button
                     variant={
-                      themeType === 'theme-colored' ? 'light' : 'primary'
+                      navbarStyle === 'theme-colored' ? 'light' : 'primary'
                     }
                     href="/users/register">
                     {t('btns.signup')}
@@ -181,8 +181,8 @@ const Header: FC = () => {
                   <Link
                     to="/questions/ask"
                     className={classnames('text-capitalize text-nowrap btn', {
-                      'btn-light': themeType !== 'theme-light',
-                      'btn-primary': themeType === 'theme-light',
+                      'btn-light': navbarStyle !== 'theme-light',
+                      'btn-primary': navbarStyle === 'theme-light',
                     })}>
                     {t('btns.add_question')}
                   </Link>
@@ -199,8 +199,8 @@ const Header: FC = () => {
                 <Button
                   variant="link"
                   className={classnames('me-2', {
-                    'link-light': themeType === 'theme-colored',
-                    'link-primary': themeType !== 'theme-colored',
+                    'link-light': navbarStyle === 'theme-colored',
+                    'link-primary': navbarStyle !== 'theme-colored',
                   })}
                   href="/users/login">
                   {t('btns.login')}
@@ -208,7 +208,7 @@ const Header: FC = () => {
                 {loginSetting.allow_new_registrations && (
                   <Button
                     variant={
-                      themeType === 'theme-colored' ? 'light' : 'primary'
+                      navbarStyle === 'theme-colored' ? 'light' : 'primary'
                     }
                     href="/users/register">
                     {t('btns.signup')}

ui/src/pages/Admin/Themes/index.tsx

@@ -23,7 +23,7 @@ const Index: FC = () => {
         description: t('themes.text'),
         enum: themeSetting?.theme_options?.map((_) => _.value),
         enumNames: themeSetting?.theme_options?.map((_) => _.label),
-        default: 'default',
+        default: themeSetting?.theme_options?.[0]?.value,
       },
       navbar_style: {
         type: 'string',
@@ -31,12 +31,13 @@ const Index: FC = () => {
         description: t('navbar_style.text'),
         enum: ['colored', 'light'],
         enumNames: ['Colored', 'Light'],
+        default: 'colored',
       },
       primary_color: {
         type: 'string',
         title: t('primary_color.label'),
         description: t('primary_color.text'),
-        default: '#ffffff',
+        default: '#0033FF',
       },
     },
   };
@@ -68,6 +69,7 @@ const Index: FC = () => {
         },
       },
     };
+
     putThemeSetting(reqParams)
       .then(() => {
         Toast.onShow({

ui/src/stores/themeSetting.ts

@@ -5,12 +5,19 @@ import { AdminSettingsTheme } from '@/common/interface';
 interface IType {
   theme: AdminSettingsTheme['theme'];
   theme_config: AdminSettingsTheme['theme_config'];
+  theme_options: AdminSettingsTheme['theme_options'];
   update: (params: AdminSettingsTheme) => void;
 }
 
 const store = create<IType>((set) => ({
-  theme: '',
-  theme_config: {},
+  theme: 'default',
+  theme_options: [{ label: 'Default', value: 'default' }],
+  theme_config: {
+    default: {
+      navbar_style: 'colored',
+      primary_color: '#0033FF',
+    },
+  },
   update: (params) =>
     set((state) => {
       return {