From 30136b44c7a5d9db288090657974a7e382ea12e7 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:26:34 +1000 Subject: [PATCH 01/31] remove a few themes --- src/lib/theme.ts | 35 ++++------------------------------- 1 file changed, 4 insertions(+), 31 deletions(-) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 5d863576..8e87d343 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -1,13 +1,8 @@ export const themes = [ - { value: 'shadcn-zinc-light', label: 'Shadcn Zinc Light' }, - { value: 'shadcn-zinc-dark', label: 'Shadcn Zinc Dark' }, - { value: 'black', label: 'Black' }, - { value: 'catppuccin-latte', label: 'Catppuccin Latte' }, - { value: 'catppuccin-frappe', label: 'Catppuccin Frappe' }, - { value: 'catppuccin-macchiato', label: 'Catppuccin Macchiato' }, - { value: 'catppuccin-mocha', label: 'Catppuccin Mocha' }, - { value: 'gruvbox-light', label: 'Gruvbox Light' }, - { value: 'gruvbox-dark', label: 'Gruvbox Dark' }, + { value: 'shadcn-zinc', label: 'Shadcn Zinc' }, + { value: 'black-white', label: 'Black & White' }, + { value: 'catppuccin-mocha', label: 'Catppuccin' }, + { value: 'gruvbox', label: 'Gruvbox' }, { value: 'solarised', label: 'Solarised' }, { value: 'github', label: 'GitHub' }, { value: 'terminal', label: 'Terminal' }, @@ -15,27 +10,5 @@ export const themes = [ { value: 'material-green', label: 'Material Green' }, { value: 'material-blue', label: 'Material Blue' }, { value: 'material-yellow', label: 'Material Yellow' }, - { value: 'shadcn-slate-light', label: 'Shadcn Slate Light' }, - { value: 'shadcn-slate-dark', label: 'Shadcn Slate Dark' }, - { value: 'shadcn-stone-light', label: 'Shadcn Stone Light' }, - { value: 'shadcn-stone-dark', label: 'Shadcn Stone Dark' }, - { value: 'shadcn-gray-light', label: 'Shadcn Gray Light' }, - { value: 'shadcn-gray-dark', label: 'Shadcn Gray Dark' }, - { value: 'shadcn-neutral-light', label: 'Shadcn Neutral Light' }, - { value: 'shadcn-neutral-dark', label: 'Shadcn Neutral Dark' }, - { value: 'shadcn-red-light', label: 'Shadcn Red Light' }, - { value: 'shadcn-red-dark', label: 'Shadcn Red Dark' }, - { value: 'shadcn-rose-light', label: 'Shadcn Rose Light' }, - { value: 'shadcn-rose-dark', label: 'Shadcn Rose Dark' }, - { value: 'shadcn-orange-light', label: 'Shadcn Orange Light' }, - { value: 'shadcn-orange-dark', label: 'Shadcn Orange Dark' }, - { value: 'shadcn-green-light', label: 'Shadcn Green Light' }, - { value: 'shadcn-green-dark', label: 'Shadcn Green Dark' }, - { value: 'shadcn-blue-light', label: 'Shadcn Blue Light' }, - { value: 'shadcn-blue-dark', label: 'Shadcn Blue Dark' }, - { value: 'shadcn-yellow-light', label: 'Shadcn Yellow Light' }, - { value: 'shadcn-yellow-dark', label: 'Shadcn Yellow Dark' }, - { value: 'shadcn-violet-light', label: 'Shadcn Violet Light' }, - { value: 'shadcn-violet-dark', label: 'Shadcn Violet Dark' }, { value: 'google-classroom', label: 'Google Classroom :)' } ]; From 0d776668bdb784a847ccf8a673e6ea80e174c7cb Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:28:10 +1000 Subject: [PATCH 02/31] change default theme --- src/lib/stores.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/stores.ts b/src/lib/stores.ts index 6304ec03..9112d074 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -3,7 +3,7 @@ import { persisted } from 'svelte-persisted-store'; export const preferencesStore = persisted('preferences', { experimentalFeatures: false, open: 'tab', - theme: 'shadcn-zinc-dark', + theme: 'shadcn-zinc', panic: { enabled: false, key: '`', From 89d9e61a52323267f6f1b649e750855fcf123eed Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:29:18 +1000 Subject: [PATCH 03/31] add vercel --- src/lib/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 8e87d343..3a19330e 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -5,6 +5,7 @@ export const themes = [ { value: 'gruvbox', label: 'Gruvbox' }, { value: 'solarised', label: 'Solarised' }, { value: 'github', label: 'GitHub' }, + { value: 'vercel', label: 'Vercel' }, { value: 'terminal', label: 'Terminal' }, { value: 'material-red', label: 'Material Red' }, { value: 'material-green', label: 'Material Green' }, From eac895f6e83145e6c59d5578a2c66901c857cab6 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:29:48 +1000 Subject: [PATCH 04/31] add theme --- src/lib/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 3a19330e..e69213ca 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -7,6 +7,7 @@ export const themes = [ { value: 'github', label: 'GitHub' }, { value: 'vercel', label: 'Vercel' }, { value: 'terminal', label: 'Terminal' }, + { value: 'cyberpunk', label: 'Cyberpunk' }, { value: 'material-red', label: 'Material Red' }, { value: 'material-green', label: 'Material Green' }, { value: 'material-blue', label: 'Material Blue' }, From eebc560a33e9d64c245eac12c5e7710db6697363 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:32:34 +1000 Subject: [PATCH 05/31] remove custom variant --- src/app.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app.css b/src/app.css index 257f6cc9..7d520d27 100644 --- a/src/app.css +++ b/src/app.css @@ -1,7 +1,6 @@ @import 'tailwindcss'; @source not "../static/_app"; @import 'tw-animate-css'; -@custom-variant dark (&:is(.dark *)); :root { --radius: 0.625rem; From 59cbbb86335466c719a25ad4dfd575f143e96e58 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:39:13 +1000 Subject: [PATCH 06/31] add themeing to css --- src/app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app.css b/src/app.css index 7d520d27..2994bd11 100644 --- a/src/app.css +++ b/src/app.css @@ -2,7 +2,7 @@ @source not "../static/_app"; @import 'tw-animate-css'; -:root { +html:has(#theme.shadcn-zinc) { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); @@ -37,7 +37,7 @@ --sidebar-ring: oklch(0.708 0 0); } -.dark { +html.dark:has(#theme.shadcn-zinc) { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); From c4d318c6f5efbb5b909672bfa04ed9aa988b3b14 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:41:08 +1000 Subject: [PATCH 07/31] implement theme --- src/app.css | 64 ++++++++++++++++++++++++++--------------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/app.css b/src/app.css index 2994bd11..c388b921 100644 --- a/src/app.css +++ b/src/app.css @@ -5,70 +5,70 @@ html:has(#theme.shadcn-zinc) { --radius: 0.625rem; --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); + --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); + --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); + --popover-foreground: oklch(0.141 0.005 285.823); + --primary: oklch(0.21 0.006 285.885); --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); + --secondary: oklch(0.967 0.001 286.375); + --secondary-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.967 0.001 286.375); + --muted-foreground: oklch(0.552 0.016 285.938); + --accent: oklch(0.967 0.001 286.375); + --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); + --border: oklch(0.92 0.004 286.32); + --input: oklch(0.92 0.004 286.32); + --ring: oklch(0.705 0.015 286.067); --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.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.141 0.005 285.823); + --sidebar-primary: oklch(0.21 0.006 285.885); --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); + --sidebar-accent: oklch(0.967 0.001 286.375); + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); + --sidebar-border: oklch(0.92 0.004 286.32); + --sidebar-ring: oklch(0.705 0.015 286.067); } html.dark:has(#theme.shadcn-zinc) { - --background: oklch(0.145 0 0); + --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); + --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); + --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); + --primary: oklch(0.92 0.004 286.32); + --primary-foreground: oklch(0.21 0.006 285.885); + --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); + --muted: oklch(0.274 0.006 286.033); + --muted-foreground: oklch(0.705 0.015 286.067); + --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); + --ring: oklch(0.552 0.016 285.938); --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.205 0 0); + --sidebar: oklch(0.21 0.006 285.885); --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: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --sidebar-ring: oklch(0.552 0.016 285.938); } @theme inline { From 3b2a306f2729c4690f85e64875e34be0f1d2e231 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:42:54 +1000 Subject: [PATCH 08/31] add vercel theme --- src/app.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/src/app.css b/src/app.css index c388b921..1b7635de 100644 --- a/src/app.css +++ b/src/app.css @@ -71,6 +71,100 @@ html.dark:has(#theme.shadcn-zinc) { --sidebar-ring: oklch(0.552 0.016 285.938); } +html:has(#theme.vercel) { + --background: #fcfcfc; + --foreground: #000000; + --card: #ffffff; + --card-foreground: #000000; + --popover: #fcfcfc; + --popover-foreground: #000000; + --primary: #000000; + --primary-foreground: #ffffff; + --secondary: #ebebeb; + --secondary-foreground: #000000; + --muted: #f5f5f5; + --muted-foreground: #525252; + --accent: #ebebeb; + --accent-foreground: #000000; + --destructive: #e54b4f; + --destructive-foreground: #ffffff; + --border: #e4e4e4; + --input: #ebebeb; + --ring: #000000; + --chart-1: #ffae04; + --chart-2: #2d62ef; + --chart-3: #a4a4a4; + --chart-4: #e4e4e4; + --chart-5: #747474; + --sidebar: #fcfcfc; + --sidebar-foreground: #000000; + --sidebar-primary: #000000; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #ebebeb; + --sidebar-accent-foreground: #000000; + --sidebar-border: #ebebeb; + --sidebar-ring: #000000; + --font-sans: Geist, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Geist Mono, monospace; + --radius: 0.5rem; + --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); + --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); + --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); + --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); +} + +html.dark:has(#theme.vercel) { + --background: #000000; + --foreground: #ffffff; + --card: #090909; + --card-foreground: #ffffff; + --popover: #121212; + --popover-foreground: #ffffff; + --primary: #ffffff; + --primary-foreground: #000000; + --secondary: #222222; + --secondary-foreground: #ffffff; + --muted: #1d1d1d; + --muted-foreground: #a4a4a4; + --accent: #333333; + --accent-foreground: #ffffff; + --destructive: #ff5b5b; + --destructive-foreground: #000000; + --border: #242424; + --input: #333333; + --ring: #a4a4a4; + --chart-1: #ffae04; + --chart-2: #2671f4; + --chart-3: #747474; + --chart-4: #525252; + --chart-5: #e4e4e4; + --sidebar: #121212; + --sidebar-foreground: #ffffff; + --sidebar-primary: #ffffff; + --sidebar-primary-foreground: #000000; + --sidebar-accent: #333333; + --sidebar-accent-foreground: #ffffff; + --sidebar-border: #333333; + --sidebar-ring: #a4a4a4; + --font-sans: Geist, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Geist Mono, monospace; + --radius: 0.5rem; + --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); + --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); + --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); + --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); +} + @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); From c376ec4a14ae54842aac2288d8b0369bba4e19f5 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 13:45:17 +1000 Subject: [PATCH 09/31] remove fonts and add black and white theme --- src/app.css | 93 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 87 insertions(+), 6 deletions(-) diff --git a/src/app.css b/src/app.css index 1b7635de..1581b953 100644 --- a/src/app.css +++ b/src/app.css @@ -70,7 +70,94 @@ html.dark:has(#theme.shadcn-zinc) { --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.552 0.016 285.938); } +html:has(#theme.black-white) { + --background: #ffffff; + --foreground: #000000; + --card: #ffffff; + --card-foreground: #000000; + --popover: #ffffff; + --popover-foreground: #000000; + --primary: #000000; + --primary-foreground: #ffffff; + --secondary: #000000; + --secondary-foreground: #ffffff; + --muted: #aaaaaa; + --muted-foreground: #000000; + --accent: #000000; + --accent-foreground: #ffffff; + --destructive: #000000; + --destructive-foreground: #ffffff; + --border: #aaaaaa; + --input: #ffffff; + --ring: #aaaaaa; + --chart-1: #000000; + --chart-2: #aaaaaa; + --chart-3: #ffffff; + --chart-4: #000000; + --chart-5: #aaaaaa; + --sidebar: #ffffff; + --sidebar-foreground: #000000; + --sidebar-primary: #000000; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #000000; + --sidebar-accent-foreground: #ffffff; + --sidebar-border: #aaaaaa; + --sidebar-ring: #aaaaaa; + --radius: 8px; + --shadow-2xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1); + --shadow-xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1); + --shadow-sm: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow-md: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2); + --shadow-lg: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2); + --shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2); + --shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.5); + --tracking-normal: 0px; +} +html.dark:has(#theme.black-white) { + --background: #000000; + --foreground: #ffffff; + --card: #000000; + --card-foreground: #ffffff; + --popover: #000000; + --popover-foreground: #ffffff; + --primary: #ffffff; + --primary-foreground: #000000; + --secondary: #ffffff; + --secondary-foreground: #000000; + --muted: #555555; + --muted-foreground: #ffffff; + --accent: #ffffff; + --accent-foreground: #000000; + --destructive: #ffffff; + --destructive-foreground: #000000; + --border: #444444; + --input: #000000; + --ring: #444444; + --chart-1: #ffffff; + --chart-2: #aaaaaa; + --chart-3: #000000; + --chart-4: #ffffff; + --chart-5: #aaaaaa; + --sidebar: #000000; + --sidebar-foreground: #ffffff; + --sidebar-primary: #ffffff; + --sidebar-primary-foreground: #000000; + --sidebar-accent: #ffffff; + --sidebar-accent-foreground: #000000; + --sidebar-border: #444444; + --sidebar-ring: #444444; + --radius: 8px; + --shadow-2xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1); + --shadow-xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.1); + --shadow-sm: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow-md: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2); + --shadow-lg: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2); + --shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2); + --shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.5); +} html:has(#theme.vercel) { --background: #fcfcfc; --foreground: #000000; @@ -104,9 +191,6 @@ html:has(#theme.vercel) { --sidebar-accent-foreground: #000000; --sidebar-border: #ebebeb; --sidebar-ring: #000000; - --font-sans: Geist, sans-serif; - --font-serif: Georgia, serif; - --font-mono: Geist Mono, monospace; --radius: 0.5rem; --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); @@ -151,9 +235,6 @@ html.dark:has(#theme.vercel) { --sidebar-accent-foreground: #ffffff; --sidebar-border: #333333; --sidebar-ring: #a4a4a4; - --font-sans: Geist, sans-serif; - --font-serif: Georgia, serif; - --font-mono: Geist Mono, monospace; --radius: 0.5rem; --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); From 8d199fa2d69509034c3bd84197b3db97374dc347 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:51:21 +1000 Subject: [PATCH 10/31] add toggle for dark/light --- src/app.css | 1 + src/lib/components/settings.svelte | 54 ++++++++++++++++++++---------- 2 files changed, 37 insertions(+), 18 deletions(-) diff --git a/src/app.css b/src/app.css index 1581b953..fbb83194 100644 --- a/src/app.css +++ b/src/app.css @@ -1,6 +1,7 @@ @import 'tailwindcss'; @source not "../static/_app"; @import 'tw-animate-css'; +@custom-variant dark (&:is(.dark *)); html:has(#theme.shadcn-zinc) { --radius: 0.625rem; diff --git a/src/lib/components/settings.svelte b/src/lib/components/settings.svelte index a5ee4a45..559f4a08 100644 --- a/src/lib/components/settings.svelte +++ b/src/lib/components/settings.svelte @@ -10,6 +10,10 @@ import * as Tabs from '$lib/components/ui/tabs/index.js'; import * as Alert from '$lib/components/ui/alert/index.js'; import CircleAlertIcon from '@lucide/svelte/icons/circle-alert'; + import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'; + import SunIcon from '@lucide/svelte/icons/sun'; + import MoonIcon from '@lucide/svelte/icons/moon'; + import { resetMode, mode, setMode, toggleMode } from 'mode-watcher'; import { settingsOpen } from '$lib/state.svelte'; import { preferencesStore, historyStore } from '$lib/stores'; @@ -41,24 +45,38 @@ Themes - - - {themeTriggerContent} - - - -
- - {#each themes as theme} -
- - -
- {/each} - -
- - +
+ + + {themeTriggerContent} + + + + +
+ + {#each themes as theme} +
+ + +
+ {/each} + +
+ + + +
Panic key (requires refresh to apply)
From 123ccdd51a63fae92da984a54af80d6ffda376d5 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:52:11 +1000 Subject: [PATCH 11/31] enable transitions --- src/routes/+layout.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3060db32..0e3e7e41 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -84,7 +84,7 @@ - + From 3a9b60302cce7dfe1a3d54e7a850af5b16f4b37a Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:53:44 +1000 Subject: [PATCH 12/31] add catppuccin --- src/app.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/src/app.css b/src/app.css index fbb83194..e9859c87 100644 --- a/src/app.css +++ b/src/app.css @@ -159,6 +159,101 @@ html.dark:has(#theme.black-white) { --shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2); --shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.5); } + +html:has(#theme.catppuccin) { + --background: #eff1f5; + --foreground: #4c4f69; + --card: #ffffff; + --card-foreground: #4c4f69; + --popover: #ccd0da; + --popover-foreground: #4c4f69; + --primary: #8839ef; + --primary-foreground: #ffffff; + --secondary: #ccd0da; + --secondary-foreground: #4c4f69; + --muted: #dce0e8; + --muted-foreground: #6c6f85; + --accent: #04a5e5; + --accent-foreground: #ffffff; + --destructive: #d20f39; + --destructive-foreground: #ffffff; + --border: #bcc0cc; + --input: #ccd0da; + --ring: #8839ef; + --chart-1: #8839ef; + --chart-2: #04a5e5; + --chart-3: #40a02b; + --chart-4: #fe640b; + --chart-5: #dc8a78; + --sidebar: #e6e9ef; + --sidebar-foreground: #4c4f69; + --sidebar-primary: #8839ef; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #04a5e5; + --sidebar-accent-foreground: #ffffff; + --sidebar-border: #bcc0cc; + --sidebar-ring: #8839ef; + --font-sans: Montserrat, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Fira Code, monospace; + --radius: 0.35rem; + --shadow-2xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06); + --shadow-xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06); + --shadow-sm: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); + --shadow: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); + --shadow-md: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12); + --shadow-lg: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12); + --shadow-xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12); + --shadow-2xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.3); +} + +html.dark:has(#theme.catppuccin) { + --background: #181825; + --foreground: #cdd6f4; + --card: #1e1e2e; + --card-foreground: #cdd6f4; + --popover: #45475a; + --popover-foreground: #cdd6f4; + --primary: #cba6f7; + --primary-foreground: #1e1e2e; + --secondary: #585b70; + --secondary-foreground: #cdd6f4; + --muted: #292c3c; + --muted-foreground: #a6adc8; + --accent: #89dceb; + --accent-foreground: #1e1e2e; + --destructive: #f38ba8; + --destructive-foreground: #1e1e2e; + --border: #313244; + --input: #313244; + --ring: #cba6f7; + --chart-1: #cba6f7; + --chart-2: #89dceb; + --chart-3: #a6e3a1; + --chart-4: #fab387; + --chart-5: #f5e0dc; + --sidebar: #11111b; + --sidebar-foreground: #cdd6f4; + --sidebar-primary: #cba6f7; + --sidebar-primary-foreground: #1e1e2e; + --sidebar-accent: #89dceb; + --sidebar-accent-foreground: #1e1e2e; + --sidebar-border: #45475a; + --sidebar-ring: #cba6f7; + --font-sans: Montserrat, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Fira Code, monospace; + --radius: 0.35rem; + --shadow-2xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06); + --shadow-xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06); + --shadow-sm: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); + --shadow: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); + --shadow-md: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12); + --shadow-lg: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12); + --shadow-xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12); + --shadow-2xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.3); +} + html:has(#theme.vercel) { --background: #fcfcfc; --foreground: #000000; From 8b37584413978b6e41defd2041e7501fbb8823ea Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:54:11 +1000 Subject: [PATCH 13/31] fix catppuccin --- src/lib/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index e69213ca..b7c05c09 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -1,7 +1,7 @@ export const themes = [ { value: 'shadcn-zinc', label: 'Shadcn Zinc' }, { value: 'black-white', label: 'Black & White' }, - { value: 'catppuccin-mocha', label: 'Catppuccin' }, + { value: 'catppuccin', label: 'Catppuccin' }, { value: 'gruvbox', label: 'Gruvbox' }, { value: 'solarised', label: 'Solarised' }, { value: 'github', label: 'GitHub' }, From 837a360d4e5253622b124269d943430737ef5ed7 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:56:08 +1000 Subject: [PATCH 14/31] add catppuccin darker --- src/app.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ src/lib/theme.ts | 1 + 2 files changed, 48 insertions(+) diff --git a/src/app.css b/src/app.css index e9859c87..53841a31 100644 --- a/src/app.css +++ b/src/app.css @@ -254,6 +254,53 @@ html.dark:has(#theme.catppuccin) { --shadow-2xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.3); } +html:has(#theme.catppuccin-darker) { + --background: #11111b; + --foreground: #cdd6f4; + --card: #1e1e2e; + --card-foreground: #cdd6f4; + --popover: #1e1e2e; + --popover-foreground: #cdd6f4; + --primary: #cba6f7; + --primary-foreground: #1e1e2e; + --secondary: #313244; + --secondary-foreground: #cdd6f4; + --muted: #313244; + --muted-foreground: #bac2de; + --accent: #313244; + --accent-foreground: #cdd6f4; + --destructive: #f38ba8; + --destructive-foreground: #181825; + --border: #45475a; + --input: #45475a; + --ring: #cdd6f4; + --chart-1: #f38ba8; + --chart-2: #94e2d5; + --chart-3: #89b4fa; + --chart-4: #f9e2af; + --chart-5: #a7e3a1; + --sidebar: #1e1e2e; + --sidebar-foreground: #cdd6f4; + --sidebar-primary: #cba6f7; + --sidebar-primary-foreground: #1e1e2e; + --sidebar-accent: #1e1e2e; + --sidebar-accent-foreground: #cdd6f4; + --sidebar-border: #45475a; + --sidebar-ring: #cba6f7; + --font-sans: Geist Mono, monospace; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: Geist Mono, monospace; + --radius: 0.9rem; + --shadow-2xs: 0px 4px 6px 0px hsl(0 0% 0% / 0.06); + --shadow-xs: 0px 4px 6px 0px hsl(0 0% 0% / 0.06); + --shadow-sm: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 1px 2px -1px hsl(0 0% 0% / 0.12); + --shadow: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 1px 2px -1px hsl(0 0% 0% / 0.12); + --shadow-md: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 2px 4px -1px hsl(0 0% 0% / 0.12); + --shadow-lg: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 4px 6px -1px hsl(0 0% 0% / 0.12); + --shadow-xl: 0px 4px 6px 0px hsl(0 0% 0% / 0.12), 0px 8px 10px -1px hsl(0 0% 0% / 0.12); + --shadow-2xl: 0px 4px 6px 0px hsl(0 0% 0% / 0.3); +} + html:has(#theme.vercel) { --background: #fcfcfc; --foreground: #000000; diff --git a/src/lib/theme.ts b/src/lib/theme.ts index b7c05c09..8290b15a 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -2,6 +2,7 @@ export const themes = [ { value: 'shadcn-zinc', label: 'Shadcn Zinc' }, { value: 'black-white', label: 'Black & White' }, { value: 'catppuccin', label: 'Catppuccin' }, + { value: 'catppuccin-darker', label: 'Catppuccin Darker' }, { value: 'gruvbox', label: 'Gruvbox' }, { value: 'solarised', label: 'Solarised' }, { value: 'github', label: 'GitHub' }, From 7079f668c1fb7487acdf8f5e073cab425a07ac1a Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:56:43 +1000 Subject: [PATCH 15/31] remove gruvbox --- src/lib/theme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 8290b15a..40e2149d 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -3,7 +3,6 @@ export const themes = [ { value: 'black-white', label: 'Black & White' }, { value: 'catppuccin', label: 'Catppuccin' }, { value: 'catppuccin-darker', label: 'Catppuccin Darker' }, - { value: 'gruvbox', label: 'Gruvbox' }, { value: 'solarised', label: 'Solarised' }, { value: 'github', label: 'GitHub' }, { value: 'vercel', label: 'Vercel' }, From 0bcd42857772cdbba4ebc57f8b1c9c2cfc9f6201 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:57:12 +1000 Subject: [PATCH 16/31] remove solarised --- src/lib/theme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 40e2149d..0fff6233 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -3,7 +3,6 @@ export const themes = [ { value: 'black-white', label: 'Black & White' }, { value: 'catppuccin', label: 'Catppuccin' }, { value: 'catppuccin-darker', label: 'Catppuccin Darker' }, - { value: 'solarised', label: 'Solarised' }, { value: 'github', label: 'GitHub' }, { value: 'vercel', label: 'Vercel' }, { value: 'terminal', label: 'Terminal' }, From 910d8604f1d0560ebe0b168e9c7390c0578c1943 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:58:18 +1000 Subject: [PATCH 17/31] remove github theme --- src/lib/theme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 0fff6233..0b28d071 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -3,7 +3,6 @@ export const themes = [ { value: 'black-white', label: 'Black & White' }, { value: 'catppuccin', label: 'Catppuccin' }, { value: 'catppuccin-darker', label: 'Catppuccin Darker' }, - { value: 'github', label: 'GitHub' }, { value: 'vercel', label: 'Vercel' }, { value: 'terminal', label: 'Terminal' }, { value: 'cyberpunk', label: 'Cyberpunk' }, From 3ef1ece9aade4a4a1d8df9815261a3b336a9aac0 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 15:59:56 +1000 Subject: [PATCH 18/31] add terminal theme --- src/app.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/src/app.css b/src/app.css index 53841a31..c8a433be 100644 --- a/src/app.css +++ b/src/app.css @@ -301,6 +301,53 @@ html:has(#theme.catppuccin-darker) { --shadow-2xl: 0px 4px 6px 0px hsl(0 0% 0% / 0.3); } +html:has(#theme.terminal) { + --background: #000000; + --foreground: #00ff00; + --card: #111111; + --card-foreground: #00ff00; + --popover: #222222; + --popover-foreground: #00ff00; + --primary: #008000; + --primary-foreground: #ffffff; + --secondary: #004000; + --secondary-foreground: #ffffff; + --muted: #333333; + --muted-foreground: #00ff00; + --accent: #00ff00; + --accent-foreground: #000000; + --destructive: #ff0000; + --destructive-foreground: #ffffff; + --border: #444444; + --input: #333333; + --ring: #00ff00; + --chart-1: #008000; + --chart-2: #004000; + --chart-3: #002000; + --chart-4: #000080; + --chart-5: #000040; + --sidebar: #111111; + --sidebar-foreground: #00ff00; + --sidebar-primary: #008000; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #00ff00; + --sidebar-accent-foreground: #000000; + --sidebar-border: #444444; + --sidebar-ring: #00ff00; + --font-sans: Inter; + --font-serif: Merriweather; + --font-mono: JetBrains Mono; + --radius: 8px; + --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1); + --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1); + --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2); + --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2); + --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2); + --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.5); +} + html:has(#theme.vercel) { --background: #fcfcfc; --foreground: #000000; From a86e703136701ac1702758edc5bd68b9b985ae3d Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:01:13 +1000 Subject: [PATCH 19/31] add cyberpunk theme --- src/app.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/src/app.css b/src/app.css index c8a433be..63f63cfb 100644 --- a/src/app.css +++ b/src/app.css @@ -348,6 +348,100 @@ html:has(#theme.terminal) { --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.5); } +html:has(#theme.cyberpunk) { + --background: #f8f9fa; + --foreground: #0c0c1d; + --card: #ffffff; + --card-foreground: #0c0c1d; + --popover: #ffffff; + --popover-foreground: #0c0c1d; + --primary: #ff00c8; + --primary-foreground: #ffffff; + --secondary: #f0f0ff; + --secondary-foreground: #0c0c1d; + --muted: #f0f0ff; + --muted-foreground: #0c0c1d; + --accent: #00ffcc; + --accent-foreground: #0c0c1d; + --destructive: #ff3d00; + --destructive-foreground: #ffffff; + --border: #dfe6e9; + --input: #dfe6e9; + --ring: #ff00c8; + --chart-1: #ff00c8; + --chart-2: #9000ff; + --chart-3: #00e5ff; + --chart-4: #00ffcc; + --chart-5: #ffe600; + --sidebar: #f0f0ff; + --sidebar-foreground: #0c0c1d; + --sidebar-primary: #ff00c8; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #00ffcc; + --sidebar-accent-foreground: #0c0c1d; + --sidebar-border: #dfe6e9; + --sidebar-ring: #ff00c8; + --font-sans: Outfit, sans-serif; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: Fira Code, monospace; + --radius: 0.5rem; + --shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); + --shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); + --shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); + --shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); + --shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1); + --shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1); + --shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1); + --shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25); +} + +html.dark:has(#theme.cyberpunk) { + --background: #0c0c1d; + --foreground: #eceff4; + --card: #1e1e3f; + --card-foreground: #eceff4; + --popover: #1e1e3f; + --popover-foreground: #eceff4; + --primary: #ff00c8; + --primary-foreground: #ffffff; + --secondary: #1e1e3f; + --secondary-foreground: #eceff4; + --muted: #1e1e3f; + --muted-foreground: #8085a6; + --accent: #00ffcc; + --accent-foreground: #0c0c1d; + --destructive: #ff3d00; + --destructive-foreground: #ffffff; + --border: #2e2e5e; + --input: #2e2e5e; + --ring: #ff00c8; + --chart-1: #ff00c8; + --chart-2: #9000ff; + --chart-3: #00e5ff; + --chart-4: #00ffcc; + --chart-5: #ffe600; + --sidebar: #0c0c1d; + --sidebar-foreground: #eceff4; + --sidebar-primary: #ff00c8; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #00ffcc; + --sidebar-accent-foreground: #0c0c1d; + --sidebar-border: #2e2e5e; + --sidebar-ring: #ff00c8; + --font-sans: Outfit, sans-serif; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: Fira Code, monospace; + --radius: 0.5rem; + --shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); + --shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05); + --shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); + --shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1); + --shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1); + --shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1); + --shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1); + --shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25); +} + html:has(#theme.vercel) { --background: #fcfcfc; --foreground: #000000; From 1f20b8ca67c33a3e2c056caf0b795c8dddc73f17 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:01:50 +1000 Subject: [PATCH 20/31] remove material themes --- src/lib/theme.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 0b28d071..d711ff9b 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -6,9 +6,5 @@ export const themes = [ { value: 'vercel', label: 'Vercel' }, { value: 'terminal', label: 'Terminal' }, { value: 'cyberpunk', label: 'Cyberpunk' }, - { value: 'material-red', label: 'Material Red' }, - { value: 'material-green', label: 'Material Green' }, - { value: 'material-blue', label: 'Material Blue' }, - { value: 'material-yellow', label: 'Material Yellow' }, { value: 'google-classroom', label: 'Google Classroom :)' } ]; From 8fb910eb825eede44c045ff6467397f6ad19d4f3 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:06:00 +1000 Subject: [PATCH 21/31] add google classroom theme --- src/app.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/src/app.css b/src/app.css index 63f63cfb..2d495dde 100644 --- a/src/app.css +++ b/src/app.css @@ -530,6 +530,54 @@ html.dark:has(#theme.vercel) { --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); } +html:has(#theme.google-classroom) { + --background: #ffffff; + --foreground: #000000; + --card: #f8fafd; + --card-foreground: #333333; + --popover: #f8fafd; + --popover-foreground: #333333; + --primary: #c2e7ff; + --primary-foreground: #333333; + --secondary: #dbe5f5; + --secondary-foreground: #333333; + --muted: #e5e5e5; + --muted-foreground: #666666; + --accent: #87ceeb; + --accent-foreground: #ffffff; + --destructive: #ff6666; + --destructive-foreground: #ffffff; + --border: #dddddd; + --input: #f8fafd; + --ring: #c2e7ff; + --chart-1: #c2e7ff; + --chart-2: #87ceeb; + --chart-3: #66cccc; + --chart-4: #44aaaa; + --chart-5: #22aaaa; + --sidebar: #f8fafd; + --sidebar-foreground: #333333; + --sidebar-primary: #c2e7ff; + --sidebar-primary-foreground: #333333; + --sidebar-accent: #87ceeb; + --sidebar-accent-foreground: #ffffff; + --sidebar-border: #dddddd; + --sidebar-ring: #c2e7ff; + --font-sans: Inter; + --font-serif: Merriweather; + --font-mono: Monaco; + --radius: 8px; + --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1); + --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1); + --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2); + --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2); + --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2); + --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2); + --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.5); + --tracking-normal: 0px; +} + @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); From f18733d3daef499947f0c2b0f2838e442ec2f3bb Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:06:12 +1000 Subject: [PATCH 22/31] rename --- src/lib/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/theme.ts b/src/lib/theme.ts index d711ff9b..28cd9156 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -6,5 +6,5 @@ export const themes = [ { value: 'vercel', label: 'Vercel' }, { value: 'terminal', label: 'Terminal' }, { value: 'cyberpunk', label: 'Cyberpunk' }, - { value: 'google-classroom', label: 'Google Classroom :)' } + { value: 'google-classroom', label: 'Kinda Google Classroom :)' } ]; From fe72137dfdbafa2c287f3dfe0b940895fbdb24ef Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:10:50 +1000 Subject: [PATCH 23/31] fix black and white theme --- src/app.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app.css b/src/app.css index 2d495dde..d833d88d 100644 --- a/src/app.css +++ b/src/app.css @@ -82,15 +82,15 @@ html:has(#theme.black-white) { --primary-foreground: #ffffff; --secondary: #000000; --secondary-foreground: #ffffff; - --muted: #aaaaaa; + --muted: #ffffff; --muted-foreground: #000000; --accent: #000000; --accent-foreground: #ffffff; --destructive: #000000; --destructive-foreground: #ffffff; --border: #aaaaaa; - --input: #ffffff; - --ring: #aaaaaa; + --input: #000000; + --ring: #000000; --chart-1: #000000; --chart-2: #aaaaaa; --chart-3: #ffffff; @@ -127,15 +127,15 @@ html.dark:has(#theme.black-white) { --primary-foreground: #000000; --secondary: #ffffff; --secondary-foreground: #000000; - --muted: #555555; + --muted: #000000; --muted-foreground: #ffffff; --accent: #ffffff; --accent-foreground: #000000; --destructive: #ffffff; --destructive-foreground: #000000; --border: #444444; - --input: #000000; - --ring: #444444; + --input: #ffffff; + --ring: #ffffff; --chart-1: #ffffff; --chart-2: #aaaaaa; --chart-3: #000000; From 55cb12addb171e067b050fd94a59adde121fc58b Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:11:13 +1000 Subject: [PATCH 24/31] inherit serach icon style --- src/lib/components/app-sidebar.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte index 78fb2a70..1e91e4d0 100644 --- a/src/lib/components/app-sidebar.svelte +++ b/src/lib/components/app-sidebar.svelte @@ -178,9 +178,7 @@ }} {...props} > -
+
From 0a48edc76b41c676b5839c9bd94936e65f380d68 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:11:19 +1000 Subject: [PATCH 25/31] delete space --- src/lib/components/app-sidebar.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte index 1e91e4d0..5573c23a 100644 --- a/src/lib/components/app-sidebar.svelte +++ b/src/lib/components/app-sidebar.svelte @@ -178,7 +178,7 @@ }} {...props} > -
+
From b832f74b4b348731d7a7883417fd95bf66f12043 Mon Sep 17 00:00:00 2001 From: Ingo Wolf Date: Tue, 17 Jun 2025 16:12:01 +1000 Subject: [PATCH 26/31] change animations --- src/lib/components/app-sidebar.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte index 5573c23a..b14143bd 100644 --- a/src/lib/components/app-sidebar.svelte +++ b/src/lib/components/app-sidebar.svelte @@ -144,7 +144,7 @@ - + {#snippet child({ props })} - + {#snippet child({ props })}