forked from React-Group/interstellar_ai
Compare commits
No commits in common. "07771e46cf3874242c20757f3eeda2b9f389421f" and "3d42572120515b5ec028f3c894eadf2b2bbdfeef" have entirely different histories.
07771e46cf
...
3d42572120
3 changed files with 453 additions and 757 deletions
|
|
@ -11,7 +11,6 @@ import {
|
|||
checkCredentials,
|
||||
deleteAccount,
|
||||
} from '../backend/database';
|
||||
import { equal } from 'assert';
|
||||
|
||||
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
||||
|
||||
|
|
@ -86,43 +85,9 @@ 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<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
|
||||
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
|
||||
|
||||
// API Keys
|
||||
const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
|
||||
|
|
@ -181,16 +146,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
openai,
|
||||
anthropic,
|
||||
google,
|
||||
// Additional theme settings
|
||||
faqBackgroundColor,
|
||||
faqHeadingColor,
|
||||
faqItemBackgroundColor,
|
||||
faqItemHeadingColor,
|
||||
faqItemTextColor,
|
||||
faqItemHoverBackgroundColor,
|
||||
popupBackgroundColor,
|
||||
overlayTextColor,
|
||||
};
|
||||
|
||||
// Update local storage
|
||||
for (const [key, value] of Object.entries(settings)) {
|
||||
if (typeof value === 'boolean') {
|
||||
|
|
@ -239,15 +196,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
openai,
|
||||
anthropic,
|
||||
google,
|
||||
// Additional theme settings
|
||||
faqBackgroundColor,
|
||||
faqHeadingColor,
|
||||
faqItemBackgroundColor,
|
||||
faqItemHeadingColor,
|
||||
faqItemTextColor,
|
||||
faqItemHoverBackgroundColor,
|
||||
popupBackgroundColor,
|
||||
overlayTextColor,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -363,45 +311,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
}
|
||||
|
||||
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);
|
||||
setBurgerMenu(settings.fontSize);
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Function to handle updating all credentials
|
||||
const handleUpdateCredentials = async () => {
|
||||
// Update account information
|
||||
|
|
@ -618,31 +532,28 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<select
|
||||
value={selectedTheme}
|
||||
onChange={(e) => {
|
||||
const theme = e.target.value;
|
||||
if (theme !== "default") {
|
||||
setSelectedTheme(theme);
|
||||
localStorage.setItem("selectedTheme", theme);
|
||||
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) {
|
||||
switch (theme) { // Use 'theme' instead of 'selectedTheme'
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme();
|
||||
applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme();
|
||||
applyWhiteTheme(); // Call the function to apply the WHITE theme
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme();
|
||||
applyBlackTheme(); // Call the function to apply the BLACK theme
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
// Handle custom theme logic here if necessary
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
applyIOMarketTheme(); // Fallback to the IOMARKET theme
|
||||
break;
|
||||
}
|
||||
}
|
||||
}}
|
||||
}} // Handle theme selection
|
||||
>
|
||||
<option value="default">Select your style...</option>
|
||||
<option value="IOMARKET">IOMARKET</option>
|
||||
|
|
@ -651,10 +562,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<option value="CUSTOM">CUSTOM</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
{/* Font Size */}
|
||||
<div className="settings-option">
|
||||
<p>Font Size</p>
|
||||
<input
|
||||
|
|
@ -671,7 +582,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<span>{fontSize}</span>
|
||||
</div>
|
||||
|
||||
{/* Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Background Color</p>
|
||||
<input
|
||||
|
|
@ -685,7 +595,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>Text Color</p>
|
||||
<input
|
||||
|
|
@ -699,7 +608,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Input Background Color</p>
|
||||
<input
|
||||
|
|
@ -713,7 +621,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Button Color */}
|
||||
<div className="settings-option">
|
||||
<p>Input Button Color</p>
|
||||
<input
|
||||
|
|
@ -727,7 +634,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Button Hover Color */}
|
||||
<div className="settings-option">
|
||||
<p>Input Button Hover Color</p>
|
||||
<input
|
||||
|
|
@ -741,7 +647,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* User Message Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>User Message Background Color</p>
|
||||
<input
|
||||
|
|
@ -755,7 +660,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* User Message Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>User Message Text Color</p>
|
||||
<input
|
||||
|
|
@ -769,7 +673,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* AI Message Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>AI Message Background Color</p>
|
||||
<input
|
||||
|
|
@ -783,7 +686,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* AI Message Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>AI Message Text Color</p>
|
||||
<input
|
||||
|
|
@ -797,7 +699,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Button Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Button Background Color</p>
|
||||
<input
|
||||
|
|
@ -811,7 +712,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Button Hover Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Button Hover Background Color</p>
|
||||
<input
|
||||
|
|
@ -825,7 +725,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Models Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Models Background Color</p>
|
||||
<input
|
||||
|
|
@ -839,7 +738,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* History Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>History Background Color</p>
|
||||
<input
|
||||
|
|
@ -853,7 +751,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Left Panel Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Left Panel Background Color</p>
|
||||
<input
|
||||
|
|
@ -867,7 +764,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Conversation Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Conversation Background Color</p>
|
||||
<input
|
||||
|
|
@ -881,7 +777,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Pop-up Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>Pop-up Text Color</p>
|
||||
<input
|
||||
|
|
@ -895,7 +790,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Border Color */}
|
||||
<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>
|
||||
|
||||
<div className="settings-option">
|
||||
<p>Input Border Color</p>
|
||||
<input
|
||||
|
|
@ -909,7 +816,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Font Family */}
|
||||
<div className="settings-option">
|
||||
<p>Font Family</p>
|
||||
<select
|
||||
|
|
@ -937,117 +843,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
</select>
|
||||
</div>
|
||||
|
||||
{/* FAQ Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Heading Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Heading Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqHeadingColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqHeadingColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-heading-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Heading Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Heading Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemHeadingColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemHeadingColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemTextColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemTextColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Hover Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Hover Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemHoverBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemHoverBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Popup Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Popup Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={popupBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setPopupBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--popup-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Overlay Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>Overlay Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={overlayTextColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setOverlayTextColor(newColor);
|
||||
document.documentElement.style.setProperty('--overlay-text-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -1238,17 +1033,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
mistral,
|
||||
openai,
|
||||
anthropic,
|
||||
google,
|
||||
|
||||
// Additional theme settings if needed
|
||||
faqBackgroundColor,
|
||||
faqHeadingColor,
|
||||
faqItemBackgroundColor,
|
||||
faqItemHeadingColor,
|
||||
faqItemTextColor,
|
||||
faqItemHoverBackgroundColor,
|
||||
popupBackgroundColor,
|
||||
overlayTextColor,
|
||||
google
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -1274,7 +1059,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<button className="apply" onClick={() => {
|
||||
applySettings;
|
||||
getAllLocalStorageItems();
|
||||
closeSettings();
|
||||
closeSettings(); // This is invoked when the button is clicked
|
||||
}}>
|
||||
Apply
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -94,63 +94,3 @@ export const applyBlackTheme = () => {
|
|||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
|
||||
};
|
||||
|
||||
export const applyCustomTheme = () => {
|
||||
// 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
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
29
app/page.tsx
29
app/page.tsx
|
|
@ -7,8 +7,6 @@ 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';
|
||||
|
||||
|
|
@ -28,33 +26,6 @@ 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
|
||||
|
|
|
|||
Loading…
Reference in a new issue