Merge pull request 'main' (#72) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/72

app/components/Settings.tsx

@@ -11,6 +11,7 @@ import {
   checkCredentials,
   deleteAccount,
 } from '../backend/database';
+import { equal } from 'assert';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
@@ -85,9 +86,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
     const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
     const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
+    const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim());
+    const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim());
+    const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
+    const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim());
+    const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim());
+    const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim());
+    const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
+    const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());
+
 
     // Theme selection
-    const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
+    const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+    useEffect(() => {
+      const savedTheme = localStorage.getItem('selectedTheme');
+      if (savedTheme) {
+        setSelectedTheme(savedTheme);
+        // Apply the saved theme on initial load
+        switch (savedTheme) {
+          case 'IOMARKET':
+            applyIOMarketTheme();
+            break;
+          case 'WHITE':
+            applyWhiteTheme();
+            break;
+          case 'BLACK':
+            applyBlackTheme();
+            break;
+          case 'CUSTOM':
+            // Handle custom theme application here if necessary
+            break;
+          default:
+            applyIOMarketTheme();
+            break;
+        }
+      }   
+    }, []); // Runs only once when the component mounts
 
     // API Keys
     const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
@@ -146,8 +181,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           openai,
           anthropic,
           google,
+          // Additional theme settings
+          faqBackgroundColor,
+          faqHeadingColor,
+          faqItemBackgroundColor,
+          faqItemHeadingColor,
+          faqItemTextColor,
+          faqItemHoverBackgroundColor,
+          popupBackgroundColor,
+          overlayTextColor,
       };
-
         // Update local storage
       for (const [key, value] of Object.entries(settings)) {
           if (typeof value === 'boolean') {
@@ -196,6 +239,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     openai,
     anthropic,
     google,
+    // Additional theme settings
+    faqBackgroundColor,
+    faqHeadingColor,
+    faqItemBackgroundColor,
+    faqItemHeadingColor,
+    faqItemTextColor,
+    faqItemHoverBackgroundColor,
+    popupBackgroundColor,
+    overlayTextColor,
   ]);
 
   useEffect(() => {
@@ -311,11 +363,45 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       }
 
       if (settings.burgerMenu) {
-      setBurgerMenu(settings.fontSize);
+        setBurgerMenu(settings.burgerMenu);
-      document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
+        document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu);
+      }
+
+      // Additional theme settings
+      if (settings.faqBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor);
+      }
+
+      if (settings.faqHeadingColor) {
+        document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor);
+      }
+
+      if (settings.faqItemBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor);
+      }
+
+      if (settings.faqItemHeadingColor) {
+        document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor);
+      }
+
+      if (settings.faqItemTextColor) {
+        document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor);
+      }
+
+      if (settings.faqItemHoverBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor);
+      }
+
+      if (settings.popupBackgroundColor) {
+        document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor);
+      }
+
+      if (settings.overlayTextColor) {
+        document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor);
       }
     };
 
+
     // Function to handle updating all credentials
     const handleUpdateCredentials = async () => {
       // Update account information
@@ -532,28 +618,31 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   <select
                     value={selectedTheme}
                     onChange={(e) => {
-                    const theme = e.target.value; // Get the selected value from the event
+                      const theme = e.target.value;
-                    setSelectedTheme(theme); // Update state for selected theme
+                      if (theme !== "default") {
+                        setSelectedTheme(theme);
+                        localStorage.setItem("selectedTheme", theme);
           
                         // Apply the appropriate theme based on selection
-                    switch (theme) { // Use 'theme' instead of 'selectedTheme'
+                        switch (theme) {
                           case 'IOMARKET':
-                        applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
+                            applyIOMarketTheme();
                             break;
                           case 'WHITE':
-                        applyWhiteTheme(); // Call the function to apply the WHITE theme
+                            applyWhiteTheme();
                             break;
                           case 'BLACK':
-                        applyBlackTheme(); // Call the function to apply the BLACK theme
+                            applyBlackTheme();
                             break;
                           case 'CUSTOM':
                             // Handle custom theme logic here if necessary
                             break;
                           default:
-                        applyIOMarketTheme(); // Fallback to the IOMARKET theme
+                            applyIOMarketTheme();
                             break;
                         }
-                  }} // Handle theme selection
+                      }
+                    }}
                   >
                     <option value="default">Select your style...</option>
                     <option value="IOMARKET">IOMARKET</option>
@@ -562,10 +651,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                     <option value="CUSTOM">CUSTOM</option>
                   </select>
                 </div>
-
                 {/* Conditionally render theme settings only if "CUSTOM" is selected */}
                 {selectedTheme === 'CUSTOM' && (
                   <>
+                    {/* Font Size */}
                     <div className="settings-option">
                       <p>Font Size</p>
                       <input
@@ -582,6 +671,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       <span>{fontSize}</span>
                     </div>
 
+                    {/* Background Color */}
                     <div className="settings-option">
                       <p>Background Color</p>
                       <input
@@ -595,6 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Text Color */}
                     <div className="settings-option">
                       <p>Text Color</p>
                       <input
@@ -608,6 +699,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Background Color */}
                     <div className="settings-option">
                       <p>Input Background Color</p>
                       <input
@@ -621,6 +713,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Button Color */}
                     <div className="settings-option">
                       <p>Input Button Color</p>
                       <input
@@ -634,6 +727,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Button Hover Color */}
                     <div className="settings-option">
                       <p>Input Button Hover Color</p>
                       <input
@@ -647,6 +741,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* User Message Background Color */}
                     <div className="settings-option">
                       <p>User Message Background Color</p>
                       <input
@@ -660,6 +755,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* User Message Text Color */}
                     <div className="settings-option">
                       <p>User Message Text Color</p>
                       <input
@@ -673,6 +769,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* AI Message Background Color */}
                     <div className="settings-option">
                       <p>AI Message Background Color</p>
                       <input
@@ -686,6 +783,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* AI Message Text Color */}
                     <div className="settings-option">
                       <p>AI Message Text Color</p>
                       <input
@@ -699,6 +797,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Button Background Color */}
                     <div className="settings-option">
                       <p>Button Background Color</p>
                       <input
@@ -712,6 +811,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Button Hover Background Color */}
                     <div className="settings-option">
                       <p>Button Hover Background Color</p>
                       <input
@@ -725,6 +825,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Models Background Color */}
                     <div className="settings-option">
                       <p>Models Background Color</p>
                       <input
@@ -738,6 +839,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* History Background Color */}
                     <div className="settings-option">
                       <p>History Background Color</p>
                       <input
@@ -751,6 +853,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Left Panel Background Color */}
                     <div className="settings-option">
                       <p>Left Panel Background Color</p>
                       <input
@@ -764,6 +867,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Conversation Background Color */}
                     <div className="settings-option">
                       <p>Conversation Background Color</p>
                       <input
@@ -777,6 +881,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Pop-up Text Color */}
                     <div className="settings-option">
                       <p>Pop-up Text Color</p>
                       <input
@@ -790,19 +895,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
-                  <div className="settings-option">
+                    {/* Input Border Color */}
-                    <p>Burger Menu Color</p>
-                    <input
-                      type="color"
-                      value={burgerMenu}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setBurgerMenu(newColor);
-                        document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
-                      }}
-                    />
-                  </div>
-
                     <div className="settings-option">
                       <p>Input Border Color</p>
                       <input
@@ -816,6 +909,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Font Family */}
                     <div className="settings-option">
                       <p>Font Family</p>
                       <select
@@ -843,6 +937,117 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       </select>
                     </div>
 
+                    {/* FAQ Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Background Color</p>
+                      <input
+                        type="color"
+                        value={faqBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Heading Color */}
+                    <div className="settings-option">
+                      <p>FAQ Heading Color</p>
+                      <input
+                        type="color"
+                        value={faqHeadingColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqHeadingColor(newColor);
+                          document.documentElement.style.setProperty('--faq-heading-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Background Color</p>
+                      <input
+                        type="color"
+                        value={faqItemBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Heading Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Heading Color</p>
+                      <input
+                        type="color"
+                        value={faqItemHeadingColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemHeadingColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Text Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Text Color</p>
+                      <input
+                        type="color"
+                        value={faqItemTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemTextColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-text-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Hover Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Hover Background Color</p>
+                      <input
+                        type="color"
+                        value={faqItemHoverBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemHoverBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* Popup Background Color */}
+                    <div className="settings-option">
+                      <p>Popup Background Color</p>
+                      <input
+                        type="color"
+                        value={popupBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setPopupBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--popup-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* Overlay Text Color */}
+                    <div className="settings-option">
+                      <p>Overlay Text Color</p>
+                      <input
+                        type="color"
+                        value={overlayTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setOverlayTextColor(newColor);
+                          document.documentElement.style.setProperty('--overlay-text-color', newColor);
+                        }}
+                      />
+                    </div>
                   </>
                 )}
             </div>
@@ -1033,7 +1238,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     mistral,
     openai,
     anthropic,
-   google
+    google,
+  
+    // Additional theme settings if needed
+    faqBackgroundColor,
+    faqHeadingColor,
+    faqItemBackgroundColor,
+    faqItemHeadingColor,
+    faqItemTextColor,
+    faqItemHoverBackgroundColor,
+    popupBackgroundColor,
+    overlayTextColor,  
 };
 
 
@@ -1059,7 +1274,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={() => { 
                   applySettings; 
                   getAllLocalStorageItems(); 
-                  closeSettings(); // This is invoked when the button is clicked
+                  closeSettings(); 
               }}>
                   Apply
             </button>

app/components/theme.ts

@@ -94,3 +94,64 @@ export const applyBlackTheme = () => {
     document.documentElement.style.setProperty('--font-size', '16px'); // Font size
     document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
 };
+
+export const applyCustomTheme = () => {
+    // Theme variables   
+    const themeVariables = {
+        backgroundColor: localStorage.getItem('backgroundColor'),
+        textColor: localStorage.getItem('textColor'),
+        inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
+        inputButtonColor: localStorage.getItem('inputButtonColor'),
+        inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
+        userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
+        userMessageTextColor: localStorage.getItem('userMessageTextColor'),
+        aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
+        aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
+        buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
+        buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
+        modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
+        historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
+        leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
+        conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
+        popUpTextColor: localStorage.getItem('popUpTextColor'),
+        inputBorderColor: localStorage.getItem('inputBorderColor'),
+        fontFamily: localStorage.getItem('fontFamily'),
+        fontSize: localStorage.getItem('fontSize'),
+        burgerMenu: localStorage.getItem('burgerMenu'),
+        faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
+        faqHeadingColor: localStorage.getItem('faqHeadingColor'),
+        faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
+        faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
+        faqItemTextColor: localStorage.getItem('faqItemTextColor'),
+        faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
+        popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
+        overlayTextColor: localStorage.getItem('overlayTextColor'),
+      };
+          
+      document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
+      document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
+      document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
+      document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
+      document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
+      document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
+      document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
+      document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
+      document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
+      document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
+      document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
+      document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
+      document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
+      document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
+      document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
+      document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
+      document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
+      document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
+      document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
+      document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
+      document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
+      document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
+      document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
+    
+}

app/page.tsx

@@ -7,6 +7,8 @@ import Documentation from './components/Documentation'; // Ensure the import pat
 import History from './components/History';
 import Models from './components/Models';
 import Credits from './components/Credits';
+import Settings from './components/Settings';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
 import Head from 'next/head';
 import './styles/master.css';
 
@@ -26,6 +28,33 @@ const LandingPage: React.FC = () => {
     }
   };
 
+  const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+    useEffect(() => {
+      const savedTheme = localStorage.getItem('selectedTheme');
+      if (savedTheme) {
+        setSelectedTheme(savedTheme);
+        // Apply the saved theme on initial load
+        switch (savedTheme) {
+          case 'IOMARKET':
+            applyIOMarketTheme();
+            break;
+          case 'WHITE':
+            applyWhiteTheme();
+            break;
+          case 'BLACK':
+            applyBlackTheme();
+            break;
+          case 'CUSTOM':
+            applyCustomTheme();
+            break;
+          default:
+            applyIOMarketTheme();
+            break;
+        }
+      }   
+    }, []); // Runs only once when the component mounts          
+
   return (
     <>
         <Header