From f044028b479edd18632257a567444dddb1de9825 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Mon, 30 Sep 2024 16:12:04 +0200
Subject: [PATCH] In the name of the lord i once have done it again... it
 finally works yay

---
 app/components/theme.ts | 73 +++++++++++++++++++++--------------------
 app/page.tsx            |  4 +--
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/app/components/theme.ts b/app/components/theme.ts
index bfd3d9a..b4f64e2 100644
--- a/app/components/theme.ts
+++ b/app/components/theme.ts
@@ -96,8 +96,7 @@ export const applyBlackTheme = () => {
 };
 
 export const applyCustomTheme = () => {
-    // fix that later ouh fuck what have I done
-    /* 
+    // Theme variables   
     const themeVariables = {
         backgroundColor: localStorage.getItem('backgroundColor'),
         textColor: localStorage.getItem('textColor'),
@@ -118,39 +117,41 @@ export const applyCustomTheme = () => {
         inputBorderColor: localStorage.getItem('inputBorderColor'),
         fontFamily: localStorage.getItem('fontFamily'),
         fontSize: localStorage.getItem('fontSize'),
-    };
+        burgerMenu: localStorage.getItem('burgerMenu'),
+        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'),
+        overlayTextColor: localStorage.getItem('overlayTextColor'),
+      };
+          
+      document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
+      document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
+      document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
+      document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
+      document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
+      document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
+      document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
+      document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
+      document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
+      document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
+      document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
+      document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
+      document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
+      document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
+      document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
+      document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
+      document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
+      document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
+      document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
+      document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
+      document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
+      document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
+      document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
     
-    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
- */
 }
diff --git a/app/page.tsx b/app/page.tsx
index 6bddf87..b2e6c90 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,7 +8,7 @@ import History from './components/History';
 import Models from './components/Models';
 import Credits from './components/Credits';
 import Settings from './components/Settings';
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme'
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
 import Head from 'next/head';
 import './styles/master.css';
 
@@ -46,7 +46,7 @@ const LandingPage: React.FC = () => {
             applyBlackTheme();
             break;
           case 'CUSTOM':
-            
+            applyCustomTheme();
             break;
           default:
             applyIOMarketTheme();