feat: add support for custom themes

client/app/app.css

@@ -139,6 +139,13 @@ input[type="text"]:focus {
   outline: none;
   border: 1px solid var(--color-fg-tertiary);
 }
+textarea {
+  border: 1px solid var(--color-bg);
+}
+textarea:focus {
+  outline: none;
+  border: 1px solid var(--color-fg-tertiary);
+}
 input[type="password"] {
   border: 1px solid var(--color-bg);
 }

client/app/components/modals/SettingsModal.tsx

@@ -19,7 +19,7 @@ export default function SettingsModal({ open, setOpen } : Props) {
     const contentClasses = "w-full px-2 mt-8 sm:mt-0 sm:px-10 overflow-y-auto"
 
     return (
-        <Modal h={600} isOpen={open} onClose={() => setOpen(false)} maxW={900}>
+        <Modal h={700} isOpen={open} onClose={() => setOpen(false)} maxW={900}>
             <Tabs
                 defaultValue="Appearance"
                 orientation="vertical" // still vertical, but layout is responsive via Tailwind

client/app/components/themeSwitcher/ThemeSwitcher.tsx

@@ -1,11 +1,45 @@
 // ThemeSwitcher.tsx
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 import themes from '~/styles/themes.css';
 import ThemeOption from './ThemeOption';
+import { AsyncButton } from '../AsyncButton';
 
 export function ThemeSwitcher() {
     const { theme, setTheme } = useTheme();
+        const initialTheme = {
+            bg: "#1e1816",
+            bgSecondary: "#2f2623",
+            bgTertiary: "#453733",
+            fg: "#f8f3ec",
+            fgSecondary: "#d6ccc2",
+            fgTertiary: "#b4a89c",
+            primary: "#f5a97f",
+            primaryDim: "#d88b65",
+            accent: "#f9db6d",
+            accentDim: "#d9bc55",
+            error: "#e26c6a",
+            warning: "#f5b851",
+            success: "#8fc48f",
+            info: "#87b8dd",
+        }
+    
+        const { setCustomTheme, getCustomTheme } = useTheme()
+        const [custom, setCustom] = useState(JSON.stringify(getCustomTheme() ?? initialTheme, null, "  "))
+    
+        const handleCustomTheme = () => {
+            console.log(custom)
+            try {
+                const theme = JSON.parse(custom)
+                theme.name = "custom"
+                setCustomTheme(theme)
+                delete theme.name
+                setCustom(JSON.stringify(theme, null, "  "))
+                console.log(theme)
+            } catch(err) {
+                console.log(err)
+            }
+        }
 
     useEffect(() => {
         if (theme) {
@@ -14,13 +48,22 @@ export function ThemeSwitcher() {
     }, [theme]);
 
     return (
-        <>
+        <div className='flex flex-col gap-10'>
-        <h2>Select Theme</h2>
+            <div>
-        <div className="grid grid-cols-2 items-center gap-2">
+                <h2>Select Theme</h2>
-            {themes.map((t) => (
+                <div className="grid grid-cols-2 items-center gap-2">
-                <ThemeOption setTheme={setTheme} key={t.name} theme={t} />
+                    {themes.map((t) => (
-            ))}
+                        <ThemeOption setTheme={setTheme} key={t.name} theme={t} />
+                    ))}
+                </div>
+            </div>
+            <div>
+                <h2>Use Custom Theme</h2>
+                <div className="flex flex-col items-center gap-3 bg-secondary p-5 rounded-lg">
+                    <textarea name="custom-theme" onChange={(e) => setCustom(e.target.value)} id="custom-theme-input" className="bg-(--color-bg) h-[450px] w-[300px] p-5 rounded-md" value={custom} /> 
+                    <AsyncButton onClick={handleCustomTheme}>Submit</AsyncButton>
+                </div>
+            </div>
         </div>
-        </>
     );
 }

client/app/providers/ThemeProvider.tsx

@@ -1,11 +1,12 @@
 import { createContext, useEffect, useState, useCallback, type ReactNode } from 'react';
-import { themes, type Theme } from '~/styles/themes.css';
+import { type Theme } from '~/styles/themes.css';
 import { themeVars } from '~/styles/vars.css';
 
 interface ThemeContextValue {
     theme: string;
     setTheme: (theme: string) => void;
     setCustomTheme: (theme: Theme) => void;
+    getCustomTheme: () => Theme | undefined;
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
@@ -47,6 +48,19 @@ export function ThemeProvider({
         setTheme('custom');
     }, []);
 
+    const getCustomTheme = (): Theme | undefined => { 
+        const themeStr = localStorage.getItem('custom-theme');
+        if (!themeStr) {
+            return undefined
+        }
+        try {
+            let theme = JSON.parse(themeStr) as Theme
+            return theme
+        } catch (err) {
+            return undefined 
+        }
+    }
+
     useEffect(() => {
         const root = document.documentElement;
 
@@ -63,15 +77,16 @@ export function ThemeProvider({
                 } catch (err) {
                     console.error('Invalid custom theme in localStorage', err);
                 }
+            } else {
+                setTheme('yuu')
             }
         } else {
             clearCustomThemeVars()
         }
     }, [theme]);
-    
 
     return (
-        <ThemeContext.Provider value={{ theme, setTheme, setCustomTheme }}>
+        <ThemeContext.Provider value={{ theme, setTheme, setCustomTheme, getCustomTheme }}>
             {children}
         </ThemeContext.Provider>
     );