From 3788411d3aa39839c3f82d5a60e1e0543e30ca6c Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Wed, 2 Oct 2024 09:14:07 +0200 Subject: [PATCH] Fixed darkmode --- app/components/settings/theme.ts | 114 +++++++++++++++---------------- 1 file changed, 57 insertions(+), 57 deletions(-) diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts index e88ca18..7c96a52 100644 --- a/app/components/settings/theme.ts +++ b/app/components/settings/theme.ts @@ -92,7 +92,7 @@ export const applyBlackTheme = () => { document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container - document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background + document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color @@ -113,63 +113,63 @@ export const applyBlackTheme = () => { }; -export const applyCustomTheme = () => { - const themeVariables = { - backgroundColor: localStorage.getItem('backgroundColor'), - headerBackground: localStorage.getItem('headerBackground'), - 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'), - faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), - faqHeadingColor: localStorage.getItem('faqHeadingColor'), - faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), - faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), - faqItemTextColor: localStorage.getItem('faqItemTextColor'), - faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), - inputBorderColor: localStorage.getItem('inputBorderColor'), - fontFamily: localStorage.getItem('fontFamily'), - fontSize: localStorage.getItem('fontSize'), - burgerMenu: localStorage.getItem('burgerMenu'), - }; + export const applyCustomTheme = () => { + const themeVariables = { + backgroundColor: localStorage.getItem('backgroundColor'), + headerBackground: localStorage.getItem('headerBackground'), + 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'), + faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), + faqHeadingColor: localStorage.getItem('faqHeadingColor'), + faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), + faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), + faqItemTextColor: localStorage.getItem('faqItemTextColor'), + faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), + inputBorderColor: localStorage.getItem('inputBorderColor'), + fontFamily: localStorage.getItem('fontFamily'), + fontSize: localStorage.getItem('fontSize'), + burgerMenu: localStorage.getItem('burgerMenu'), + }; - document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); - document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e'); - 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('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); - document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); - document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); - 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 || '#5a5a5a'); - 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('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); -}; + document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); + document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e'); + 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('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); + document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); + document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); + 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 || '#5a5a5a'); + 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('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); + }; // This is the new function that calls the appropriate theme application export const applyTheme = (theme: string) => {