156 lines
14 KiB
TypeScript
156 lines
14 KiB
TypeScript
// 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
|
|
};
|
|
|
|
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
|
|
*/
|
|
}
|