From 91abc93c102d0015bfce78ca87e6f6a785a086f6 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Wed, 1 Jul 2026 13:26:23 -0600
Subject: [PATCH] refactor(whitelabeling): update CSS variables to use oklch
 color format

Replaced existing color definitions in the whitelabeling settings with the oklch color format for improved color management and consistency. This change enhances the customization capabilities of the theme while maintaining compatibility with Tailwind CSS v4.

No functional changes were made to the application behavior.
---
 .../settings/web-server/update-server.tsx     |   4 +-
 .../settings/web-server/update-webserver.tsx  |   9 +-
 .../whitelabeling/whitelabeling-settings.tsx  | 122 ++++++++++--------
 3 files changed, 74 insertions(+), 61 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/web-server/update-server.tsx b/apps/dokploy/components/dashboard/settings/web-server/update-server.tsx
index f375e85fc..5c1ce5cbb 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/update-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/update-server.tsx
@@ -255,13 +255,13 @@ export const UpdateServer = ({
 					<ToggleAutoCheckUpdates disabled={isPending} />
 				</div>
 
-				<div className="space-y-4 flex items-center justify-end mt-4	">
+				<div className="flex items-center justify-end mt-4">
 					<div className="flex items-center gap-2">
 						<Button variant="outline" onClick={() => onOpenChange?.(false)}>
 							Cancel
 						</Button>
 						{isUpdateAvailable ? (
-							<UpdateWebServer />
+							<UpdateWebServer buttonClassName="w-auto" />
 						) : (
 							<Button
 								variant="secondary"
diff --git a/apps/dokploy/components/dashboard/settings/web-server/update-webserver.tsx b/apps/dokploy/components/dashboard/settings/web-server/update-webserver.tsx
index abeba47c4..d8a35d142 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/update-webserver.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/update-webserver.tsx
@@ -20,6 +20,7 @@ import {
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 
 type ServiceStatus = {
@@ -55,7 +56,11 @@ const ServiceStatusItem = ({
 	</div>
 );
 
-export const UpdateWebServer = () => {
+export const UpdateWebServer = ({
+	buttonClassName,
+}: {
+	buttonClassName?: string;
+}) => {
 	const [modalState, setModalState] = useState<ModalState>("idle");
 	const [open, setOpen] = useState(false);
 	const [healthResult, setHealthResult] = useState<HealthResult | null>(null);
@@ -136,7 +141,7 @@ export const UpdateWebServer = () => {
 		<AlertDialog open={open}>
 			<AlertDialogTrigger asChild>
 				<Button
-					className="relative w-full"
+					className={cn("relative w-full", buttonClassName)}
 					variant="secondary"
 					onClick={() => setOpen(true)}
 				>
diff --git a/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx b/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
index abbaca4a5..c20615109 100644
--- a/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
+++ b/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
@@ -56,50 +56,59 @@ type FormSchema = z.infer<typeof formSchema>;
 const DEFAULT_CSS_TEMPLATE = `/* ============================================
    Dokploy Default Theme - CSS Variables
    Modify these values to customize your instance.
+
+   Theme colors use the oklch() color format
+   (Tailwind CSS v4). You can use any valid CSS
+   color, e.g. oklch(0.6 0.2 250), #3b82f6 or
+   hsl(217 91% 60%).
+
+   Chart colors (--chart-*) are the exception:
+   they are still declared as raw HSL triples
+   (H S% L%) because they get wrapped in hsl(...)
+   where they are used.
    ============================================ */
 
 /* ---------- Light Mode ---------- */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
 
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
 
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
 
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
 
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
 
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
 
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
 
-  --destructive: 0 84.2% 50.2%;
-  --destructive-foreground: 0 0% 98%;
+  --destructive: oklch(0.577 0.245 27.325);
 
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 10% 3.9%;
-  --radius: 0.5rem;
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
 
   /* Sidebar */
-  --sidebar-background: 0 0% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 240 5.9% 10%;
-  --sidebar-primary-foreground: 0 0% 98%;
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 
-  /* Charts */
+  /* Charts (raw HSL triples: H S% L%) */
   --chart-1: 173 58% 39%;
   --chart-2: 12 76% 61%;
   --chart-3: 197 37% 24%;
@@ -109,45 +118,44 @@ const DEFAULT_CSS_TEMPLATE = `/* ============================================
 
 /* ---------- Dark Mode ---------- */
 .dark {
-  --background: 0 0% 0%;
-  --foreground: 0 0% 98%;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
 
-  --card: 240 4% 10%;
-  --card-foreground: 0 0% 98%;
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
 
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
 
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
 
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
 
-  --muted: 240 4% 10%;
-  --muted-foreground: 240 5% 64.9%;
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
 
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
 
-  --destructive: 0 84.2% 50.2%;
-  --destructive-foreground: 0 0% 98%;
+  --destructive: oklch(0.704 0.191 22.216);
 
-  --border: 240 3.7% 15.9%;
-  --input: 240 4% 10%;
-  --ring: 240 4.9% 83.9%;
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
 
   /* Sidebar */
-  --sidebar-background: 240 5.9% 10%;
-  --sidebar-foreground: 240 4.8% 95.9%;
-  --sidebar-primary: 224.3 76.3% 48%;
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 3.7% 15.9%;
-  --sidebar-accent-foreground: 240 4.8% 95.9%;
-  --sidebar-border: 240 3.7% 15.9%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 
-  /* Charts */
+  /* Charts (raw HSL triples: H S% L%) */
   --chart-1: 220 70% 50%;
   --chart-2: 340 75% 55%;
   --chart-3: 30 80% 55%;