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
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();