From c89703531c88e3c12eba5e7e8da8b3a896030f72 Mon Sep 17 00:00:00 2001
From: SamiAhmed7777 <tweet@sami-ahmed.net>
Date: Mon, 10 Mar 2025 01:20:20 -0700
Subject: [PATCH] feat: Add theme customizer plugin

---
 .../plugins/theme_customizer/__init__.py      |  34 ++++++
 .../components/ThemeCustomizer.svelte         | 109 ++++++++++++++++++
 .../theme_customizer/ThemeCustomizer.svelte   | 109 ++++++++++++++++++
 3 files changed, 252 insertions(+)
 create mode 100644 backend/open_webui/plugins/theme_customizer/__init__.py
 create mode 100644 backend/open_webui/plugins/theme_customizer/components/ThemeCustomizer.svelte
 create mode 100644 src/lib/plugins/theme_customizer/ThemeCustomizer.svelte

diff --git a/backend/open_webui/plugins/theme_customizer/__init__.py b/backend/open_webui/plugins/theme_customizer/__init__.py
new file mode 100644
index 000000000..45bddbe69
--- /dev/null
+++ b/backend/open_webui/plugins/theme_customizer/__init__.py
@@ -0,0 +1,34 @@
+from fastapi import FastAPI
+
+class ThemeCustomizerPlugin:
+    def __init__(self):
+        self.name = "theme_customizer"
+        self.description = "Theme customization plugin for OpenWebUI"
+        self.version = "1.0.0"
+        self.author = "SamiAhmed7777"
+
+    def setup(self) -> None:
+        """Setup any initial plugin state."""
+        pass
+
+    def register(self, app: FastAPI) -> None:
+        """Register the theme customizer plugin with OpenWebUI."""
+        # Register frontend components
+        if not hasattr(app.state, "plugin_components"):
+            app.state.plugin_components = {}
+        
+        # Theme Customization Component
+        app.state.plugin_components["theme_customizer"] = {
+            "name": "ThemeCustomizer",
+            "path": "/plugins/theme_customizer/components/ThemeCustomizer.svelte",
+            "settings": {
+                "section": "general",  # This will make it appear under General
+                "title": "Theme Customization",
+                "icon": "palette",
+                "description": "Customize colors, fonts, and appearance",
+                "order": 300  # This will place it after the general settings
+            }
+        }
+
+# Create plugin instance
+plugin = ThemeCustomizerPlugin() 
\ No newline at end of file
diff --git a/backend/open_webui/plugins/theme_customizer/components/ThemeCustomizer.svelte b/backend/open_webui/plugins/theme_customizer/components/ThemeCustomizer.svelte
new file mode 100644
index 000000000..36db4a634
--- /dev/null
+++ b/backend/open_webui/plugins/theme_customizer/components/ThemeCustomizer.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Button from '$lib/components/ui/button/Button.svelte';
+  import Input from '$lib/components/ui/input/Input.svelte';
+  import Label from '$lib/components/ui/label/Label.svelte';
+  import Card from '$lib/components/ui/card/Card.svelte';
+  import Select from '$lib/components/ui/select/Select.svelte';
+  import { toast } from '$lib/components/ui/toast';
+
+  let primaryColor = '#007AFF';
+  let secondaryColor = '#6B7280';
+  let backgroundColor = '#FFFFFF';
+  let textColor = '#000000';
+  let fontSize = '16px';
+  let currentFont = 'Inter';
+
+  let availableFonts = [
+    'Inter',
+    'Roboto',
+    'Open Sans',
+    'Montserrat',
+    'Lato'
+  ];
+
+  async function updateTheme() {
+    try {
+      document.documentElement.style.setProperty('--primary-color', primaryColor);
+      document.documentElement.style.setProperty('--secondary-color', secondaryColor);
+      document.documentElement.style.setProperty('--background-color', backgroundColor);
+      document.documentElement.style.setProperty('--text-color', textColor);
+      document.documentElement.style.setProperty('--font-size', fontSize);
+      document.documentElement.style.setProperty('--font-family', currentFont);
+
+      toast({
+        title: 'Success',
+        description: 'Theme updated successfully'
+      });
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: 'Failed to update theme',
+        variant: 'destructive'
+      });
+    }
+  }
+
+  onMount(() => {
+    // Load current theme values from CSS variables
+    primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || primaryColor;
+    secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim() || secondaryColor;
+    backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim() || backgroundColor;
+    textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim() || textColor;
+    fontSize = getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim() || fontSize;
+    currentFont = getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim() || currentFont;
+  });
+</script>
+
+<Card class="p-6">
+  <h2 class="text-2xl font-bold mb-4">Theme Customization</h2>
+  
+  <div class="space-y-4">
+    <div class="grid grid-cols-2 gap-4">
+      <div class="flex flex-col gap-2">
+        <Label>Primary Color</Label>
+        <Input type="color" bind:value={primaryColor} />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Label>Secondary Color</Label>
+        <Input type="color" bind:value={secondaryColor} />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Label>Background Color</Label>
+        <Input type="color" bind:value={backgroundColor} />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Label>Text Color</Label>
+        <Input type="color" bind:value={textColor} />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <Label>Font Size</Label>
+      <Input 
+        type="text" 
+        bind:value={fontSize}
+        placeholder="e.g., 16px, 1.2rem"
+      />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <Label>Font Family</Label>
+      <Select 
+        bind:value={currentFont}
+        options={availableFonts}
+      />
+    </div>
+
+    <Button 
+      variant="primary" 
+      class="w-full mt-4"
+      on:click={updateTheme}
+    >
+      Apply Theme
+    </Button>
+  </div>
+</Card> 
\ No newline at end of file
diff --git a/src/lib/plugins/theme_customizer/ThemeCustomizer.svelte b/src/lib/plugins/theme_customizer/ThemeCustomizer.svelte
new file mode 100644
index 000000000..36db4a634
--- /dev/null
+++ b/src/lib/plugins/theme_customizer/ThemeCustomizer.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Button from '$lib/components/ui/button/Button.svelte';
+  import Input from '$lib/components/ui/input/Input.svelte';
+  import Label from '$lib/components/ui/label/Label.svelte';
+  import Card from '$lib/components/ui/card/Card.svelte';
+  import Select from '$lib/components/ui/select/Select.svelte';
+  import { toast } from '$lib/components/ui/toast';
+
+  let primaryColor = '#007AFF';
+  let secondaryColor = '#6B7280';
+  let backgroundColor = '#FFFFFF';
+  let textColor = '#000000';
+  let fontSize = '16px';
+  let currentFont = 'Inter';
+
+  let availableFonts = [
+    'Inter',
+    'Roboto',
+    'Open Sans',
+    'Montserrat',
+    'Lato'
+  ];
+
+  async function updateTheme() {
+    try {
+      document.documentElement.style.setProperty('--primary-color', primaryColor);
+      document.documentElement.style.setProperty('--secondary-color', secondaryColor);
+      document.documentElement.style.setProperty('--background-color', backgroundColor);
+      document.documentElement.style.setProperty('--text-color', textColor);
+      document.documentElement.style.setProperty('--font-size', fontSize);
+      document.documentElement.style.setProperty('--font-family', currentFont);
+
+      toast({
+        title: 'Success',
+        description: 'Theme updated successfully'
+      });
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: 'Failed to update theme',
+        variant: 'destructive'
+      });
+    }
+  }
+
+  onMount(() => {
+    // Load current theme values from CSS variables
+    primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || primaryColor;
+    secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim() || secondaryColor;
+    backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim() || backgroundColor;
+    textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim() || textColor;
+    fontSize = getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim() || fontSize;
+    currentFont = getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim() || currentFont;
+  });
+</script>
+
+<Card class="p-6">
+  <h2 class="text-2xl font-bold mb-4">Theme Customization</h2>
+  
+  <div class="space-y-4">
+    <div class="grid grid-cols-2 gap-4">
+      <div class="flex flex-col gap-2">
+        <Label>Primary Color</Label>
+        <Input type="color" bind:value={primaryColor} />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Label>Secondary Color</Label>
+        <Input type="color" bind:value={secondaryColor} />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Label>Background Color</Label>
+        <Input type="color" bind:value={backgroundColor} />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Label>Text Color</Label>
+        <Input type="color" bind:value={textColor} />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <Label>Font Size</Label>
+      <Input 
+        type="text" 
+        bind:value={fontSize}
+        placeholder="e.g., 16px, 1.2rem"
+      />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <Label>Font Family</Label>
+      <Select 
+        bind:value={currentFont}
+        options={availableFonts}
+      />
+    </div>
+
+    <Button 
+      variant="primary" 
+      class="w-full mt-4"
+      on:click={updateTheme}
+    >
+      Apply Theme
+    </Button>
+  </div>
+</Card> 
\ No newline at end of file