From 19a9014f6179c5fc30803e549339be3bf3ed7ab2 Mon Sep 17 00:00:00 2001 From: Eduard Schulteis Date: Thu, 12 Feb 2026 13:12:15 +0100 Subject: [PATCH] Change dark and light theme like ubuntu --- app/globals.css | 168 ++++++++++++++++++++++++++++++------------------ 1 file changed, 105 insertions(+), 63 deletions(-) diff --git a/app/globals.css b/app/globals.css index aa56095..dbf7b6f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -44,72 +44,114 @@ } :root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.129 0.042 264.695); - --card: oklch(1 0 0); - --card-foreground: oklch(0.129 0.042 264.695); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.129 0.042 264.695); - --primary: oklch(0.208 0.042 265.755); - --primary-foreground: oklch(0.984 0.003 247.858); - --secondary: oklch(0.968 0.007 247.896); - --secondary-foreground: oklch(0.208 0.042 265.755); - --muted: oklch(0.968 0.007 247.896); - --muted-foreground: oklch(0.554 0.046 257.417); - --accent: oklch(0.968 0.007 247.896); - --accent-foreground: oklch(0.208 0.042 265.755); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.929 0.013 255.508); - --input: oklch(0.929 0.013 255.508); - --ring: oklch(0.704 0.04 256.788); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.984 0.003 247.858); - --sidebar-foreground: oklch(0.129 0.042 264.695); - --sidebar-primary: oklch(0.208 0.042 265.755); - --sidebar-primary-foreground: oklch(0.984 0.003 247.858); - --sidebar-accent: oklch(0.968 0.007 247.896); - --sidebar-accent-foreground: oklch(0.208 0.042 265.755); - --sidebar-border: oklch(0.929 0.013 255.508); - --sidebar-ring: oklch(0.704 0.04 256.788); + --radius: 0.125rem; + /* ---------- Base background (warm light) ---------- */ + --background: oklch(0.97 0.01 95); + --foreground: oklch(0.22 0.02 30); + + /* ---------- Surfaces ---------- */ + --card: oklch(0.99 0.005 95); + --card-foreground: oklch(0.22 0.02 30); + + --popover: oklch(1 0.004 95); + --popover-foreground: oklch(0.22 0.02 30); + + /* ---------- Ubuntu orange primary ---------- */ + --primary: oklch(0.62 0.2 45); + --primary-foreground: oklch(0.99 0.005 95); + + /* ---------- Secondary / muted warm grays ---------- */ + --secondary: oklch(0.92 0.01 90); + --secondary-foreground: oklch(0.3 0.02 35); + + --muted: oklch(0.94 0.008 90); + --muted-foreground: oklch(0.45 0.015 35); + + --accent: oklch(0.9 0.015 85); + --accent-foreground: oklch(0.3 0.02 35); + + /* ---------- Destructive ---------- */ + --destructive: oklch(0.58 0.23 25); + + /* ---------- Borders / inputs ---------- */ + --border: oklch(0.85 0.01 90); + --input: oklch(0.88 0.01 90); + --ring: oklch(0.62 0.2 45 / 0.5); + + /* ---------- Charts ---------- */ + --chart-1: oklch(0.62 0.2 45); /* orange */ + --chart-2: oklch(0.55 0.16 150); /* green */ + --chart-3: oklch(0.7 0.17 85); /* yellow */ + --chart-4: oklch(0.6 0.18 300); /* purple */ + --chart-5: oklch(0.6 0.2 20); /* red */ + + /* ---------- Sidebar ---------- */ + --sidebar: oklch(0.95 0.01 90); + --sidebar-foreground: oklch(0.28 0.02 30); + + --sidebar-primary: oklch(0.62 0.2 45); + --sidebar-primary-foreground: oklch(0.99 0.005 95); + + --sidebar-accent: oklch(0.9 0.015 85); + --sidebar-accent-foreground: oklch(0.3 0.02 35); + + --sidebar-border: oklch(0.85 0.01 90); + --sidebar-ring: oklch(0.62 0.2 45 / 0.5); } .dark { - --background: oklch(0.129 0.042 264.695); - --foreground: oklch(0.984 0.003 247.858); - --card: oklch(0.208 0.042 265.755); - --card-foreground: oklch(0.984 0.003 247.858); - --popover: oklch(0.208 0.042 265.755); - --popover-foreground: oklch(0.984 0.003 247.858); - --primary: oklch(0.929 0.013 255.508); - --primary-foreground: oklch(0.208 0.042 265.755); - --secondary: oklch(0.279 0.041 260.031); - --secondary-foreground: oklch(0.984 0.003 247.858); - --muted: oklch(0.279 0.041 260.031); - --muted-foreground: oklch(0.704 0.04 256.788); - --accent: oklch(0.279 0.041 260.031); - --accent-foreground: oklch(0.984 0.003 247.858); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.551 0.027 264.364); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.208 0.042 265.755); - --sidebar-foreground: oklch(0.984 0.003 247.858); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.984 0.003 247.858); - --sidebar-accent: oklch(0.279 0.041 260.031); - --sidebar-accent-foreground: oklch(0.984 0.003 247.858); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.551 0.027 264.364); + /* ---------- Base background (warm charcoal) ---------- */ + --background: oklch(0.11 0.015 30); + --foreground: oklch(0.97 0.01 95); + + /* ---------- Surfaces ---------- */ + --card: oklch(0.16 0.018 32); + --card-foreground: oklch(0.97 0.01 95); + + --popover: oklch(0.18 0.02 32); + --popover-foreground: oklch(0.97 0.01 95); + + /* ---------- Ubuntu orange primary ---------- */ + --primary: oklch(0.68 0.19 45); + --primary-foreground: oklch(0.98 0.01 95); + + /* ---------- Secondary / muted warm grays ---------- */ + --secondary: oklch(0.22 0.02 30); + --secondary-foreground: oklch(0.92 0.015 95); + + --muted: oklch(0.22 0.02 30); + --muted-foreground: oklch(0.68 0.02 90); + + --accent: oklch(0.26 0.025 35); + --accent-foreground: oklch(0.95 0.01 95); + + /* ---------- Destructive (Ubuntu red tone) ---------- */ + --destructive: oklch(0.62 0.22 25); + + /* ---------- Borders / inputs ---------- */ + --border: oklch(0.3 0.015 35 / 0.6); + --input: oklch(0.3 0.015 35 / 0.8); + --ring: oklch(0.68 0.19 45 / 0.6); + + /* ---------- Charts ---------- */ + --chart-1: oklch(0.68 0.19 45); /* orange */ + --chart-2: oklch(0.7 0.15 150); /* green */ + --chart-3: oklch(0.78 0.16 85); /* yellow */ + --chart-4: oklch(0.66 0.18 300); /* purple */ + --chart-5: oklch(0.7 0.18 20); /* red */ + + /* ---------- Sidebar (slightly darker & warmer) ---------- */ + --sidebar: oklch(0.14 0.018 30); + --sidebar-foreground: oklch(0.95 0.01 95); + + --sidebar-primary: oklch(0.68 0.19 45); + --sidebar-primary-foreground: oklch(0.98 0.01 95); + + --sidebar-accent: oklch(0.24 0.02 32); + --sidebar-accent-foreground: oklch(0.95 0.01 95); + + --sidebar-border: oklch(0.3 0.015 35 / 0.5); + --sidebar-ring: oklch(0.68 0.19 45 / 0.6); } /* === CUSTOM COLOR THEME === */