sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Dear god have mercy

Browse source
This commit is contained in:
sageTheDM 2024-09-30 16:07:01 +02:00
parent 27b80b6c76
commit 1f35b83322
3 changed files with 757 additions and 453 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1075
app/components/Settings.tsx
View file

File diff suppressed because it is too large Load diff

62
app/components/theme.ts
View file

@ -92,5 +92,65 @@ export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border 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-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size 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 = () => {
// fix that later ouh fuck what have I done
/*
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'),
};
document.documentElement.style.setProperty('--header-background-color', themeVariables[header]); // 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
// Apply those settings
*/
}

29
app/page.tsx
View file

@ -7,6 +7,8 @@ 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';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme'
import Head from 'next/head'; import Head from 'next/head';
import './styles/master.css'; 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':
break;
default:
applyIOMarketTheme();
break;
}
}
}, []); // Runs only once when the component mounts
return ( return (
<> <>
<Header <Header