From 3788411d3aa39839c3f82d5a60e1e0543e30ca6c Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Wed, 2 Oct 2024 09:14:07 +0200
Subject: [PATCH 1/6] Fixed darkmode

---
 app/components/settings/theme.ts | 114 +++++++++++++++----------------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts
index e88ca18..7c96a52 100644
--- a/app/components/settings/theme.ts
+++ b/app/components/settings/theme.ts
@@ -92,7 +92,7 @@ export const applyBlackTheme = () => {
   document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
   document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
   document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
-  document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
+  document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background  
   document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
   document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
   document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
@@ -113,63 +113,63 @@ export const applyBlackTheme = () => {
   
 };
 
-export const applyCustomTheme = () => {
-  const themeVariables = {
-      backgroundColor: localStorage.getItem('backgroundColor'),
-      headerBackground: localStorage.getItem('headerBackground'),
-      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'),
-      faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
-      faqHeadingColor: localStorage.getItem('faqHeadingColor'),
-      faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
-      faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
-      faqItemTextColor: localStorage.getItem('faqItemTextColor'),
-      faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
-      inputBorderColor: localStorage.getItem('inputBorderColor'),
-      fontFamily: localStorage.getItem('fontFamily'),
-      fontSize: localStorage.getItem('fontSize'),
-      burgerMenu: localStorage.getItem('burgerMenu'),
-  };
+  export const applyCustomTheme = () => {
+    const themeVariables = {
+        backgroundColor: localStorage.getItem('backgroundColor'),
+        headerBackground: localStorage.getItem('headerBackground'),
+        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'),
+        faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
+        faqHeadingColor: localStorage.getItem('faqHeadingColor'),
+        faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
+        faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
+        faqItemTextColor: localStorage.getItem('faqItemTextColor'),
+        faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
+        inputBorderColor: localStorage.getItem('inputBorderColor'),
+        fontFamily: localStorage.getItem('fontFamily'),
+        fontSize: localStorage.getItem('fontSize'),
+        burgerMenu: localStorage.getItem('burgerMenu'),
+    };
 
-  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
-  document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
-  document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
-  document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
-  document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
-  document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
-  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
-  document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
-  document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
-  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
-};
+    document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
+    document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
+    document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
+    document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
+    document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
+    document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
+    document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
+    document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
+    document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
+    document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
+    document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
+    document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
+    document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+  };
 
 // This is the new function that calls the appropriate theme application
 export const applyTheme = (theme: string) => {

From 7dc154b6bf1b19cf357dd5a0c9fb78a74026a535 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.codeberg.org>
Date: Wed, 2 Oct 2024 09:43:22 +0200
Subject: [PATCH 2/6] electron changes

---
 main.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/main.js b/main.js
index f221306..91e416f 100644
--- a/main.js
+++ b/main.js
@@ -2,12 +2,12 @@ const { app, BrowserWindow } = require('electron');
 
 function createWindow() {
     const win = new BrowserWindow({
-        width: 800,
-        height: 600,
+        width: 1280,
+        height: 720,
         webPreferences: {
             nodeIntegration: true,
         },
-	autoHideMenuBar: true,
+        autoHideMenuBar: true,
     });
 
     win.loadURL('http://localhost:3000');

From b9e62cebfc4cf2753423128a53b039b6b49a0621 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.codeberg.org>
Date: Wed, 2 Oct 2024 09:59:49 +0200
Subject: [PATCH 3/6] fixed color picker thing

---
 app/styles/Settings.css | 130 ++++++++++++++++++++++++++--------------
 1 file changed, 84 insertions(+), 46 deletions(-)

diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index b0aae8c..981a794 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -13,7 +13,7 @@
 
 .settings-main h2 {
     margin-bottom: 1em;
-}   
+}
 
 .settings-main p {
     padding-bottom: 7px;
@@ -22,10 +22,12 @@
 /* Main container for the settings */
 .settings-container {
     display: grid;
-    grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
+    grid-template-columns: 1fr 3fr;
+    /* 1fr for sidebar, 3fr for main content */
     grid-auto-flow: column;
     overflow-x: hidden;
-    height: 100%; /* Ensure it takes full height */
+    height: 100%;
+    /* Ensure it takes full height */
 }
 
 /* Settings content */
@@ -39,23 +41,30 @@
     height: 90%;
     max-height: 600px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow: hidden; /* Prevents overflow of the content */
-    position: relative; /* Needed for absolute positioning of close button */
+    overflow: hidden;
+    /* Prevents overflow of the content */
+    position: relative;
+    /* Needed for absolute positioning of close button */
     display: flex;
-    flex-direction: column; /* Flexbox for vertical stacking */
+    flex-direction: column;
+    /* Flexbox for vertical stacking */
 }
 
 /* Sidebar styles */
 .sidebar {
     background: var(--settings-background-color);
     padding: 20px;
-    border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
+    border-radius: 10px 0 0 10px;
+    /* Rounded corners on the left side */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow-y: auto; /* Scroll if content exceeds height */
+    overflow-y: auto;
+    /* Scroll if content exceeds height */
     display: flex;
     flex-direction: column;
-    grid-column: 1; /* Places sidebar in the first grid column */
-    height: 100%; /* Ensures sidebar takes full height */
+    grid-column: 1;
+    /* Places sidebar in the first grid column */
+    height: 100%;
+    /* Ensures sidebar takes full height */
 }
 
 /* Sidebar item styles */
@@ -64,8 +73,10 @@
     padding: 0;
     margin: 0;
     display: flex;
-    flex-direction: column; /* Make the ul a column */
-    flex-grow: 1; /* Allows the list to take available space */
+    flex-direction: column;
+    /* Make the ul a column */
+    flex-grow: 1;
+    /* Allows the list to take available space */
 }
 
 .sidebar li {
@@ -77,66 +88,88 @@
 }
 
 .sidebar li:hover {
-    background: var(--input-button-hover-color); /* Highlight on hover */
+    background: var(--input-button-hover-color);
+    /* Highlight on hover */
 }
 
 .sidebar li.active {
-    background: var(--button-hover-background-color); /* Active section highlight */
+    background: var(--button-hover-background-color);
+    /* Active section highlight */
 }
 
 /* Main settings area */
 .settings-main {
-    grid-column: 2; /* Places main settings in the second grid column */
+    grid-column: 2;
+    /* Places main settings in the second grid column */
     padding: 20px;
-    border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
-    overflow-y: auto; /* Scroll if content exceeds height */
+    border-radius: 0 10px 10px 0;
+    /* Rounded corners on the right side */
+    overflow-y: auto;
+    /* Scroll if content exceeds height */
     display: flex;
-    flex-direction: column; /* Stack content vertically */
+    flex-direction: column;
+    /* Stack content vertically */
 }
 
 /* Close button positioning */
 .close-popup {
-    background: var(--close-button-color); /* Use variable for close button color */
-    color: white; /* Use white for text color */
+    background: var(--close-button-color);
+    /* Use variable for close button color */
+    color: white;
+    /* Use white for text color */
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute; /* Position the button absolutely */
-    top: 15px; /* Distance from the top */
-    right: 40px; /* Distance from the right */
+    position: absolute;
+    /* Position the button absolutely */
+    top: 15px;
+    /* Distance from the top */
+    right: 40px;
+    /* Distance from the right */
     transition: background 0.3s;
 }
 
 /* Close button positioning */
 .apply {
-    background: var(--apply-button-color); /* Use variable for close button color */
-    color: white; /* Use white for text color */
+    background: var(--apply-button-color);
+    /* Use variable for close button color */
+    color: white;
+    /* Use white for text color */
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute; /* Position the button absolutely */
-    top: 50px; /* Distance from the top */
-    right: 40px; /* Distance from the right */
+    position: absolute;
+    /* Position the button absolutely */
+    top: 50px;
+    /* Distance from the top */
+    right: 40px;
+    /* Distance from the right */
     transition: background 0.3s;
 }
 
 .close-popup:hover {
-    background: darkred; /* Optional hover effect */
+    background: darkred;
+    /* Optional hover effect */
 }
 
 
 /* Additional styles for inputs and options */
 .settings-option {
-    margin-bottom: 20px; /* Adds space between each setting option */
-    padding-bottom: 10px; /* Adds internal spacing */
-    border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
+    margin-bottom: 20px;
+    /* Adds space between each setting option */
+    padding-bottom: 10px;
+    /* Adds internal spacing */
+    border-bottom: 1px solid var(--input-border-color);
+    /* Optional, creates a separator between options */
 }
 
 .settings-option:last-child {
-    margin-bottom: 0; /* Removes bottom margin from last option */
-    border-bottom: none; /* Removes separator from last option */
+    margin-bottom: 0;
+    /* Removes bottom margin from last option */
+    border-bottom: none;
+    /* Removes separator from last option */
 }
 
 .settings-option input[type="text"],
@@ -151,7 +184,9 @@
     padding: 10px;
     border-radius: 5px;
     width: 100%;
-    margin-bottom: 10px; /* Adds spacing between inputs */
+    height: 40px;
+    margin-bottom: 10px;
+    /* Adds spacing between inputs */
 }
 
 /* Optional additional spacing for labels */
@@ -161,14 +196,14 @@
     font-weight: bold;
 }
 
-.export-button{
+.export-button {
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
     border-radius: 10px;
 }
 
-.import-file{
+.import-file {
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
@@ -179,7 +214,7 @@
     justify-content: space-between;
     margin-top: 10px;
 }
-  
+
 .slider-option {
     cursor: pointer;
     padding: 10px;
@@ -187,19 +222,22 @@
     border-radius: 5px;
     transition: background-color 0.3s;
 }
-  
+
 .slider-option.active {
-    background-color: #007bff; /* Change to your active color */
+    background-color: #007bff;
+    /* Change to your active color */
     color: white;
     border-color: #007bff;
 }
-  
+
 input[type="radio"] {
-    display: none; /* Hide the default radio buttons */
+    display: none;
+    /* Hide the default radio buttons */
 }
 
 .slider-option.disabled {
-    opacity: 0.5; /* Make the option appear greyed out */
-    pointer-events: none; /* Prevent clicks */
-}
-  
\ No newline at end of file
+    opacity: 0.5;
+    /* Make the option appear greyed out */
+    pointer-events: none;
+    /* Prevent clicks */
+}
\ No newline at end of file

From 62155ec71fee0f6cff6d9ff50b6e8f81d25a9c89 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Wed, 2 Oct 2024 12:18:40 +0200
Subject: [PATCH 4/6] Changed the Settings

---
 app/components/settings/DropDownTheme.tsx |  76 +++----
 app/components/settings/Settings.tsx      | 146 ++++++++----
 app/components/settings/theme.ts          | 260 +++++++++++++++-------
 app/page.tsx                              |  29 ++-
 4 files changed, 351 insertions(+), 160 deletions(-)

diff --git a/app/components/settings/DropDownTheme.tsx b/app/components/settings/DropDownTheme.tsx
index 955158f..c816129 100644
--- a/app/components/settings/DropDownTheme.tsx
+++ b/app/components/settings/DropDownTheme.tsx
@@ -1,41 +1,41 @@
-// ThemeDropdown.tsx
-import React from 'react';
-import { applyTheme, applyCustomTheme } from './theme';
+  // ThemeDropdown.tsx
+  import React from 'react';
+  import { applyTheme, applyCustomTheme } from './theme';
 
-const ThemeDropdown: React.FC<{
-  selectedTheme: string;
-  setSelectedTheme: (theme: string) => void;
-}> = ({ selectedTheme, setSelectedTheme }) => {
-  const themeOptions = [
-    { value: 'IOMARKET', label: 'IOMARKET' },
-    { value: 'WHITE', label: 'WHITE' },
-    { value: 'BLACK', label: 'BLACK' },
-    { value: 'CUSTOM', label: 'CUSTOM' },
-  ];
+  const ThemeDropdown: React.FC<{
+    selectedTheme: string;
+    setSelectedTheme: (theme: string) => void;
+  }> = ({ selectedTheme, setSelectedTheme }) => {
+    const themeOptions = [
+      { value: 'IOMARKET', label: 'IOMARKET' },
+      { value: 'WHITE', label: 'WHITE' },
+      { value: 'BLACK', label: 'BLACK' },
+      { value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' },
+      { value: 'CUSTOM', label: 'CUSTOM' },
+    ];
 
-  return (
-    <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);
-            applyTheme(theme); // Ensure you define applyTheme
-          }
-        }}
-      >
-        <option value="default">Select your style...</option>
-        {themeOptions.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
+    return (
+      <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); 
+            }
+          }}
+        >
+          <option value="default">Select your style...</option>
+          {themeOptions.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  };
 
-export default ThemeDropdown;
+  export default ThemeDropdown;
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index af71c6f..b36af89 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -92,6 +92,7 @@ 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 [burgerMenuBackgroundColor, setBurgerMenuBackgroundColor] = 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());
@@ -100,7 +101,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   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());
-
+  const [closeButtonColor, setCloseButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-color').trim());
+  const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
+  const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
+  const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
+  
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); 
 
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('');
@@ -161,6 +171,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         popupBackgroundColor,
         overlayTextColor,
       },
+      primaryColor,
+      secondaryColor,
+      accentColor,
+      basicBackgroundColor,
+      basicTextColor
     },
     apiKeys: {
       mistral,
@@ -200,7 +215,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" },
     { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" },
     { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" },
-  ];
+    { name: "Close Button Color", value: closeButtonColor, setValue: setCloseButtonColor, cssVariable: "--close-button-color" },
+    { name: "Close Button Hover Color", value: closeButtonHoverColor, setValue: setCloseButtonHoverColor, cssVariable: "--close-button-hover-color" },
+    { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
+    { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
+    { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
+];
+
 
   const timeZoneOptions = [
     { value: 'GMT', label: 'GMT' },
@@ -289,7 +310,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const savedTheme = localStorage.getItem('selectedTheme');
     if (savedTheme) {
       setSelectedTheme(savedTheme);
-      applyTheme(savedTheme);
+      applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
     }
   }, []); // Runs only once when the component mounts
 
@@ -454,48 +475,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
 
-      case 'theme':
-        return (
-          <div className="settings-section">
-            <h2>Theme Settings</h2>
-
-            <ThemeDropdown
-              selectedTheme={selectedTheme}
-              setSelectedTheme={setSelectedTheme}
-            />
-
-            {selectedTheme === 'CUSTOM' && (
-              <>
-                {/* Font Size */}
-                <FontSizeSetting
-                  fontSize={fontSize}
-                  setFontSize={setFontSize}
+          case 'theme':
+            return (
+              <div className="settings-section">
+                <h2>Theme Settings</h2>
+          
+                <ThemeDropdown
+                  selectedTheme={selectedTheme}
+                  setSelectedTheme={setSelectedTheme}
                 />
-
-                {colorSettings.map((setting) => (
-                  <ColorSetting
-                    key={setting.cssVariable}
-                    name={setting.name}
-                    value={setting.value}
-                    setValue={setting.setValue}
-                    cssVariable={setting.cssVariable}
-                  />
-                ))}
-
-                <DropdownSetting
-                  label="Font Family"
-                  value={fontFamily}
-                  setValue={(newFont) => {
-                    setFontFamily(newFont);
-                    document.documentElement.style.setProperty('--font-family', newFont);
-                  }}
-                  options={fontOptions}
-                />
-              </>
-            )}
-          </div>
-        );
-
+          
+                {selectedTheme === 'BASIC-CUSTOM' && (
+                  <>
+                    <h3>Basic Colors</h3>
+                    {/* Basic Color Inputs using ColorSetting Component */}
+                    <ColorSetting
+                      name="Primary Color"
+                      value={primaryColor}
+                      setValue={setPrimaryColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Secondary Color"
+                      value={secondaryColor}
+                      setValue={setSecondaryColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Accent Color"
+                      value={accentColor}
+                      setValue={setAccentColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Background Color"
+                      value={basicBackgroundColor}
+                      setValue={setBasicBackgroundColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Text Color"
+                      value={basicTextColor}
+                      setValue={setBasicTextColor}
+                      cssVariable=""
+                    />
+                  </>
+                )}
+                
+                {selectedTheme === 'CUSTOM' && (
+                  <>
+                    <h3>Additional Settings</h3>
+                    {/* Additional Font Size Setting */}
+                    <FontSizeSetting
+                      fontSize={fontSize}
+                      setFontSize={setFontSize}
+                    />
+          
+                    {colorSettings.map((setting) => (
+                      <ColorSetting
+                        key={setting.cssVariable}
+                        name={setting.name}
+                        value={setting.value}
+                        setValue={setting.setValue}
+                        cssVariable={setting.cssVariable}
+                      />
+                    ))}
+          
+                    <DropdownSetting
+                      label="Font Family"
+                      value={fontFamily}
+                      setValue={(newFont) => {
+                        setFontFamily(newFont);
+                        document.documentElement.style.setProperty('--font-family', newFont);
+                      }}
+                      options={fontOptions}
+                    />
+                  </>
+                )}
+              </div>
+            );       
 
       case 'foss':
         return (
diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts
index 7c96a52..2cef5cc 100644
--- a/app/components/settings/theme.ts
+++ b/app/components/settings/theme.ts
@@ -113,82 +113,192 @@ export const applyBlackTheme = () => {
   
 };
 
-  export const applyCustomTheme = () => {
-    const themeVariables = {
-        backgroundColor: localStorage.getItem('backgroundColor'),
-        headerBackground: localStorage.getItem('headerBackground'),
-        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'),
-        faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
-        faqHeadingColor: localStorage.getItem('faqHeadingColor'),
-        faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
-        faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
-        faqItemTextColor: localStorage.getItem('faqItemTextColor'),
-        faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
-        inputBorderColor: localStorage.getItem('inputBorderColor'),
-        fontFamily: localStorage.getItem('fontFamily'),
-        fontSize: localStorage.getItem('fontSize'),
-        burgerMenu: localStorage.getItem('burgerMenu'),
-    };
-
-    document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
-    document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
-    document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
-    document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
-    document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
-    document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
-    document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
-    document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
-    document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
-    document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
-    document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
-    document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
-    document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
-    document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
-    document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
-    document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
-    document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
-    document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
-    document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
-    document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
-    document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
-    document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
-    document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
-    document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
-    document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
-    document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+export const applyCustomTheme = () => {
+  const themeVariables = {
+    backgroundColor: localStorage.getItem('backgroundColor'),
+    headerBackground: localStorage.getItem('headerBackground'),
+    headerTextColor: localStorage.getItem('headerTextColor'),
+    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'),
+    docBackgroundColor: localStorage.getItem('docBackgroundColor'),
+    closeButtonColor: localStorage.getItem('closeButtonColor'),
+    closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
+    applyButtonColor: localStorage.getItem('applyButtonColor'),
+    applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
+    burgerMenu: localStorage.getItem('burgerMenu'),
+    overlayTextColor: localStorage.getItem('overlayTextColor'),
+    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'),
+    popUpText: localStorage.getItem('popUpText'),
+    inputBorderColor: localStorage.getItem('inputBorderColor'),
+    fontFamily: localStorage.getItem('fontFamily'),
+    fontSize: localStorage.getItem('fontSize'),
   };
 
-// This is the new function that calls the appropriate theme application
-export const applyTheme = (theme: string) => {
-  switch (theme) {
-      case 'IOMARKET':
-        applyIOMarketTheme();
-        break;
-      case 'WHITE':
-        applyWhiteTheme();
-        break;
-      case 'BLACK':
-        applyBlackTheme();
-        break;
-      case 'CUSTOM':
-        applyCustomTheme();
-        break;
-      default:
-        applyIOMarketTheme();
-        break;
-  }
+  document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
+  document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
+  document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
+  document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
+  document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
+  document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
+  document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
+  document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
+  document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
+  document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
+  document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
+  document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
+  document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
+  document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
+  document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
+  document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
+  document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
+  document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
+  document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
+  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+  document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
+  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
+  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
+  document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
+  document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
+  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
+  document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
+  document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
+  document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
+  document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
+  document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
 };
 
+// TypeScript types for color parameters
+type Color = string;
+
+export const applyBasicCustomTheme = (
+  primaryColor: Color,
+  secondaryColor: Color,
+  accentColor: Color,
+  backgroundColor: Color,
+  textColor: Color
+) => {
+  // Calculate additional colors based on the provided colors
+  const headerBackgroundColor = secondaryColor; // Use secondary color for header background
+  const headerTextColor = lightenColor(textColor, 50); // Lighten text color for header
+  const inputButtonColor = primaryColor; // Use primary color for input buttons
+  const userMessageBackgroundColor = accentColor; // Use accent color for user messages
+  const aiMessageBackgroundColor = backgroundColor; // Use background color for AI messages
+  const buttonHoverBackgroundColor = darkenColor(primaryColor, 30); // Darken primary color for hover
+  const closeButtonColor = darkenColor(accentColor, 20); // Darkened accent color for close button
+  const closeButtonHoverColor = darkenColor(closeButtonColor, 10); // Darker close button hover color
+  const darkerAccentColor = darkenColor(accentColor, 20); // Darken accent color for contrast
+  const lightenedPrimaryColor = lightenColor(primaryColor, 10); // Lighten primary color for highlights
+  const lighterBackgroundColor = lightenColor(backgroundColor, 10); // Lighten background for contrast
+  const darkerBackgroundColor = darkenColor(backgroundColor, 20); // More pronounced dark background
+
+   // Set all CSS variables
+  document.documentElement.style.setProperty('--header-background-color', headerBackgroundColor);
+  document.documentElement.style.setProperty('--header-text-color', headerTextColor);
+  document.documentElement.style.setProperty('--background-color', backgroundColor);
+  document.documentElement.style.setProperty('--text-color', textColor);
+  document.documentElement.style.setProperty('--input-background-color', lightenColor(backgroundColor, 10));
+  document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
+  document.documentElement.style.setProperty('--input-button-hover-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
+  document.documentElement.style.setProperty('--user-message-text-color', lightenColor(textColor, 60));
+  document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
+  document.documentElement.style.setProperty('--ai-message-text-color', lightenColor(textColor, 60));
+  document.documentElement.style.setProperty('--button-background-color', inputButtonColor);
+  document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--models-background-color', darkerBackgroundColor);
+  document.documentElement.style.setProperty('--history-background-color', lighterBackgroundColor);
+  document.documentElement.style.setProperty('--left-panel-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--conversation-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--doc-background-color', lighterBackgroundColor);
+  document.documentElement.style.setProperty('--close-button-color', closeButtonColor);
+  document.documentElement.style.setProperty('--close-button-hover-color', closeButtonHoverColor);
+  document.documentElement.style.setProperty('--apply-button-color', inputButtonColor);
+  document.documentElement.style.setProperty('--apply-button-hover-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--burger-menu-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--overlay-text-color', lightenColor(textColor, 80));
+  document.documentElement.style.setProperty('--faq-background-color', lightenColor(backgroundColor, 10));
+  document.documentElement.style.setProperty('--faq-heading-color', lightenedPrimaryColor);
+  document.documentElement.style.setProperty('--faq-item-background-color', darkerAccentColor);
+  document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
+  document.documentElement.style.setProperty('--faq-item-text-color', '#000000');
+  document.documentElement.style.setProperty('--faq-item-hover-background-color', lightenColor(accentColor, 10));
+  document.documentElement.style.setProperty('--popup-background-color', accentColor);
+  document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
+  document.documentElement.style.setProperty('--input-border-color', primaryColor);
+  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
+  document.documentElement.style.setProperty('--font-size', '16px');
+};
+
+// Helper function to darken a color (returns a darker version of the provided color)
+const darkenColor = (color: Color, percent: number): Color => {
+  let r = parseInt(color.slice(1, 3), 16);
+  let g = parseInt(color.slice(3, 5), 16);
+  let b = parseInt(color.slice(5, 7), 16);
+  r = Math.floor(r * (1 - percent / 100));
+  g = Math.floor(g * (1 - percent / 100));
+  b = Math.floor(b * (1 - percent / 100));
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+};
+
+// Helper function to lighten a color (returns a lighter version of the provided color)
+const lightenColor = (color: Color, percent: number): Color => {
+  let r = parseInt(color.slice(1, 3), 16);
+  let g = parseInt(color.slice(3, 5), 16);
+  let b = parseInt(color.slice(5, 7), 16);
+  r = Math.min(255, Math.floor(r * (1 + percent / 100)));
+  g = Math.min(255, Math.floor(g * (1 + percent / 100)));
+  b = Math.min(255, Math.floor(b * (1 + percent / 100)));
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+};
+
+// This is the new function that calls the appropriate theme application
+export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
+  switch (theme) {
+    case 'IOMARKET':
+      applyIOMarketTheme();
+      break;
+    case 'WHITE':
+      applyWhiteTheme();
+      break;
+    case 'BLACK':
+      applyBlackTheme();
+      break;
+    case 'CUSTOM':
+      applyCustomTheme();
+      break;
+    case 'BASIC-CUSTOM':
+      applyBasicCustomTheme(
+          primary,
+          secondary,
+          accent,
+          background,
+          text
+        );
+      break;
+    default:
+      applyIOMarketTheme();
+      break;
+  }
+};
diff --git a/app/page.tsx b/app/page.tsx
index cca5ac1..02bcf6c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,9 +7,7 @@ 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/Settings';
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/settings/theme'
-import Head from 'next/head';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
@@ -17,6 +15,22 @@ const LandingPage: React.FC = () => {
   const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
   const conversationRef = useRef<HTMLDivElement>(null);
 
+
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
+
+  useEffect(()=>{
+    setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
+    setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
+    setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
+    setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
+    setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
+  })
+  
+
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
   };
@@ -48,6 +62,15 @@ const LandingPage: React.FC = () => {
           case 'CUSTOM':
             applyCustomTheme();
             break;
+          case 'BASIC-CUSTOM':
+            applyBasicCustomTheme(
+                primaryColor,
+                secondaryColor,
+                accentColor,
+                basicBackgroundColor,
+                basicTextColor
+              );
+            break;
           default:
             applyIOMarketTheme();
             break;

From 4f024464e587c896c5946b490210192d3f0bb6a4 Mon Sep 17 00:00:00 2001
From: sageTheDm <info@photofuel.tech>
Date: Wed, 2 Oct 2024 12:19:46 +0200
Subject: [PATCH 5/6] Setting changes (#85)

Co-authored-by: Patrick <patrick_pluto@noreply.localhost>
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/85
Co-authored-by: sageTheDm <info@photofuel.tech>
Co-committed-by: sageTheDm <info@photofuel.tech>
---
 app/components/settings/DropDownTheme.tsx |  76 ++++----
 app/components/settings/Settings.tsx      | 146 ++++++++++-----
 app/components/settings/theme.ts          | 210 ++++++++++++++++------
 app/page.tsx                              |  29 ++-
 4 files changed, 326 insertions(+), 135 deletions(-)

diff --git a/app/components/settings/DropDownTheme.tsx b/app/components/settings/DropDownTheme.tsx
index 955158f..c816129 100644
--- a/app/components/settings/DropDownTheme.tsx
+++ b/app/components/settings/DropDownTheme.tsx
@@ -1,41 +1,41 @@
-// ThemeDropdown.tsx
-import React from 'react';
-import { applyTheme, applyCustomTheme } from './theme';
+  // ThemeDropdown.tsx
+  import React from 'react';
+  import { applyTheme, applyCustomTheme } from './theme';
 
-const ThemeDropdown: React.FC<{
-  selectedTheme: string;
-  setSelectedTheme: (theme: string) => void;
-}> = ({ selectedTheme, setSelectedTheme }) => {
-  const themeOptions = [
-    { value: 'IOMARKET', label: 'IOMARKET' },
-    { value: 'WHITE', label: 'WHITE' },
-    { value: 'BLACK', label: 'BLACK' },
-    { value: 'CUSTOM', label: 'CUSTOM' },
-  ];
+  const ThemeDropdown: React.FC<{
+    selectedTheme: string;
+    setSelectedTheme: (theme: string) => void;
+  }> = ({ selectedTheme, setSelectedTheme }) => {
+    const themeOptions = [
+      { value: 'IOMARKET', label: 'IOMARKET' },
+      { value: 'WHITE', label: 'WHITE' },
+      { value: 'BLACK', label: 'BLACK' },
+      { value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' },
+      { value: 'CUSTOM', label: 'CUSTOM' },
+    ];
 
-  return (
-    <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);
-            applyTheme(theme); // Ensure you define applyTheme
-          }
-        }}
-      >
-        <option value="default">Select your style...</option>
-        {themeOptions.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
+    return (
+      <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); 
+            }
+          }}
+        >
+          <option value="default">Select your style...</option>
+          {themeOptions.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  };
 
-export default ThemeDropdown;
+  export default ThemeDropdown;
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 38e7862..7bce4cc 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -92,6 +92,7 @@ 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 [burgerMenuBackgroundColor, setBurgerMenuBackgroundColor] = 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());
@@ -100,7 +101,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   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());
-
+  const [closeButtonColor, setCloseButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-color').trim());
+  const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
+  const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
+  const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
+  
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); 
 
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('');
@@ -161,6 +171,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         popupBackgroundColor,
         overlayTextColor,
       },
+      primaryColor,
+      secondaryColor,
+      accentColor,
+      basicBackgroundColor,
+      basicTextColor
     },
     apiKeys: {
       mistral,
@@ -200,7 +215,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" },
     { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" },
     { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" },
-  ];
+    { name: "Close Button Color", value: closeButtonColor, setValue: setCloseButtonColor, cssVariable: "--close-button-color" },
+    { name: "Close Button Hover Color", value: closeButtonHoverColor, setValue: setCloseButtonHoverColor, cssVariable: "--close-button-hover-color" },
+    { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
+    { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
+    { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
+];
+
 
   const timeZoneOptions = [
     { value: 'GMT', label: 'GMT' },
@@ -287,7 +308,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const savedTheme = localStorage.getItem('selectedTheme');
     if (savedTheme) {
       setSelectedTheme(savedTheme);
-      applyTheme(savedTheme);
+      applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
     }
   }, []); // Runs only once when the component mounts
 
@@ -453,48 +474,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
 
-      case 'theme':
-        return (
-          <div className="settings-section">
-            <h2>Theme Settings</h2>
-
-            <ThemeDropdown
-              selectedTheme={selectedTheme}
-              setSelectedTheme={setSelectedTheme}
-            />
-
-            {selectedTheme === 'CUSTOM' && (
-              <>
-                {/* Font Size */}
-                <FontSizeSetting
-                  fontSize={fontSize}
-                  setFontSize={setFontSize}
+          case 'theme':
+            return (
+              <div className="settings-section">
+                <h2>Theme Settings</h2>
+          
+                <ThemeDropdown
+                  selectedTheme={selectedTheme}
+                  setSelectedTheme={setSelectedTheme}
                 />
-
-                {colorSettings.map((setting) => (
-                  <ColorSetting
-                    key={setting.cssVariable}
-                    name={setting.name}
-                    value={setting.value}
-                    setValue={setting.setValue}
-                    cssVariable={setting.cssVariable}
-                  />
-                ))}
-
-                <DropdownSetting
-                  label="Font Family"
-                  value={fontFamily}
-                  setValue={(newFont) => {
-                    setFontFamily(newFont);
-                    document.documentElement.style.setProperty('--font-family', newFont);
-                  }}
-                  options={fontOptions}
-                />
-              </>
-            )}
-          </div>
-        );
-
+          
+                {selectedTheme === 'BASIC-CUSTOM' && (
+                  <>
+                    <h3>Basic Colors</h3>
+                    {/* Basic Color Inputs using ColorSetting Component */}
+                    <ColorSetting
+                      name="Primary Color"
+                      value={primaryColor}
+                      setValue={setPrimaryColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Secondary Color"
+                      value={secondaryColor}
+                      setValue={setSecondaryColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Accent Color"
+                      value={accentColor}
+                      setValue={setAccentColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Background Color"
+                      value={basicBackgroundColor}
+                      setValue={setBasicBackgroundColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Text Color"
+                      value={basicTextColor}
+                      setValue={setBasicTextColor}
+                      cssVariable=""
+                    />
+                  </>
+                )}
+                
+                {selectedTheme === 'CUSTOM' && (
+                  <>
+                    <h3>Additional Settings</h3>
+                    {/* Additional Font Size Setting */}
+                    <FontSizeSetting
+                      fontSize={fontSize}
+                      setFontSize={setFontSize}
+                    />
+          
+                    {colorSettings.map((setting) => (
+                      <ColorSetting
+                        key={setting.cssVariable}
+                        name={setting.name}
+                        value={setting.value}
+                        setValue={setting.setValue}
+                        cssVariable={setting.cssVariable}
+                      />
+                    ))}
+          
+                    <DropdownSetting
+                      label="Font Family"
+                      value={fontFamily}
+                      setValue={(newFont) => {
+                        setFontFamily(newFont);
+                        document.documentElement.style.setProperty('--font-family', newFont);
+                      }}
+                      options={fontOptions}
+                    />
+                  </>
+                )}
+              </div>
+            );       
 
       case 'foss':
         return (
diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts
index e88ca18..2cef5cc 100644
--- a/app/components/settings/theme.ts
+++ b/app/components/settings/theme.ts
@@ -92,7 +92,7 @@ export const applyBlackTheme = () => {
   document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
   document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
   document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
-  document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
+  document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background  
   document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
   document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
   document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
@@ -115,36 +115,46 @@ export const applyBlackTheme = () => {
 
 export const applyCustomTheme = () => {
   const themeVariables = {
-      backgroundColor: localStorage.getItem('backgroundColor'),
-      headerBackground: localStorage.getItem('headerBackground'),
-      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'),
-      faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
-      faqHeadingColor: localStorage.getItem('faqHeadingColor'),
-      faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
-      faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
-      faqItemTextColor: localStorage.getItem('faqItemTextColor'),
-      faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
-      inputBorderColor: localStorage.getItem('inputBorderColor'),
-      fontFamily: localStorage.getItem('fontFamily'),
-      fontSize: localStorage.getItem('fontSize'),
-      burgerMenu: localStorage.getItem('burgerMenu'),
+    backgroundColor: localStorage.getItem('backgroundColor'),
+    headerBackground: localStorage.getItem('headerBackground'),
+    headerTextColor: localStorage.getItem('headerTextColor'),
+    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'),
+    docBackgroundColor: localStorage.getItem('docBackgroundColor'),
+    closeButtonColor: localStorage.getItem('closeButtonColor'),
+    closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
+    applyButtonColor: localStorage.getItem('applyButtonColor'),
+    applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
+    burgerMenu: localStorage.getItem('burgerMenu'),
+    overlayTextColor: localStorage.getItem('overlayTextColor'),
+    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'),
+    popUpText: localStorage.getItem('popUpText'),
+    inputBorderColor: localStorage.getItem('inputBorderColor'),
+    fontFamily: localStorage.getItem('fontFamily'),
+    fontSize: localStorage.getItem('fontSize'),
   };
 
-  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
   document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
+  document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
   document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
   document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
   document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
@@ -159,36 +169,136 @@ export const applyCustomTheme = () => {
   document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
   document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
   document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
-  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
+  document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
+  document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
+  document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
+  document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
+  document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
+  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+  document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
+  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
+  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
   document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
   document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
+  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
+  document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
+  document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
   document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
   document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
   document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
-  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+};
+
+// TypeScript types for color parameters
+type Color = string;
+
+export const applyBasicCustomTheme = (
+  primaryColor: Color,
+  secondaryColor: Color,
+  accentColor: Color,
+  backgroundColor: Color,
+  textColor: Color
+) => {
+  // Calculate additional colors based on the provided colors
+  const headerBackgroundColor = secondaryColor; // Use secondary color for header background
+  const headerTextColor = lightenColor(textColor, 50); // Lighten text color for header
+  const inputButtonColor = primaryColor; // Use primary color for input buttons
+  const userMessageBackgroundColor = accentColor; // Use accent color for user messages
+  const aiMessageBackgroundColor = backgroundColor; // Use background color for AI messages
+  const buttonHoverBackgroundColor = darkenColor(primaryColor, 30); // Darken primary color for hover
+  const closeButtonColor = darkenColor(accentColor, 20); // Darkened accent color for close button
+  const closeButtonHoverColor = darkenColor(closeButtonColor, 10); // Darker close button hover color
+  const darkerAccentColor = darkenColor(accentColor, 20); // Darken accent color for contrast
+  const lightenedPrimaryColor = lightenColor(primaryColor, 10); // Lighten primary color for highlights
+  const lighterBackgroundColor = lightenColor(backgroundColor, 10); // Lighten background for contrast
+  const darkerBackgroundColor = darkenColor(backgroundColor, 20); // More pronounced dark background
+
+   // Set all CSS variables
+  document.documentElement.style.setProperty('--header-background-color', headerBackgroundColor);
+  document.documentElement.style.setProperty('--header-text-color', headerTextColor);
+  document.documentElement.style.setProperty('--background-color', backgroundColor);
+  document.documentElement.style.setProperty('--text-color', textColor);
+  document.documentElement.style.setProperty('--input-background-color', lightenColor(backgroundColor, 10));
+  document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
+  document.documentElement.style.setProperty('--input-button-hover-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
+  document.documentElement.style.setProperty('--user-message-text-color', lightenColor(textColor, 60));
+  document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
+  document.documentElement.style.setProperty('--ai-message-text-color', lightenColor(textColor, 60));
+  document.documentElement.style.setProperty('--button-background-color', inputButtonColor);
+  document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--models-background-color', darkerBackgroundColor);
+  document.documentElement.style.setProperty('--history-background-color', lighterBackgroundColor);
+  document.documentElement.style.setProperty('--left-panel-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--conversation-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--doc-background-color', lighterBackgroundColor);
+  document.documentElement.style.setProperty('--close-button-color', closeButtonColor);
+  document.documentElement.style.setProperty('--close-button-hover-color', closeButtonHoverColor);
+  document.documentElement.style.setProperty('--apply-button-color', inputButtonColor);
+  document.documentElement.style.setProperty('--apply-button-hover-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--burger-menu-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--overlay-text-color', lightenColor(textColor, 80));
+  document.documentElement.style.setProperty('--faq-background-color', lightenColor(backgroundColor, 10));
+  document.documentElement.style.setProperty('--faq-heading-color', lightenedPrimaryColor);
+  document.documentElement.style.setProperty('--faq-item-background-color', darkerAccentColor);
+  document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
+  document.documentElement.style.setProperty('--faq-item-text-color', '#000000');
+  document.documentElement.style.setProperty('--faq-item-hover-background-color', lightenColor(accentColor, 10));
+  document.documentElement.style.setProperty('--popup-background-color', accentColor);
+  document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
+  document.documentElement.style.setProperty('--input-border-color', primaryColor);
+  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
+  document.documentElement.style.setProperty('--font-size', '16px');
+};
+
+// Helper function to darken a color (returns a darker version of the provided color)
+const darkenColor = (color: Color, percent: number): Color => {
+  let r = parseInt(color.slice(1, 3), 16);
+  let g = parseInt(color.slice(3, 5), 16);
+  let b = parseInt(color.slice(5, 7), 16);
+  r = Math.floor(r * (1 - percent / 100));
+  g = Math.floor(g * (1 - percent / 100));
+  b = Math.floor(b * (1 - percent / 100));
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+};
+
+// Helper function to lighten a color (returns a lighter version of the provided color)
+const lightenColor = (color: Color, percent: number): Color => {
+  let r = parseInt(color.slice(1, 3), 16);
+  let g = parseInt(color.slice(3, 5), 16);
+  let b = parseInt(color.slice(5, 7), 16);
+  r = Math.min(255, Math.floor(r * (1 + percent / 100)));
+  g = Math.min(255, Math.floor(g * (1 + percent / 100)));
+  b = Math.min(255, Math.floor(b * (1 + percent / 100)));
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
 };
 
 // This is the new function that calls the appropriate theme application
-export const applyTheme = (theme: string) => {
+export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
   switch (theme) {
-      case 'IOMARKET':
-        applyIOMarketTheme();
-        break;
-      case 'WHITE':
-        applyWhiteTheme();
-        break;
-      case 'BLACK':
-        applyBlackTheme();
-        break;
-      case 'CUSTOM':
-        applyCustomTheme();
-        break;
-      default:
-        applyIOMarketTheme();
-        break;
+    case 'IOMARKET':
+      applyIOMarketTheme();
+      break;
+    case 'WHITE':
+      applyWhiteTheme();
+      break;
+    case 'BLACK':
+      applyBlackTheme();
+      break;
+    case 'CUSTOM':
+      applyCustomTheme();
+      break;
+    case 'BASIC-CUSTOM':
+      applyBasicCustomTheme(
+          primary,
+          secondary,
+          accent,
+          background,
+          text
+        );
+      break;
+    default:
+      applyIOMarketTheme();
+      break;
   }
 };
-
diff --git a/app/page.tsx b/app/page.tsx
index cca5ac1..02bcf6c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,9 +7,7 @@ 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/Settings';
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/settings/theme'
-import Head from 'next/head';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
@@ -17,6 +15,22 @@ const LandingPage: React.FC = () => {
   const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
   const conversationRef = useRef<HTMLDivElement>(null);
 
+
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
+
+  useEffect(()=>{
+    setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
+    setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
+    setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
+    setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
+    setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
+  })
+  
+
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
   };
@@ -48,6 +62,15 @@ const LandingPage: React.FC = () => {
           case 'CUSTOM':
             applyCustomTheme();
             break;
+          case 'BASIC-CUSTOM':
+            applyBasicCustomTheme(
+                primaryColor,
+                secondaryColor,
+                accentColor,
+                basicBackgroundColor,
+                basicTextColor
+              );
+            break;
           default:
             applyIOMarketTheme();
             break;

From 6a5c0698205c15a50449460a1e948b82d1635e44 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.codeberg.org>
Date: Wed, 2 Oct 2024 14:01:16 +0200
Subject: [PATCH 6/6] history changes

---
 app/backend/ChatHistory.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/backend/ChatHistory.ts b/app/backend/ChatHistory.ts
index f050898..62c9a50 100644
--- a/app/backend/ChatHistory.ts
+++ b/app/backend/ChatHistory.ts
@@ -1,22 +1,22 @@
 type ChatMessage = {
     name: string;
-    message: any;
+    messages: any;
     timestamp: number;
 };
 
 let chatHistory: ChatMessage[] = [];
 
-function addMessage(name: string, message: any): void {
+function addMessageHistory(name: string, message: any): void {
     const newMessage: ChatMessage = {
         name: name,
-        message: message,
+        messages: message,
         timestamp: Date.now()
     };
     chatHistory.push(newMessage);
     console.log(`Added message from ${name}: ${message}`);
 }
 
-function removeMessage(timestamp: number): void {
+function removeMessageHistory(timestamp: number): void {
     const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp);
     if (index > -1) {
         chatHistory.splice(index, 1);