main #72
3 changed files with 758 additions and 453 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -92,5 +92,66 @@ export const applyBlackTheme = () => {
|
|||
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
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
|
||||
};
|
||||
|
||||
export const applyCustomTheme = () => {
|
||||
// Theme variables
|
||||
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'),
|
||||
burgerMenu: localStorage.getItem('burgerMenu'),
|
||||
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
|
||||
faqHeadingColor: localStorage.getItem('faqHeadingColor'),
|
||||
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
|
||||
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
|
||||
faqItemTextColor: localStorage.getItem('faqItemTextColor'),
|
||||
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
|
||||
popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
|
||||
overlayTextColor: localStorage.getItem('overlayTextColor'),
|
||||
};
|
||||
|
||||
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
|
||||
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
|
||||
|
||||
}
|
||||
|
|
|
|||
29
app/page.tsx
29
app/page.tsx
|
|
@ -7,6 +7,8 @@ import Documentation from './components/Documentation'; // Ensure the import pat
|
|||
import History from './components/History';
|
||||
import Models from './components/Models';
|
||||
import Credits from './components/Credits';
|
||||
import Settings from './components/Settings';
|
||||
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
|
||||
import Head from 'next/head';
|
||||
import './styles/master.css';
|
||||
|
||||
|
|
@ -26,6 +28,33 @@ 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':
|
||||
applyCustomTheme();
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, []); // Runs only once when the component mounts
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
|
|
|
|||
Loading…
Reference in a new issue