From 1f35b83322ce2c38eaf99b501095515ece5b54f3 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Mon, 30 Sep 2024 16:07:01 +0200
Subject: [PATCH 1/2] Dear god have mercy

---
 app/components/Settings.tsx | 1119 +++++++++++++++++++++--------------
 app/components/theme.ts     |   62 +-
 app/page.tsx                |   29 +
 3 files changed, 757 insertions(+), 453 deletions(-)

diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 48e452c..bb203d3 100644
--- a/app/components/Settings.tsx
+++ b/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,9 +181,17 @@ 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
+        // Update local storage
       for (const [key, value] of Object.entries(settings)) {
           if (typeof value === 'boolean') {
               localStorage.setItem(key, JSON.stringify(value));
@@ -157,45 +200,54 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           }
       }
   }, [
-      activeSection,
-      preferredLanguage,
-      preferredCurrency,
-      dateFormat,
-      timeFormat,
-      timeZone,
-      selectedOption,
-      disableChatHistory,
-      disableAIMemory,
-      openSourceMode,
-      newName,
-      newEmail,
-      newPassword,
-      preferredMeasurement,
-      backgroundColor,
-      textColor,
-      inputBackgroundColor,
-      inputButtonColor,
-      inputButtonHoverColor,
-      userMessageBackgroundColor,
-      userMessageTextColor,
-      aiMessageBackgroundColor,
-      aiMessageTextColor,
-      buttonBackgroundColor,
-      buttonHoverBackgroundColor,
-      modelsBackgroundColor,
-      historyBackgroundColor,
-      leftPanelBackgroundColor,
-      conversationBackgroundColor,
-      popUpTextColor,
-      inputBorderColor,
-      fontFamily,
-      fontSize,
-      burgerMenu,
-      selectedTheme,
-      mistral,
-      openai,
-      anthropic,
-      google,
+    activeSection,
+    preferredLanguage,
+    preferredCurrency,
+    dateFormat,
+    timeFormat,
+    timeZone,
+    selectedOption,
+    disableChatHistory,
+    disableAIMemory,
+    openSourceMode,
+    newName,
+    newEmail,
+    newPassword,
+    preferredMeasurement,
+    backgroundColor,
+    textColor,
+    inputBackgroundColor,
+    inputButtonColor,
+    inputButtonHoverColor,
+    userMessageBackgroundColor,
+    userMessageTextColor,
+    aiMessageBackgroundColor,
+    aiMessageTextColor,
+    buttonBackgroundColor,
+    buttonHoverBackgroundColor,
+    modelsBackgroundColor,
+    historyBackgroundColor,
+    leftPanelBackgroundColor,
+    conversationBackgroundColor,
+    popUpTextColor,
+    inputBorderColor,
+    fontFamily,
+    fontSize,
+    burgerMenu,
+    selectedTheme,
+    mistral,
+    openai,
+    anthropic,
+    google,
+    // Additional theme settings
+    faqBackgroundColor,
+    faqHeadingColor,
+    faqItemBackgroundColor,
+    faqItemHeadingColor,
+    faqItemTextColor,
+    faqItemHoverBackgroundColor,
+    popupBackgroundColor,
+    overlayTextColor,
   ]);
 
   useEffect(() => {
@@ -214,107 +266,141 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   // Apply imported settings to the CSS variables
-  const applySettings = (settings: any) => {
-    if (settings.backgroundColor) {
-      setBackgroundColor(settings.backgroundColor);
-      document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
-    }
-    
-    if (settings.textColor) {
-      setTextColor(settings.textColor);
-      document.documentElement.style.setProperty('--text-color', settings.textColor);
-    }
-    
-    if (settings.inputBackgroundColor) {
-      setInputBackgroundColor(settings.inputBackgroundColor);
-      document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
-    }
-    
-    if (settings.inputButtonColor) {
-      setInputButtonColor(settings.inputButtonColor);
-      document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
-    }
-    
-    if (settings.inputButtonHoverColor) {
-      setInputButtonHoverColor(settings.inputButtonHoverColor);
-      document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
-    }
-    
-    if (settings.userMessageBackgroundColor) {
-      setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
-      document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
-    }
-    
-    if (settings.userMessageTextColor) {
-      setUserMessageTextColor(settings.userMessageTextColor);
-      document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
-    }
-    
-    if (settings.aiMessageBackgroundColor) {
-      setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
-      document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
-    }
-    
-    if (settings.aiMessageTextColor) {
-      setAiMessageTextColor(settings.aiMessageTextColor);
-      document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
-    }
-    
-    if (settings.buttonBackgroundColor) {
-      setButtonBackgroundColor(settings.buttonBackgroundColor);
-      document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
-    }
-    
-    if (settings.buttonHoverBackgroundColor) {
-      setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
-      document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
-    }
-    
-    if (settings.modelsBackgroundColor) {
-      setModelsBackgroundColor(settings.modelsBackgroundColor);
-      document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
-    }
-    
-    if (settings.historyBackgroundColor) {
-      setHistoryBackgroundColor(settings.historyBackgroundColor);
-      document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
-    }
-    
-    if (settings.leftPanelBackgroundColor) {
-      setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
-      document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
-    }
-    
-    if (settings.conversationBackgroundColor) {
-      setConversationBackgroundColor(settings.conversationBackgroundColor);
-      document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
-    }
-    
-    if (settings.popUpTextColor) {
-      setPopUpTextColor(settings.popUpTextColor);
-      document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
-    }
-    
-    if (settings.inputBorderColor) {
-      setInputBorderColor(settings.inputBorderColor);
-      document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
-    }
-    
-    if (settings.fontFamily) {
-      setFontFamily(settings.fontFamily);
-      document.documentElement.style.setProperty('--font-family', settings.fontFamily);
-    }
-    
-    if (settings.fontSize) {
-      setFontSize(settings.fontSize);
-      document.documentElement.style.setProperty('--font-size', settings.fontSize);
-    }
-    
-    if (settings.burgerMenu) {
-      setBurgerMenu(settings.fontSize);
-      document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
-    }  
-  };
+    const applySettings = (settings: any) => {
+      if (settings.backgroundColor) {
+        setBackgroundColor(settings.backgroundColor);
+        document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
+      }
+
+      if (settings.textColor) {
+        setTextColor(settings.textColor);
+        document.documentElement.style.setProperty('--text-color', settings.textColor);
+      }
+
+      if (settings.inputBackgroundColor) {
+        setInputBackgroundColor(settings.inputBackgroundColor);
+        document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
+      }
+
+      if (settings.inputButtonColor) {
+        setInputButtonColor(settings.inputButtonColor);
+        document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
+      }
+
+      if (settings.inputButtonHoverColor) {
+        setInputButtonHoverColor(settings.inputButtonHoverColor);
+        document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
+      }
+
+      if (settings.userMessageBackgroundColor) {
+        setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
+        document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
+      }
+
+      if (settings.userMessageTextColor) {
+        setUserMessageTextColor(settings.userMessageTextColor);
+        document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
+      }
+
+      if (settings.aiMessageBackgroundColor) {
+        setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
+        document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
+      }
+
+      if (settings.aiMessageTextColor) {
+        setAiMessageTextColor(settings.aiMessageTextColor);
+        document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
+      }
+
+      if (settings.buttonBackgroundColor) {
+        setButtonBackgroundColor(settings.buttonBackgroundColor);
+        document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
+      }
+
+      if (settings.buttonHoverBackgroundColor) {
+        setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
+        document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
+      }
+
+      if (settings.modelsBackgroundColor) {
+        setModelsBackgroundColor(settings.modelsBackgroundColor);
+        document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
+      }
+
+      if (settings.historyBackgroundColor) {
+        setHistoryBackgroundColor(settings.historyBackgroundColor);
+        document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
+      }
+
+      if (settings.leftPanelBackgroundColor) {
+        setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
+        document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
+      }
+
+      if (settings.conversationBackgroundColor) {
+        setConversationBackgroundColor(settings.conversationBackgroundColor);
+        document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
+      }
+
+      if (settings.popUpTextColor) {
+        setPopUpTextColor(settings.popUpTextColor);
+        document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
+      }
+
+      if (settings.inputBorderColor) {
+        setInputBorderColor(settings.inputBorderColor);
+        document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
+      }
+
+      if (settings.fontFamily) {
+        setFontFamily(settings.fontFamily);
+        document.documentElement.style.setProperty('--font-family', settings.fontFamily);
+      }
+
+      if (settings.fontSize) {
+        setFontSize(settings.fontSize);
+        document.documentElement.style.setProperty('--font-size', settings.fontSize);
+      }
+
+      if (settings.burgerMenu) {
+        setBurgerMenu(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 () => {
@@ -521,330 +607,449 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
 
-        case 'theme':
-          return (
-            <div className="settings-section">
-              <h2>Theme Settings</h2>
-        
-              {/* Dropdown to select theme */}
-              <div className="settings-option">
-                <p>Select Theme</p>
-                <select
-                  value={selectedTheme}
-                  onChange={(e) => {
-                    const theme = e.target.value; // Get the selected value from the event
-                    setSelectedTheme(theme); // Update state for selected theme
-                    
-                    // Apply the appropriate theme based on selection
-                    switch (theme) { // Use 'theme' instead of 'selectedTheme'
-                      case 'IOMARKET':
-                        applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
-                        break;
-                      case 'WHITE':
-                        applyWhiteTheme(); // Call the function to apply the WHITE theme
-                        break;
-                      case 'BLACK':
-                        applyBlackTheme(); // Call the function to apply the BLACK theme
-                        break;
-                      case 'CUSTOM':
-                        // Handle custom theme logic here if necessary
-                        break;
-                      default:
-                        applyIOMarketTheme(); // Fallback to the IOMARKET theme
-                        break;
-                    }
-                  }} // Handle theme selection
-                >
-                  <option value="default">Select your style...</option>
-                  <option value="IOMARKET">IOMARKET</option>
-                  <option value="WHITE">WHITE</option>
-                  <option value="BLACK">BLACK</option>
-                  <option value="CUSTOM">CUSTOM</option>
-                </select>
-              </div>
+          case 'theme':
+            return (
+              <div className="settings-section">
+                <h2>Theme Settings</h2>
+          
+                {/* Dropdown to select theme */}
+                <div className="settings-option">
+                  <p>Select Theme</p>
+                  <select
+                    value={selectedTheme}
+                    onChange={(e) => {
+                      const theme = e.target.value;
+                      if (theme !== "default") {
+                        setSelectedTheme(theme);
+                        localStorage.setItem("selectedTheme", theme);
+          
+                        // Apply the appropriate theme based on selection
+                        switch (theme) {
+                          case 'IOMARKET':
+                            applyIOMarketTheme();
+                            break;
+                          case 'WHITE':
+                            applyWhiteTheme();
+                            break;
+                          case 'BLACK':
+                            applyBlackTheme();
+                            break;
+                          case 'CUSTOM':
+                            // Handle custom theme logic here if necessary
+                            break;
+                          default:
+                            applyIOMarketTheme();
+                            break;
+                        }
+                      }
+                    }}
+                  >
+                    <option value="default">Select your style...</option>
+                    <option value="IOMARKET">IOMARKET</option>
+                    <option value="WHITE">WHITE</option>
+                    <option value="BLACK">BLACK</option>
+                    <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
+                        type="range"
+                        min="12"
+                        max="30"
+                        value={parseInt(fontSize, 10)} // Ensure value is a number
+                        onChange={(e) => {
+                          const newSize = `${e.target.value}px`;
+                          setFontSize(newSize);
+                          document.documentElement.style.setProperty('--font-size', newSize);
+                        }}
+                      />
+                      <span>{fontSize}</span>
+                    </div>
 
-              {/* Conditionally render theme settings only if "CUSTOM" is selected */}
-              {selectedTheme === 'CUSTOM' && (
-                <>
-                  <div className="settings-option">
-                    <p>Font Size</p>
-                    <input
-                      type="range"
-                      min="12"
-                      max="30"
-                      value={parseInt(fontSize, 10)} // Ensure value is a number
-                      onChange={(e) => {
-                        const newSize = `${e.target.value}px`;
-                        setFontSize(newSize);
-                        document.documentElement.style.setProperty('--font-size', newSize);
-                      }}
-                    />
-                    <span>{fontSize}</span>
-                  </div>
+                    {/* Background Color */}
+                    <div className="settings-option">
+                      <p>Background Color</p>
+                      <input
+                        type="color"
+                        value={backgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Background Color</p>
-                    <input
-                      type="color"
-                      value={backgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Text Color */}
+                    <div className="settings-option">
+                      <p>Text Color</p>
+                      <input
+                        type="color"
+                        value={textColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setTextColor(newColor);
+                          document.documentElement.style.setProperty('--text-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Text Color</p>
-                    <input
-                      type="color"
-                      value={textColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setTextColor(newColor);
-                        document.documentElement.style.setProperty('--text-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Input Background Color */}
+                    <div className="settings-option">
+                      <p>Input Background Color</p>
+                      <input
+                        type="color"
+                        value={inputBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setInputBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--input-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Input Background Color</p>
-                    <input
-                      type="color"
-                      value={inputBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setInputBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--input-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Input Button Color */}
+                    <div className="settings-option">
+                      <p>Input Button Color</p>
+                      <input
+                        type="color"
+                        value={inputButtonColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setInputButtonColor(newColor);
+                          document.documentElement.style.setProperty('--input-button-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Input Button Color</p>
-                    <input
-                      type="color"
-                      value={inputButtonColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setInputButtonColor(newColor);
-                        document.documentElement.style.setProperty('--input-button-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Input Button Hover Color */}
+                    <div className="settings-option">
+                      <p>Input Button Hover Color</p>
+                      <input
+                        type="color"
+                        value={inputButtonHoverColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setInputButtonHoverColor(newColor);
+                          document.documentElement.style.setProperty('--input-button-hover-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Input Button Hover Color</p>
-                    <input
-                      type="color"
-                      value={inputButtonHoverColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setInputButtonHoverColor(newColor);
-                        document.documentElement.style.setProperty('--input-button-hover-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* User Message Background Color */}
+                    <div className="settings-option">
+                      <p>User Message Background Color</p>
+                      <input
+                        type="color"
+                        value={userMessageBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setUserMessageBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--user-message-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>User Message Background Color</p>
-                    <input
-                      type="color"
-                      value={userMessageBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setUserMessageBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--user-message-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* User Message Text Color */}
+                    <div className="settings-option">
+                      <p>User Message Text Color</p>
+                      <input
+                        type="color"
+                        value={userMessageTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setUserMessageTextColor(newColor);
+                          document.documentElement.style.setProperty('--user-message-text-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>User Message Text Color</p>
-                    <input
-                      type="color"
-                      value={userMessageTextColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setUserMessageTextColor(newColor);
-                        document.documentElement.style.setProperty('--user-message-text-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* AI Message Background Color */}
+                    <div className="settings-option">
+                      <p>AI Message Background Color</p>
+                      <input
+                        type="color"
+                        value={aiMessageBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setAiMessageBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--ai-message-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>AI Message Background Color</p>
-                    <input
-                      type="color"
-                      value={aiMessageBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setAiMessageBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--ai-message-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* AI Message Text Color */}
+                    <div className="settings-option">
+                      <p>AI Message Text Color</p>
+                      <input
+                        type="color"
+                        value={aiMessageTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setAiMessageTextColor(newColor);
+                          document.documentElement.style.setProperty('--ai-message-text-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>AI Message Text Color</p>
-                    <input
-                      type="color"
-                      value={aiMessageTextColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setAiMessageTextColor(newColor);
-                        document.documentElement.style.setProperty('--ai-message-text-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Button Background Color */}
+                    <div className="settings-option">
+                      <p>Button Background Color</p>
+                      <input
+                        type="color"
+                        value={buttonBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setButtonBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--button-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Button Background Color</p>
-                    <input
-                      type="color"
-                      value={buttonBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setButtonBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--button-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Button Hover Background Color */}
+                    <div className="settings-option">
+                      <p>Button Hover Background Color</p>
+                      <input
+                        type="color"
+                        value={buttonHoverBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setButtonHoverBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--button-hover-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Button Hover Background Color</p>
-                    <input
-                      type="color"
-                      value={buttonHoverBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setButtonHoverBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--button-hover-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Models Background Color */}
+                    <div className="settings-option">
+                      <p>Models Background Color</p>
+                      <input
+                        type="color"
+                        value={modelsBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setModelsBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--models-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Models Background Color</p>
-                    <input
-                      type="color"
-                      value={modelsBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setModelsBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--models-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* History Background Color */}
+                    <div className="settings-option">
+                      <p>History Background Color</p>
+                      <input
+                        type="color"
+                        value={historyBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setHistoryBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--history-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>History Background Color</p>
-                    <input
-                      type="color"
-                      value={historyBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setHistoryBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--history-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Left Panel Background Color */}
+                    <div className="settings-option">
+                      <p>Left Panel Background Color</p>
+                      <input
+                        type="color"
+                        value={leftPanelBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setLeftPanelBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--left-panel-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Left Panel Background Color</p>
-                    <input
-                      type="color"
-                      value={leftPanelBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setLeftPanelBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--left-panel-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Conversation Background Color */}
+                    <div className="settings-option">
+                      <p>Conversation Background Color</p>
+                      <input
+                        type="color"
+                        value={conversationBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setConversationBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--conversation-background-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Conversation Background Color</p>
-                    <input
-                      type="color"
-                      value={conversationBackgroundColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setConversationBackgroundColor(newColor);
-                        document.documentElement.style.setProperty('--conversation-background-color', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Pop-up Text Color */}
+                    <div className="settings-option">
+                      <p>Pop-up Text Color</p>
+                      <input
+                        type="color"
+                        value={popUpTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setPopUpTextColor(newColor);
+                          document.documentElement.style.setProperty('--pop-up-text', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Pop-up Text Color</p>
-                    <input
-                      type="color"
-                      value={popUpTextColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setPopUpTextColor(newColor);
-                        document.documentElement.style.setProperty('--pop-up-text', newColor);
-                      }}
-                    />
-                  </div>
+                    {/* Input Border Color */}
+                    <div className="settings-option">
+                      <p>Input Border Color</p>
+                      <input
+                        type="color"
+                        value={inputBorderColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setInputBorderColor(newColor);
+                          document.documentElement.style.setProperty('--input-border-color', newColor);
+                        }}
+                      />
+                    </div>
 
-                  <div className="settings-option">
-                    <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>
+                    {/* Font Family */}
+                    <div className="settings-option">
+                      <p>Font Family</p>
+                      <select
+                        value={fontFamily}
+                        onChange={(e) => {
+                          const newFont = e.target.value;
+                          setFontFamily(newFont);
+                          document.documentElement.style.setProperty('--font-family', newFont);
+                        }}
+                      >
+                        <option value="'Poppins', sans-serif">Poppins</option>
+                        <option value="'Inconsolata', monospace">Inconsolata</option>
+                        <option value="'Merriweather', serif">Merriweather</option>
+                        <option value="'Noto Sans', sans-serif">Noto Sans</option>
+                        <option value="'Noto Serif', serif">Noto Serif</option>
+                        <option value="'Playfair Display', serif">Playfair Display</option>
+                        <option value="'Roboto', sans-serif">Roboto</option>
+                        <option value="'Ubuntu', sans-serif">Ubuntu</option>
+                        <option value="'Bangers', cursive">Bangers</option>
+                        <option value="'Caveat', cursive">Caveat</option>
+                        <option value="'Frederika the Great', cursive">Frederika the Great</option>
+                        <option value="'Rock Salt', cursive">Rock Salt</option>
+                        <option value="'Sofadi One', sans-serif">Sofadi One</option>
+                        <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
+                      </select>
+                    </div>
 
-                  <div className="settings-option">
-                    <p>Input Border Color</p>
-                    <input
-                      type="color"
-                      value={inputBorderColor}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setInputBorderColor(newColor);
-                        document.documentElement.style.setProperty('--input-border-color', newColor);
-                      }}
-                    />
-                  </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>
 
-                  <div className="settings-option">
-                    <p>Font Family</p>
-                    <select
-                      value={fontFamily}
-                      onChange={(e) => {
-                        const newFont = e.target.value;
-                        setFontFamily(newFont);
-                        document.documentElement.style.setProperty('--font-family', newFont);
-                      }}
-                    >
-                      <option value="'Poppins', sans-serif">Poppins</option>
-                      <option value="'Inconsolata', monospace">Inconsolata</option>
-                      <option value="'Merriweather', serif">Merriweather</option>
-                      <option value="'Noto Sans', sans-serif">Noto Sans</option>
-                      <option value="'Noto Serif', serif">Noto Serif</option>
-                      <option value="'Playfair Display', serif">Playfair Display</option>
-                      <option value="'Roboto', sans-serif">Roboto</option>
-                      <option value="'Ubuntu', sans-serif">Ubuntu</option>
-                      <option value="'Bangers', cursive">Bangers</option>
-                      <option value="'Caveat', cursive">Caveat</option>
-                      <option value="'Frederika the Great', cursive">Frederika the Great</option>
-                      <option value="'Rock Salt', cursive">Rock Salt</option>
-                      <option value="'Sofadi One', sans-serif">Sofadi One</option>
-                      <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
-                    </select>
-                  </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>
           );
 
@@ -1028,12 +1233,22 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     disableChatHistory,
     disableAIMemory,
     openSourceMode,
-
+  
     // API Keys
-   mistral,
-   openai,
-   anthropic,
-   google
+    mistral,
+    openai,
+    anthropic,
+    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>
diff --git a/app/components/theme.ts b/app/components/theme.ts
index f9367bd..bfd3d9a 100644
--- a/app/components/theme.ts
+++ b/app/components/theme.ts
@@ -92,5 +92,65 @@ export const applyBlackTheme = () => {
     document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
     document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
     document.documentElement.style.setProperty('--font-size', '16px'); // Font size
-    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
 };
+
+export const applyCustomTheme = () => {
+    // fix that later ouh fuck what have I done
+    /* 
+    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'),
+    };
+    
+    document.documentElement.style.setProperty('--header-background-color', themeVariables[header]); // Dark header background
+    document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
+    document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
+    document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
+    document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
+    document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
+    document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
+    document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
+    document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
+    document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
+    document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
+    document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
+    document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
+    document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
+    document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
+    document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
+    document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
+    document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
+    document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
+    document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
+    document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
+    document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
+    document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
+    document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
+    document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
+    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
+    document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
+    
+    
+    // Apply those settings
+ */
+}
diff --git a/app/page.tsx b/app/page.tsx
index 9afccc2..6bddf87 100644
--- a/app/page.tsx
+++ b/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 } 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':
+            
+            break;
+          default:
+            applyIOMarketTheme();
+            break;
+        }
+      }   
+    }, []); // Runs only once when the component mounts          
+
   return (
     <>
         <Header
-- 
2.39.5


From f044028b479edd18632257a567444dddb1de9825 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Mon, 30 Sep 2024 16:12:04 +0200
Subject: [PATCH 2/2] In the name of the lord i once have done it again... it
 finally works yay

---
 app/components/theme.ts | 73 +++++++++++++++++++++--------------------
 app/page.tsx            |  4 +--
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/app/components/theme.ts b/app/components/theme.ts
index bfd3d9a..b4f64e2 100644
--- a/app/components/theme.ts
+++ b/app/components/theme.ts
@@ -96,8 +96,7 @@ export const applyBlackTheme = () => {
 };
 
 export const applyCustomTheme = () => {
-    // fix that later ouh fuck what have I done
-    /* 
+    // Theme variables   
     const themeVariables = {
         backgroundColor: localStorage.getItem('backgroundColor'),
         textColor: localStorage.getItem('textColor'),
@@ -118,39 +117,41 @@ export const applyCustomTheme = () => {
         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
     
-    document.documentElement.style.setProperty('--header-background-color', themeVariables[header]); // Dark header background
-    document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
-    document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
-    document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
-    document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
-    document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
-    document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
-    document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
-    document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
-    document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
-    document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
-    document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
-    document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
-    document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
-    document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
-    document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
-    document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
-    document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
-    document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
-    document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
-    document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
-    document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
-    document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
-    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
-    document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
-    document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
-    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
-    document.documentElement.style.setProperty('--font-size', '16px'); // Font size
-    document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
-    
-    
-    // Apply those settings
- */
 }
diff --git a/app/page.tsx b/app/page.tsx
index 6bddf87..b2e6c90 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,7 +8,7 @@ import History from './components/History';
 import Models from './components/Models';
 import Credits from './components/Credits';
 import Settings from './components/Settings';
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme'
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
 import Head from 'next/head';
 import './styles/master.css';
 
@@ -46,7 +46,7 @@ const LandingPage: React.FC = () => {
             applyBlackTheme();
             break;
           case 'CUSTOM':
-            
+            applyCustomTheme();
             break;
           default:
             applyIOMarketTheme();
-- 
2.39.5