React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Model changes

Browse source
This commit is contained in:
sageTheDM 2024-10-02 09:04:24 +02:00
parent f7dc957c3a
commit e602c885e5
3 changed files with 222 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
app/components/Models.tsx
View file

@ -137,11 +137,11 @@ const modelList = {
} }
} }
// Define the available category options // Define the available selectedAIFunction options
const modelDropdown = { const modelDropdown = {
offlineWithoutFoss: ['Offline Fast', 'Offline Slow'], offlineNonFoss: ['Offline Fast', 'Offline Slow'],
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'], offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
onlineWithoutFoss: [ onlineNonFoss: [
'Online Cheap (OpenAI)', 'Online Cheap (OpenAI)',
'Online Expensive (OpenAI)', 'Online Expensive (OpenAI)',
'Online Cheap (Anthropic)', 'Online Cheap (Anthropic)',
@ -153,7 +153,7 @@ const modelDropdown = {
onlineFoss: ['Online (FOSS) (La Plateforme)'], onlineFoss: ['Online (FOSS) (La Plateforme)'],
}; };
const Category = [ const selectedAIFunction = [
'Code', 'Code',
'Math', 'Math',
'Language', 'Language',
@ -166,21 +166,23 @@ const Category = [
'Custom2' 'Custom2'
] ]
const Models: React.FC = () => { const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to '' // Initialize state with value from localStorage or default to ''
const [selectedModel, setSelectedModel] = useState(''); const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
const [radioSelection, setRadioSelection] = useState<string | null>("") const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeCategory, setActiveCategory] = useState(''); const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory")); const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
useEffect(() => { useEffect(() => {
if (!localStorage.getItem('selectedModel')) { var temp = localStorage.getItem("activeSelectedAIFunction") || ""
localStorage.setItem("selectedModel", "Offline Fast" ) setActiveSelectedAIFunction(temp)
if (!localStorage.getItem('selectedModelDropdown')) {
localStorage.setItem("selectedModelDropdown", "Offline Fast" )
} }
if (!localStorage.getItem("activeCategory")) { if (!localStorage.getItem("activeSelectedAIFunction")) {
setActiveCategory('Code') setActiveSelectedAIFunction('Code')
localStorage.setItem('activeCategory' ,'Code') localStorage.setItem('activeSelectedAIFunction' ,'Code')
} }
if (!localStorage.getItem("model")) { if (!localStorage.getItem("model")) {
@ -188,14 +190,14 @@ const Models: React.FC = () => {
} }
const handleStorageChange = () => { const handleStorageChange = () => {
setSelectedModel(localStorage.getItem('selectedModel') || ''); setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
}; };
// Update immediately when localStorage changes // Update immediately when localStorage changes
window.addEventListener('storage', handleStorageChange); window.addEventListener('storage', handleStorageChange);
setRadioSelection(localStorage.getItem('radioSelection') || ''); setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModel(localStorage.getItem('selectedModel') || ''); setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
// Cleanup listener on component unmount // Cleanup listener on component unmount
return () => { return () => {
window.removeEventListener('storage', handleStorageChange); window.removeEventListener('storage', handleStorageChange);
@ -203,16 +205,16 @@ const Models: React.FC = () => {
}, []); // Dependency array can remain empty if you only want this to run on mount }, []); // Dependency array can remain empty if you only want this to run on mount
useEffect(() => { useEffect(() => {
const storedCategory = localStorage.getItem("activeCategory"); var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
if (storedCategory !== currentCategory) { if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
setCurrentCategory(storedCategory); setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
} }
}, [activeCategory]); }, [activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value; const newModel = event.target.value;
setSelectedModel(newModel); setSelectedModelDropdown(newModel);
localStorage.setItem('selectedModel', newModel); // Update localStorage directly localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
}; };
// Determine the filtered models based on current radioSelection // Determine the filtered models based on current radioSelection
@ -221,7 +223,7 @@ const Models: React.FC = () => {
switch (radioSelection) { switch (radioSelection) {
case 'Offline': case 'Offline':
models = [ models = [
...modelDropdown.onlineWithoutFoss, ...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS ]; // Show only offline models without FOSS
break; break;
@ -232,7 +234,7 @@ const Models: React.FC = () => {
break; break;
case 'Online': case 'Online':
models = [ models = [
...modelDropdown.offlineWithoutFoss, ...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
]; // Show only online models without FOSS ]; // Show only online models without FOSS
break; break;
@ -243,9 +245,9 @@ const Models: React.FC = () => {
break; break;
case 'None': case 'None':
models = [ models = [
...modelDropdown.offlineWithoutFoss, ...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
...modelDropdown.onlineWithoutFoss, ...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show all models if nothing matches ]; // Show all models if nothing matches
break; break;
@ -257,9 +259,9 @@ const Models: React.FC = () => {
break; break;
default: default:
models = [ models = [
...modelDropdown.offlineWithoutFoss, ...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
...modelDropdown.onlineWithoutFoss, ...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show all models if nothing matches ]; // Show all models if nothing matches
break; break;
@ -268,14 +270,14 @@ const Models: React.FC = () => {
})(); })();
const isOfflineModel = (model: string) => const isOfflineModel = (model: string) =>
modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model); modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
const modelClicked = (model: string) => { const modelClicked = (model: string) => {
localStorage.setItem('activeCategory' , model) localStorage.setItem('activeSelectedAIFunction' , model)
setActiveCategory(model) setActiveSelectedAIFunction(model)
const category = selectedModel as keyof typeof modelList; const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]]) localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]]) localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
} }
return ( return (
@ -288,7 +290,7 @@ const Models: React.FC = () => {
{/* Model Selection Dropdown */} {/* Model Selection Dropdown */}
<div className="model-dropdown"> <div className="model-dropdown">
<label htmlFor="model-select">Select AI Model:</label> <label htmlFor="model-select">Select AI Model:</label>
<select id="model-select" value={selectedModel} onChange={handleModelChange}> <select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
{filteredModels.map((model) => ( {filteredModels.map((model) => (
<option key={model} value={model}> <option key={model} value={model}>
{model} {model}
@ -299,16 +301,16 @@ const Models: React.FC = () => {
{/* Model Grid with Cards */} {/* Model Grid with Cards */}
<div className="grid"> <div className="grid">
{Category.map( {selectedAIFunction.map(
(displayedCategory) => ( (displayedCategory) => (
<button <button
key={displayedCategory} key={displayedCategory}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`} className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
onClick={() => modelClicked(displayedCategory)} onClick={() => modelClicked(displayedCategory)}
> >
<div className="overlay"> <div className="overlay">
<h3>{displayedCategory}</h3> <h3>{displayedCategory}</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
) )
@ -319,4 +321,4 @@ const Models: React.FC = () => {
); );
}; };
export default Models; export default ModelSection;

4
app/components/settings/Settings.tsx
View file

@ -174,8 +174,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
}; };
const colorSettings = [ const colorSettings = [
{ name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" }, { name: "Background Color", value: backgroundColor, setValue: setBackgroundColor, cssVariable: "--background-color" },
{ name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" }, { name: "Header Background Color", value: headerBackground, setValue: setHeaderBackground, cssVariable: "--header-background-color" },
{ name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" }, { name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" },
{ name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" }, { name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" },
{ name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" }, { name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" },

142
app/components/settings/theme.ts
View file

@ -17,86 +17,106 @@ export const applyIOMarketTheme = () => {
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); document.documentElement.style.setProperty('--left-panel-background-color', '#79832e');
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); document.documentElement.style.setProperty('--conversation-background-color', '#79832e');
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
document.documentElement.style.setProperty('--close-button-color', 'red');
document.documentElement.style.setProperty('--close-button-hover-color', '#9e0101');
document.documentElement.style.setProperty('--apply-button-color', '#8B9635');
document.documentElement.style.setProperty('--apply-button-hover-color', '#6b7c2b');
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
document.documentElement.style.setProperty('--overlay-text-color', 'white');
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); document.documentElement.style.setProperty('--faq-background-color', '#474D22');
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); document.documentElement.style.setProperty('--faq-heading-color', '#8B9635');
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe');
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22');
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); document.documentElement.style.setProperty('--faq-item-text-color', '#333');
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
document.documentElement.style.setProperty('--popup-background-color', '#8B9635');
document.documentElement.style.setProperty('--pop-up-text', '#000'); document.documentElement.style.setProperty('--pop-up-text', '#000');
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); document.documentElement.style.setProperty('--input-border-color', '#8B9635');
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--font-size', '16px'); document.documentElement.style.setProperty('--font-size', '16px');
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
}; };
export const applyWhiteTheme = () => { export const applyWhiteTheme = () => {
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); document.documentElement.style.setProperty('--header-background-color', '#f0f0f0'); // Lighter header background
document.documentElement.style.setProperty('--header-text-color', '#000000'); document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); document.documentElement.style.setProperty('--background-color', '#ffffff'); // White background
document.documentElement.style.setProperty('--text-color', '#000000'); document.documentElement.style.setProperty('--text-color', '#000'); // Dark text color
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); document.documentElement.style.setProperty('--input-background-color', '#f9f9f9'); // Light input background
document.documentElement.style.setProperty('--input-button-color', '#007bff'); document.documentElement.style.setProperty('--input-button-color', '#cccccc'); // Light button color
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); document.documentElement.style.setProperty('--input-button-hover-color', '#b3b3b3'); // Slightly darker on hover
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); document.documentElement.style.setProperty('--user-message-background-color', '#e0e0e0'); // Light grey for user messages
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Dark text for contrast
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); document.documentElement.style.setProperty('--ai-message-background-color', '#f7f7f7'); // Very light background for AI messages
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Dark text for readability
document.documentElement.style.setProperty('--button-background-color', '#007bff'); document.documentElement.style.setProperty('--button-background-color', '#cccccc'); // Light button background
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); document.documentElement.style.setProperty('--button-hover-background-color', '#b3b3b3'); // Darker on hover
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // White background for models section
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Light background for history section
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); document.documentElement.style.setProperty('--left-panel-background-color', '#e0e0e0'); // Light grey for the left panel
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); document.documentElement.style.setProperty('--conversation-background-color', '#e0e0e0'); // Light grey conversation background
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // White document background
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); document.documentElement.style.setProperty('--close-button-color', '#ff4d4d'); // Soft red close button
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); document.documentElement.style.setProperty('--close-button-hover-color', '#ff1a1a'); // Brighter red on hover
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); document.documentElement.style.setProperty('--apply-button-color', '#cccccc'); // Light button color for apply
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); document.documentElement.style.setProperty('--apply-button-hover-color', '#b3b3b3'); // Darker hover color for apply button
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); document.documentElement.style.setProperty('--burger-menu-background-color', '#e0e0e0'); // Light grey burger menu background
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); document.documentElement.style.setProperty('--overlay-text-color', '#333'); // Dark overlay text
document.documentElement.style.setProperty('--pop-up-text', '#000000'); document.documentElement.style.setProperty('--faq-background-color', '#f0f0f0'); // Light FAQ section background
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); document.documentElement.style.setProperty('--faq-heading-color', '#333'); // Dark heading for contrast
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--faq-item-background-color', '#ffffff'); // White background for FAQ items
document.documentElement.style.setProperty('--font-size', '16px'); document.documentElement.style.setProperty('--faq-item-heading-color', '#000'); // Dark headings for FAQ items
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); document.documentElement.style.setProperty('--faq-item-text-color', '#666'); // Medium grey text color for readability
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#eaeaea'); // Slight hover effect for FAQ items
document.documentElement.style.setProperty('--popup-background-color', '#ffffff'); // White popup background
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Dark text for pop-ups
document.documentElement.style.setProperty('--input-border-color', '#cccccc'); // Light input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Same font family
document.documentElement.style.setProperty('--font-size', '16px'); // Same font size
}; };
export const applyBlackTheme = () => { export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header
document.documentElement.style.setProperty('--background-color', '#121212'); document.documentElement.style.setProperty('--background-color', '#2c2c2c'); // Dark main background
document.documentElement.style.setProperty('--text-color', '#e0e0e0'); document.documentElement.style.setProperty('--text-color', '#f0f0f0'); // Light text color
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); document.documentElement.style.setProperty('--input-background-color', '#3d3d3d'); // Dark input background
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); document.documentElement.style.setProperty('--input-button-color', '#4caf50'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); document.documentElement.style.setProperty('--input-button-hover-color', '#66bb6a'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#000000'); document.documentElement.style.setProperty('--user-message-background-color', '#4caf50'); // User message background
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User message text color
document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); document.documentElement.style.setProperty('--ai-message-background-color', '#424242'); // AI message background
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI message text color
document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); document.documentElement.style.setProperty('--button-background-color', '#4caf50'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); document.documentElement.style.setProperty('--button-hover-background-color', '#66bb6a'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); document.documentElement.style.setProperty('--models-background-color', '#3d3d3d'); // Dark background for models section
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); document.documentElement.style.setProperty('--apply-button-hover-color', '#66bb6a'); // Apply button hover color
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); document.documentElement.style.setProperty('--burger-menu-background-color', '#1a1a1a'); // Dark burger menu background
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); document.documentElement.style.setProperty('--overlay-text-color', '#ffffff'); // White overlay text
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); document.documentElement.style.setProperty('--faq-background-color', '#333333'); // Dark background for FAQ section
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); document.documentElement.style.setProperty('--faq-heading-color', '#4caf50'); // FAQ heading color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--faq-item-background-color', '#4c4c4c'); // Dark FAQ item background
document.documentElement.style.setProperty('--font-size', '16px'); document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // White FAQ item heading
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Light text for FAQ items
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#555555'); // Hover background for FAQ items
document.documentElement.style.setProperty('--popup-background-color', '#4caf50'); // Dark popup background
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // White pop-up text
document.documentElement.style.setProperty('--input-border-color', '#4caf50'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
}; };
export const applyCustomTheme = () => { export const applyCustomTheme = () => {
const themeVariables = { const themeVariables = {
backgroundColor: localStorage.getItem('backgroundColor'), backgroundColor: localStorage.getItem('backgroundColor'),
headerBackground: localStorage.getItem('headerBackground'),
textColor: localStorage.getItem('textColor'), textColor: localStorage.getItem('textColor'),
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'), inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
inputButtonColor: localStorage.getItem('inputButtonColor'), inputButtonColor: localStorage.getItem('inputButtonColor'),
@ -124,6 +144,7 @@ export const applyCustomTheme = () => {
}; };
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
@ -163,10 +184,11 @@ export const applyTheme = (theme: string) => {
applyBlackTheme(); applyBlackTheme();
break; break;
case 'CUSTOM': case 'CUSTOM':
// Handle custom theme application here if necessary applyCustomTheme();
break; break;
default: default:
applyIOMarketTheme(); applyIOMarketTheme();
break; break;
} }
}; };