sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Compare commits

base: sageTheDm:07771e46cf3874242c20757f3eeda2b9f389421f
Branches Tags
sageTheDm:main
React-Group:main
..
compare: sageTheDm:3d42572120515b5ec028f3c894eadf2b2bbdfeef
Branches Tags
sageTheDm:main
React-Group:main

No commits in common. "07771e46cf3874242c20757f3eeda2b9f389421f" and "3d42572120515b5ec028f3c894eadf2b2bbdfeef" have entirely different histories.
07771e46cf ... 3d42572120

3 changed files with 453 additions and 757 deletions
Show stats Expand all files Collapse all files

271
app/components/Settings.tsx
View file

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

62
app/components/theme.ts
View file

@ -92,65 +92,5 @@ export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border 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-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size 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
*/
}

29
app/page.tsx
View file

@ -7,8 +7,6 @@ import Documentation from './components/Documentation'; // Ensure the import pat
import History from './components/History'; import History from './components/History';
import Models from './components/Models'; import Models from './components/Models';
import Credits from './components/Credits'; import Credits from './components/Credits';
import Settings from './components/Settings';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme'
import Head from 'next/head'; import Head from 'next/head';
import './styles/master.css'; 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 ( return (
<> <>
<Header <Header