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

Setting changes #85

Merged
Patrick_Pluto merged 4 commits from sageTheDm/interstellar_ai:main into main 2024-10-02 12:19:46 +02:00
Conversation 0 Commits 4 Files changed 4 +326 -135
4 changed files with 326 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

76
app/components/settings/DropDownTheme.tsx
View file

@ -1,41 +1,41 @@
// ThemeDropdown.tsx // ThemeDropdown.tsx
import React from 'react'; import React from 'react';
import { applyTheme, applyCustomTheme } from './theme'; import { applyTheme, applyCustomTheme } from './theme';
const ThemeDropdown: React.FC<{ const ThemeDropdown: React.FC<{
selectedTheme: string; selectedTheme: string;
setSelectedTheme: (theme: string) => void; setSelectedTheme: (theme: string) => void;
}> = ({ selectedTheme, setSelectedTheme }) => { }> = ({ selectedTheme, setSelectedTheme }) => {
const themeOptions = [ const themeOptions = [
{ value: 'IOMARKET', label: 'IOMARKET' }, { value: 'IOMARKET', label: 'IOMARKET' },
{ value: 'WHITE', label: 'WHITE' }, { value: 'WHITE', label: 'WHITE' },
{ value: 'BLACK', label: 'BLACK' }, { value: 'BLACK', label: 'BLACK' },
{ value: 'CUSTOM', label: 'CUSTOM' }, { value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' },
]; { value: 'CUSTOM', label: 'CUSTOM' },
];
return ( return (
<div className="settings-option"> <div className="settings-option">
<p>Select Theme</p> <p>Select Theme</p>
<select <select
value={selectedTheme} value={selectedTheme}
onChange={(e) => { onChange={(e) => {
const theme = e.target.value; const theme = e.target.value;
if (theme !== 'default') { if (theme !== 'default') {
setSelectedTheme(theme); setSelectedTheme(theme);
localStorage.setItem('selectedTheme', theme); localStorage.setItem('selectedTheme', theme);
applyTheme(theme); // Ensure you define applyTheme }
} }}
}} >
> <option value="default">Select your style...</option>
<option value="default">Select your style...</option> {themeOptions.map((option) => (
{themeOptions.map((option) => ( <option key={option.value} value={option.value}>
<option key={option.value} value={option.value}> {option.label}
{option.label} </option>
</option> ))}
))} </select>
</select> </div>
</div> );
); };
};
export default ThemeDropdown; export default ThemeDropdown;

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

@ -92,6 +92,7 @@ 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 [burgerMenuBackgroundColor, setBurgerMenuBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-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 [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 [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
@ -100,7 +101,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-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 [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim()); const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());
const [closeButtonColor, setCloseButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-color').trim());
const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
// Theme selection // Theme selection
const [selectedTheme, setSelectedTheme] = useState<string>(''); const [selectedTheme, setSelectedTheme] = useState<string>('');
@ -161,6 +171,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
popupBackgroundColor, popupBackgroundColor,
overlayTextColor, overlayTextColor,
}, },
primaryColor,
secondaryColor,
accentColor,
basicBackgroundColor,
basicTextColor
}, },
apiKeys: { apiKeys: {
mistral, mistral,
@ -200,7 +215,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{ name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" }, { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" },
{ name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" }, { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" },
{ name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" }, { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" },
]; { name: "Close Button Color", value: closeButtonColor, setValue: setCloseButtonColor, cssVariable: "--close-button-color" },
{ name: "Close Button Hover Color", value: closeButtonHoverColor, setValue: setCloseButtonHoverColor, cssVariable: "--close-button-hover-color" },
{ name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
{ name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
{ name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
];
const timeZoneOptions = [ const timeZoneOptions = [
{ value: 'GMT', label: 'GMT' }, { value: 'GMT', label: 'GMT' },
@ -287,7 +308,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const savedTheme = localStorage.getItem('selectedTheme'); const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) { if (savedTheme) {
setSelectedTheme(savedTheme); setSelectedTheme(savedTheme);
applyTheme(savedTheme); applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
} }
}, []); // Runs only once when the component mounts }, []); // Runs only once when the component mounts
@ -453,48 +474,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
); );
case 'theme': case 'theme':
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Theme Settings</h2> <h2>Theme Settings</h2>
<ThemeDropdown <ThemeDropdown
selectedTheme={selectedTheme} selectedTheme={selectedTheme}
setSelectedTheme={setSelectedTheme} setSelectedTheme={setSelectedTheme}
/>
{selectedTheme === 'CUSTOM' && (
<>
{/* Font Size */}
<FontSizeSetting
fontSize={fontSize}
setFontSize={setFontSize}
/> />
{colorSettings.map((setting) => ( {selectedTheme === 'BASIC-CUSTOM' && (
<ColorSetting <>
key={setting.cssVariable} <h3>Basic Colors</h3>
name={setting.name} {/* Basic Color Inputs using ColorSetting Component */}
value={setting.value} <ColorSetting
setValue={setting.setValue} name="Primary Color"
cssVariable={setting.cssVariable} value={primaryColor}
/> setValue={setPrimaryColor}
))} cssVariable=""
/>
<ColorSetting
name="Secondary Color"
value={secondaryColor}
setValue={setSecondaryColor}
cssVariable=""
/>
<ColorSetting
name="Accent Color"
value={accentColor}
setValue={setAccentColor}
cssVariable=""
/>
<ColorSetting
name="Background Color"
value={basicBackgroundColor}
setValue={setBasicBackgroundColor}
cssVariable=""
/>
<ColorSetting
name="Text Color"
value={basicTextColor}
setValue={setBasicTextColor}
cssVariable=""
/>
</>
)}
<DropdownSetting {selectedTheme === 'CUSTOM' && (
label="Font Family" <>
value={fontFamily} <h3>Additional Settings</h3>
setValue={(newFont) => { {/* Additional Font Size Setting */}
setFontFamily(newFont); <FontSizeSetting
document.documentElement.style.setProperty('--font-family', newFont); fontSize={fontSize}
}} setFontSize={setFontSize}
options={fontOptions} />
/>
</>
)}
</div>
);
{colorSettings.map((setting) => (
<ColorSetting
key={setting.cssVariable}
name={setting.name}
value={setting.value}
setValue={setting.setValue}
cssVariable={setting.cssVariable}
/>
))}
<DropdownSetting
label="Font Family"
value={fontFamily}
setValue={(newFont) => {
setFontFamily(newFont);
document.documentElement.style.setProperty('--font-family', newFont);
}}
options={fontOptions}
/>
</>
)}
</div>
);
case 'foss': case 'foss':
return ( return (

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

@ -92,7 +92,7 @@ export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background
document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
@ -115,36 +115,46 @@ export const applyBlackTheme = () => {
export const applyCustomTheme = () => { export const applyCustomTheme = () => {
const themeVariables = { const themeVariables = {
backgroundColor: localStorage.getItem('backgroundColor'), backgroundColor: localStorage.getItem('backgroundColor'),
headerBackground: localStorage.getItem('headerBackground'), headerBackground: localStorage.getItem('headerBackground'),
textColor: localStorage.getItem('textColor'), headerTextColor: localStorage.getItem('headerTextColor'),
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'), textColor: localStorage.getItem('textColor'),
inputButtonColor: localStorage.getItem('inputButtonColor'), inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'), inputButtonColor: localStorage.getItem('inputButtonColor'),
userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'), inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
userMessageTextColor: localStorage.getItem('userMessageTextColor'), userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'), userMessageTextColor: localStorage.getItem('userMessageTextColor'),
aiMessageTextColor: localStorage.getItem('aiMessageTextColor'), aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'), aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'), buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'), buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
historyBackgroundColor: localStorage.getItem('historyBackgroundColor'), modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'), historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'), leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
faqHeadingColor: localStorage.getItem('faqHeadingColor'), docBackgroundColor: localStorage.getItem('docBackgroundColor'),
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), closeButtonColor: localStorage.getItem('closeButtonColor'),
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
faqItemTextColor: localStorage.getItem('faqItemTextColor'), applyButtonColor: localStorage.getItem('applyButtonColor'),
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
inputBorderColor: localStorage.getItem('inputBorderColor'), burgerMenu: localStorage.getItem('burgerMenu'),
fontFamily: localStorage.getItem('fontFamily'), overlayTextColor: localStorage.getItem('overlayTextColor'),
fontSize: localStorage.getItem('fontSize'), faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
burgerMenu: localStorage.getItem('burgerMenu'), faqHeadingColor: localStorage.getItem('faqHeadingColor'),
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
faqItemTextColor: localStorage.getItem('faqItemTextColor'),
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
popUpText: localStorage.getItem('popUpText'),
inputBorderColor: localStorage.getItem('inputBorderColor'),
fontFamily: localStorage.getItem('fontFamily'),
fontSize: localStorage.getItem('fontSize'),
}; };
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e'); document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
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');
@ -159,36 +169,136 @@ export const applyCustomTheme = () => {
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); };
// TypeScript types for color parameters
type Color = string;
export const applyBasicCustomTheme = (
primaryColor: Color,
secondaryColor: Color,
accentColor: Color,
backgroundColor: Color,
textColor: Color
) => {
// Calculate additional colors based on the provided colors
const headerBackgroundColor = secondaryColor; // Use secondary color for header background
const headerTextColor = lightenColor(textColor, 50); // Lighten text color for header
const inputButtonColor = primaryColor; // Use primary color for input buttons
const userMessageBackgroundColor = accentColor; // Use accent color for user messages
const aiMessageBackgroundColor = backgroundColor; // Use background color for AI messages
const buttonHoverBackgroundColor = darkenColor(primaryColor, 30); // Darken primary color for hover
const closeButtonColor = darkenColor(accentColor, 20); // Darkened accent color for close button
const closeButtonHoverColor = darkenColor(closeButtonColor, 10); // Darker close button hover color
const darkerAccentColor = darkenColor(accentColor, 20); // Darken accent color for contrast
const lightenedPrimaryColor = lightenColor(primaryColor, 10); // Lighten primary color for highlights
const lighterBackgroundColor = lightenColor(backgroundColor, 10); // Lighten background for contrast
const darkerBackgroundColor = darkenColor(backgroundColor, 20); // More pronounced dark background
// Set all CSS variables
document.documentElement.style.setProperty('--header-background-color', headerBackgroundColor);
document.documentElement.style.setProperty('--header-text-color', headerTextColor);
document.documentElement.style.setProperty('--background-color', backgroundColor);
document.documentElement.style.setProperty('--text-color', textColor);
document.documentElement.style.setProperty('--input-background-color', lightenColor(backgroundColor, 10));
document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
document.documentElement.style.setProperty('--input-button-hover-color', buttonHoverBackgroundColor);
document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
document.documentElement.style.setProperty('--user-message-text-color', lightenColor(textColor, 60));
document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
document.documentElement.style.setProperty('--ai-message-text-color', lightenColor(textColor, 60));
document.documentElement.style.setProperty('--button-background-color', inputButtonColor);
document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
document.documentElement.style.setProperty('--models-background-color', darkerBackgroundColor);
document.documentElement.style.setProperty('--history-background-color', lighterBackgroundColor);
document.documentElement.style.setProperty('--left-panel-background-color', lightenColor(backgroundColor, 5));
document.documentElement.style.setProperty('--conversation-background-color', lightenColor(backgroundColor, 5));
document.documentElement.style.setProperty('--doc-background-color', lighterBackgroundColor);
document.documentElement.style.setProperty('--close-button-color', closeButtonColor);
document.documentElement.style.setProperty('--close-button-hover-color', closeButtonHoverColor);
document.documentElement.style.setProperty('--apply-button-color', inputButtonColor);
document.documentElement.style.setProperty('--apply-button-hover-color', buttonHoverBackgroundColor);
document.documentElement.style.setProperty('--burger-menu-background-color', lightenColor(backgroundColor, 5));
document.documentElement.style.setProperty('--overlay-text-color', lightenColor(textColor, 80));
document.documentElement.style.setProperty('--faq-background-color', lightenColor(backgroundColor, 10));
document.documentElement.style.setProperty('--faq-heading-color', lightenedPrimaryColor);
document.documentElement.style.setProperty('--faq-item-background-color', darkerAccentColor);
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
document.documentElement.style.setProperty('--faq-item-text-color', '#000000');
document.documentElement.style.setProperty('--faq-item-hover-background-color', lightenColor(accentColor, 10));
document.documentElement.style.setProperty('--popup-background-color', accentColor);
document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
document.documentElement.style.setProperty('--input-border-color', primaryColor);
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--font-size', '16px');
};
// Helper function to darken a color (returns a darker version of the provided color)
const darkenColor = (color: Color, percent: number): Color => {
let r = parseInt(color.slice(1, 3), 16);
let g = parseInt(color.slice(3, 5), 16);
let b = parseInt(color.slice(5, 7), 16);
r = Math.floor(r * (1 - percent / 100));
g = Math.floor(g * (1 - percent / 100));
b = Math.floor(b * (1 - percent / 100));
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
};
// Helper function to lighten a color (returns a lighter version of the provided color)
const lightenColor = (color: Color, percent: number): Color => {
let r = parseInt(color.slice(1, 3), 16);
let g = parseInt(color.slice(3, 5), 16);
let b = parseInt(color.slice(5, 7), 16);
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}; };
// This is the new function that calls the appropriate theme application // This is the new function that calls the appropriate theme application
export const applyTheme = (theme: string) => { export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
switch (theme) { switch (theme) {
case 'IOMARKET': case 'IOMARKET':
applyIOMarketTheme(); applyIOMarketTheme();
break; break;
case 'WHITE': case 'WHITE':
applyWhiteTheme(); applyWhiteTheme();
break; break;
case 'BLACK': case 'BLACK':
applyBlackTheme(); applyBlackTheme();
break; break;
case 'CUSTOM': case 'CUSTOM':
applyCustomTheme(); applyCustomTheme();
break; break;
default: case 'BASIC-CUSTOM':
applyIOMarketTheme(); applyBasicCustomTheme(
break; primary,
secondary,
accent,
background,
text
);
break;
default:
applyIOMarketTheme();
break;
} }
}; };

29
app/page.tsx
View file

@ -7,9 +7,7 @@ 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/Settings'; import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/settings/theme'
import Head from 'next/head';
import './styles/master.css'; import './styles/master.css';
const LandingPage: React.FC = () => { const LandingPage: React.FC = () => {
@ -17,6 +15,22 @@ const LandingPage: React.FC = () => {
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
const conversationRef = useRef<HTMLDivElement>(null); const conversationRef = useRef<HTMLDivElement>(null);
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
useEffect(()=>{
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
})
const toggleDivs = () => { const toggleDivs = () => {
setShowDivs(prevState => !prevState); setShowDivs(prevState => !prevState);
}; };
@ -48,6 +62,15 @@ const LandingPage: React.FC = () => {
case 'CUSTOM': case 'CUSTOM':
applyCustomTheme(); applyCustomTheme();
break; break;
case 'BASIC-CUSTOM':
applyBasicCustomTheme(
primaryColor,
secondaryColor,
accentColor,
basicBackgroundColor,
basicTextColor
);
break;
default: default:
applyIOMarketTheme(); applyIOMarketTheme();
break; break;