starred/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2025-12-16 17:23:24 +03:00
Code Issues 121 Packages Projects Releases 16 Wiki Activity

feat: new color theme for the UI

Browse Source
This commit is contained in:
Elias Schneider
2025-06-09 18:09:13 +02:00
parent 242d87a54b
commit 97f7326da4
2 changed files with 66 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/app.css
View File

@@ -20,67 +20,72 @@
} }
:root { :root {
--background: hsl(0 0% 100%); --radius: 0.625rem;
--foreground: hsl(240 10% 3.9%); --background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--muted: hsl(240 4.8% 95.9%); --card: oklch(1 0 0);
--muted-foreground: hsl(240 3.8% 46.1%); --card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover: hsl(0 0% 100%); --popover-foreground: oklch(0.145 0 0);
--popover-foreground: hsl(240 10% 3.9%); --primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--card: hsl(0 0% 100%); --secondary: oklch(0.97 0 0);
--card-foreground: hsl(240 10% 3.9%); --secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--border: hsl(240 5.9% 90%); --muted-foreground: oklch(0.556 0 0);
--input: hsl(240 5.9% 90%); --accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--primary: hsl(240 5.9% 10%); --destructive: oklch(0.577 0.245 27.325);
--primary-foreground: hsl(0 0% 98%); --border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--secondary: hsl(240 4.8% 95.9%); --ring: oklch(0.708 0 0);
--secondary-foreground: hsl(240 5.9% 10%); --chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--accent: hsl(240 4.8% 95.9%); --chart-3: oklch(0.398 0.07 227.392);
--accent-foreground: hsl(240 5.9% 10%); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--destructive: hsl(0 72.2% 50.6%); --sidebar: oklch(0.985 0 0);
--destructive-foreground: hsl(0 0% 98%); --sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--ring: hsl(240 10% 3.9%); --sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--radius: 0.5rem; --sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
} }
.dark { .dark {
--background: hsl(240 10% 3.9%); --background: oklch(0.145 0 0);
--foreground: hsl(0 0% 98%); --foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--muted: hsl(240 3.7% 15.9%); --card-foreground: oklch(0.985 0 0);
--muted-foreground: hsl(240 5% 64.9%); --popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--popover: hsl(240 10% 3.9%); --primary: oklch(0.922 0 0);
--popover-foreground: hsl(0 0% 98%); --primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--card: hsl(240 10% 3.9%); --secondary-foreground: oklch(0.985 0 0);
--card-foreground: hsl(0 0% 98%); --muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--border: hsl(240 3.7% 15.9%); --accent: oklch(0.269 0 0);
--input: hsl(240 3.7% 15.9%); --accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--primary: hsl(0 0% 98%); --border: oklch(1 0 0 / 10%);
--primary-foreground: hsl(240 5.9% 10%); --input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--secondary: hsl(240 3.7% 15.9%); --chart-1: oklch(0.488 0.243 264.376);
--secondary-foreground: hsl(0 0% 98%); --chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--accent: hsl(240 3.7% 15.9%); --chart-4: oklch(0.627 0.265 303.9);
--accent-foreground: hsl(0 0% 98%); --chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--destructive: hsl(0 62.8% 30.6%); --sidebar-foreground: oklch(0.985 0 0);
--destructive-foreground: hsl(0 0% 98%); --sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--ring: hsl(240 4.9% 83.9%); --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);
} }
@theme inline { @theme inline {

4
frontend/src/routes/settings/+layout.svelte
View File

@@ -39,7 +39,9 @@
</script> </script>
<section> <section>
<div class="bg-muted/40 flex min-h-[calc(100vh-64px)] w-full flex-col justify-between"> <div
class="bg-muted/40 dark:bg-background flex min-h-[calc(100vh-64px)] w-full flex-col justify-between"
>
<main <main
in:fade={{ duration: 200 }} in:fade={{ duration: 200 }}
class="mx-auto flex w-full max-w-[1640px] flex-col gap-x-8 gap-y-8 overflow-hidden p-4 md:p-8 lg:flex-row" class="mx-auto flex w-full max-w-[1640px] flex-col gap-x-8 gap-y-8 overflow-hidden p-4 md:p-8 lg:flex-row"