Merge pull request 'Merge pull request 'Merge pull request 'Fixed the Models utilising useEffect' (#49) from sageTheDm/interstellar_ai:main into main' (#19) from React-Group/interstellar_ai:main into main' (#50) from sageTheDm/interstellar_ai:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/50
This commit is contained in:
commit
016f5bfa79
4 changed files with 138 additions and 91 deletions
|
|
@ -102,7 +102,13 @@ const Models: React.FC = () => {
|
||||||
</button>
|
</button>
|
||||||
<button className="default-model model-box">
|
<button className="default-model model-box">
|
||||||
<div className="overlay">
|
<div className="overlay">
|
||||||
<h3>Custom</h3>
|
<h3>Custom1</h3>
|
||||||
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button className="default-model model-box">
|
||||||
|
<div className="overlay">
|
||||||
|
<h3>Custom2</h3>
|
||||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
|
||||||
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
|
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
|
||||||
|
|
||||||
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
||||||
|
|
@ -57,6 +58,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
|
const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
|
||||||
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());
|
||||||
|
|
||||||
// Theme selection
|
// Theme selection
|
||||||
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
|
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
|
||||||
|
|
@ -200,6 +202,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
localStorage.setItem('fontSize', fontSize);
|
localStorage.setItem('fontSize', fontSize);
|
||||||
}, [fontSize]);
|
}, [fontSize]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem('burgerMenu', burgerMenu);
|
||||||
|
}, [fontSize]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
localStorage.setItem('selectedTheme', selectedTheme);
|
localStorage.setItem('selectedTheme', selectedTheme);
|
||||||
}, [selectedTheme]);
|
}, [selectedTheme]);
|
||||||
|
|
@ -316,6 +322,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
setFontSize(settings.fontSize);
|
setFontSize(settings.fontSize);
|
||||||
document.documentElement.style.setProperty('--font-size', 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);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -472,105 +483,25 @@ 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
|
||||||
setSelectedTheme(theme); // Update state for selected theme
|
setSelectedTheme(theme); // Update state for selected 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':
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
|
applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
|
|
||||||
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
|
|
||||||
document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
|
|
||||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
|
|
||||||
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
|
|
||||||
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
|
|
||||||
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
|
|
||||||
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
|
|
||||||
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
|
|
||||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
|
|
||||||
document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
|
|
||||||
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
|
|
||||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
|
|
||||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
|
||||||
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
|
|
||||||
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
|
|
||||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
|
||||||
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
|
|
||||||
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
|
|
||||||
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
|
|
||||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
|
|
||||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
|
|
||||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
|
||||||
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
|
|
||||||
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
|
|
||||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
|
||||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
|
||||||
break;
|
break;
|
||||||
case 'WHITE':
|
case 'WHITE':
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
|
applyWhiteTheme(); // Call the function to apply the WHITE theme
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
|
|
||||||
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
|
|
||||||
document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
|
|
||||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
|
|
||||||
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
|
|
||||||
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
|
|
||||||
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
|
|
||||||
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
|
|
||||||
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
|
|
||||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
|
|
||||||
document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
|
|
||||||
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
|
|
||||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
|
|
||||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
|
||||||
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
|
|
||||||
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
|
|
||||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
|
||||||
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
|
|
||||||
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
|
|
||||||
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
|
|
||||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
|
|
||||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
|
|
||||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
|
||||||
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
|
|
||||||
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
|
|
||||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
|
||||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
|
||||||
break;
|
break;
|
||||||
case 'BLACK':
|
case 'BLACK':
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
applyBlackTheme(); // Call the function to apply the BLACK theme
|
||||||
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
|
|
||||||
break;
|
break;
|
||||||
case 'CUSTOM':
|
case 'CUSTOM':
|
||||||
// Handle custom theme logic here
|
// Handle custom theme logic here if necessary
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
applyIOMarketTheme(); // Fallback to the IOMARKET theme
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}} // Handle theme selection
|
}} // Handle theme selection
|
||||||
|
|
@ -582,6 +513,7 @@ 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' && (
|
||||||
<>
|
<>
|
||||||
|
|
@ -809,6 +741,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<p>Input Border Color</p>
|
<p>Input Border Color</p>
|
||||||
<input
|
<input
|
||||||
|
|
|
||||||
96
app/components/theme.ts
Normal file
96
app/components/theme.ts
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
// theme.ts
|
||||||
|
export const applyIOMarketTheme = () => {
|
||||||
|
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
|
||||||
|
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
|
||||||
|
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
|
||||||
|
document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
|
||||||
|
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
|
||||||
|
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
|
||||||
|
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
|
||||||
|
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
|
||||||
|
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
|
||||||
|
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
|
||||||
|
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
|
||||||
|
document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
|
||||||
|
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
|
||||||
|
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
|
||||||
|
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||||
|
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
|
||||||
|
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
|
||||||
|
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||||
|
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
|
||||||
|
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
|
||||||
|
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
|
||||||
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
|
||||||
|
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // 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
|
||||||
|
};
|
||||||
|
|
||||||
|
export const applyWhiteTheme = () => {
|
||||||
|
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
|
||||||
|
document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
|
||||||
|
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
|
||||||
|
document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
|
||||||
|
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
|
||||||
|
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
|
||||||
|
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
|
||||||
|
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
|
||||||
|
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
|
||||||
|
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
|
||||||
|
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
|
||||||
|
document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
|
||||||
|
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
|
||||||
|
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
|
||||||
|
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||||
|
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
|
||||||
|
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
|
||||||
|
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||||
|
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
|
||||||
|
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
|
||||||
|
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
|
||||||
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
|
||||||
|
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // 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
|
||||||
|
};
|
||||||
|
|
||||||
|
export const applyBlackTheme = () => {
|
||||||
|
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // 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
|
||||||
|
};
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
--faq-item-text-color: #333; /* Text color for FAQ items */
|
--faq-item-text-color: #333; /* Text color for FAQ items */
|
||||||
--faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
|
--faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
|
||||||
|
|
||||||
--popup-background-color: #8B9635
|
--popup-background-color: #8B9635;
|
||||||
--pop-up-text: #000; /* Text color for pop-ups */
|
--pop-up-text: #000; /* Text color for pop-ups */
|
||||||
--input-border-color: #8B9635; /* Input border color */
|
--input-border-color: #8B9635; /* Input border color */
|
||||||
--font-family: 'Poppins', 'sans-serif';/* Default font family */
|
--font-family: 'Poppins', 'sans-serif';/* Default font family */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue