Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-07-02 04:25:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(whitelabeling): update CSS variables to use oklch color format

Browse Source 
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.
This commit is contained in:
Mauricio Siu
2026-07-01 13:26:23 -06:00
parent f5ded8b273
commit 91abc93c10
3 changed files with 74 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/dokploy/components/dashboard/settings/web-server/update-server.tsx
View File

@@ -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"

9
apps/dokploy/components/dashboard/settings/web-server/update-webserver.tsx
View File

@@ -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)}
>

122
apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
View File

@@ -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%;