This commit is contained in:
YasinOnm08 2024-10-07 11:16:51 +02:00
parent 2e67f911c1
commit 0f610d3c18
11 changed files with 408 additions and 288 deletions

View file

@ -15,20 +15,22 @@ const LandingPage: React.FC = () => {
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
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");
const [primaryColor, setPrimaryColor] = useState("#fefefe");
const [secondaryColor, setSecondaryColor] = useState("#fefefe");
const [accentColor, setAccentColor] = useState("#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe");
const [basicTextColor, setBasicTextColor] = useState("#fefefe");
// Synchronize state with local storage on mount
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");
}, []);
if (typeof localStorage !== 'undefined') {
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");
}
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);
const toggleDivs = () => {
setShowDivs(prevState => !prevState);
@ -43,33 +45,35 @@ const LandingPage: React.FC = () => {
// Apply theme based on selectedTheme and color settings
useEffect(() => {
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) {
switch (savedTheme) {
case 'IOMARKET':
applyIOMarketTheme();
break;
case 'WHITE':
applyWhiteTheme();
break;
case 'BLACK':
applyBlackTheme();
break;
case 'CUSTOM':
applyCustomTheme();
break;
case 'BASIC-CUSTOM':
applyBasicCustomTheme(
primaryColor,
secondaryColor,
accentColor,
basicBackgroundColor,
basicTextColor
);
break;
default:
applyIOMarketTheme();
break;
if (typeof localStorage !== 'undefined') {
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) {
switch (savedTheme) {
case 'IOMARKET':
applyIOMarketTheme();
break;
case 'WHITE':
applyWhiteTheme();
break;
case 'BLACK':
applyBlackTheme();
break;
case 'CUSTOM':
applyCustomTheme();
break;
case 'BASIC-CUSTOM':
applyBasicCustomTheme(
primaryColor,
secondaryColor,
accentColor,
basicBackgroundColor,
basicTextColor
);
break;
default:
applyIOMarketTheme();
break;
}
}
}
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly