fix ssr
This commit is contained in:
parent
2e67f911c1
commit
0f610d3c18
11 changed files with 408 additions and 288 deletions
|
|
@ -114,80 +114,82 @@ export const applyBlackTheme = () => {
|
|||
};
|
||||
|
||||
export const applyCustomTheme = () => {
|
||||
const themeVariables = {
|
||||
backgroundColor: localStorage.getItem('backgroundColor'),
|
||||
headerBackground: localStorage.getItem('headerBackground'),
|
||||
headerTextColor: localStorage.getItem('headerTextColor'),
|
||||
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'),
|
||||
docBackgroundColor: localStorage.getItem('docBackgroundColor'),
|
||||
closeButtonColor: localStorage.getItem('closeButtonColor'),
|
||||
closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
|
||||
applyButtonColor: localStorage.getItem('applyButtonColor'),
|
||||
applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
|
||||
burgerMenu: localStorage.getItem('burgerMenu'),
|
||||
overlayTextColor: localStorage.getItem('overlayTextColor'),
|
||||
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'),
|
||||
popUpText: localStorage.getItem('popUpText'),
|
||||
inputBorderColor: localStorage.getItem('inputBorderColor'),
|
||||
fontFamily: localStorage.getItem('fontFamily'),
|
||||
fontSize: localStorage.getItem('fontSize'),
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const themeVariables = {
|
||||
backgroundColor: localStorage.getItem('backgroundColor'),
|
||||
headerBackground: localStorage.getItem('headerBackground'),
|
||||
headerTextColor: localStorage.getItem('headerTextColor'),
|
||||
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'),
|
||||
docBackgroundColor: localStorage.getItem('docBackgroundColor'),
|
||||
closeButtonColor: localStorage.getItem('closeButtonColor'),
|
||||
closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
|
||||
applyButtonColor: localStorage.getItem('applyButtonColor'),
|
||||
applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
|
||||
burgerMenu: localStorage.getItem('burgerMenu'),
|
||||
overlayTextColor: localStorage.getItem('overlayTextColor'),
|
||||
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'),
|
||||
popUpText: localStorage.getItem('popUpText'),
|
||||
inputBorderColor: localStorage.getItem('inputBorderColor'),
|
||||
fontFamily: localStorage.getItem('fontFamily'),
|
||||
fontSize: localStorage.getItem('fontSize'),
|
||||
};
|
||||
|
||||
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('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
|
||||
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
|
||||
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
|
||||
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
|
||||
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
|
||||
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
|
||||
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('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
|
||||
document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
|
||||
document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
|
||||
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-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
|
||||
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('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
|
||||
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
|
||||
};
|
||||
|
||||
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('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
|
||||
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
|
||||
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
|
||||
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
|
||||
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
|
||||
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
|
||||
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('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
|
||||
document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
|
||||
document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
|
||||
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-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
|
||||
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('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
|
||||
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
|
||||
};
|
||||
}
|
||||
|
||||
// TypeScript types for color parameters
|
||||
type Color = string;
|
||||
|
|
@ -247,8 +249,10 @@ export const applyBasicCustomTheme = (
|
|||
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', localStorage.getItem("fontFamily") || "'Poppins', 'sans-serif'");
|
||||
document.documentElement.style.setProperty('--font-size', localStorage.getItem("fontSize") || '16px');
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
document.documentElement.style.setProperty('--font-family', localStorage.getItem("fontFamily") || "'Poppins', 'sans-serif'");
|
||||
document.documentElement.style.setProperty('--font-size', localStorage.getItem("fontSize") || '16px');
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to darken a color (returns a darker version of the provided color)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue