From 48a49ce48d7a23708136cea30531218478fdbccf Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Tue, 10 Mar 2026 19:54:06 -0700
Subject: [PATCH] Add some new themes

---
 frontend/src/themes.css     | 213 ++++++++++++++++++++++++++++++++++++
 frontend/src/utils/theme.ts |  12 ++
 2 files changed, 225 insertions(+)

diff --git a/frontend/src/themes.css b/frontend/src/themes.css
index 9269903..1e7253c 100644
--- a/frontend/src/themes.css
+++ b/frontend/src/themes.css
@@ -483,3 +483,216 @@
 [data-theme='lagoon-pop'] ::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(180deg, hsl(175 52% 42%), hsl(229 52% 54%));
 }
+
+/* ── Candy Dusk ("Dream Arcade") ──────────────────────────── */
+:root[data-theme='candy-dusk'] {
+  --background: 258 38% 10%;
+  --foreground: 302 30% 93%;
+  --card: 258 30% 15%;
+  --card-foreground: 302 30% 93%;
+  --popover: 258 30% 16%;
+  --popover-foreground: 302 30% 93%;
+  --primary: 325 100% 74%;
+  --primary-foreground: 258 38% 12%;
+  --secondary: 255 24% 20%;
+  --secondary-foreground: 291 20% 85%;
+  --muted: 255 20% 18%;
+  --muted-foreground: 265 12% 66%;
+  --accent: 251 28% 24%;
+  --accent-foreground: 302 30% 93%;
+  --destructive: 9 88% 66%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 256 24% 28%;
+  --input: 256 24% 28%;
+  --ring: 325 100% 74%;
+  --radius: 1.25rem;
+  --msg-outgoing: 307 32% 20%;
+  --msg-incoming: 250 24% 18%;
+  --status-connected: 164 78% 58%;
+  --status-disconnected: 255 10% 48%;
+  --warning: 43 100% 63%;
+  --warning-foreground: 36 100% 12%;
+  --success: 164 78% 54%;
+  --success-foreground: 258 38% 12%;
+  --info: 191 90% 76%;
+  --info-foreground: 242 32% 18%;
+  --region-override: 278 100% 82%;
+  --favorite: 43 100% 66%;
+  --console: 191 90% 76%;
+  --console-command: 325 100% 82%;
+  --console-bg: 252 42% 8%;
+  --toast-error: 352 34% 16%;
+  --toast-error-foreground: 8 92% 82%;
+  --toast-error-border: 352 24% 26%;
+  --code-editor-bg: 255 28% 13%;
+  --font-sans: 'Nunito', 'Trebuchet MS', 'Segoe UI', sans-serif;
+  --scrollbar: 256 28% 24%;
+  --scrollbar-hover: 256 34% 32%;
+  --overlay: 258 40% 6%;
+}
+
+[data-theme='candy-dusk'] body {
+  background:
+    radial-gradient(circle at 20% 10%, hsl(325 100% 74% / 0.16), transparent 22%),
+    radial-gradient(circle at 85% 12%, hsl(191 90% 76% / 0.12), transparent 18%),
+    radial-gradient(circle at 50% 100%, hsl(43 100% 63% / 0.08), transparent 24%), hsl(258 38% 10%);
+}
+
+[data-theme='candy-dusk'] .bg-card {
+  background: linear-gradient(160deg, hsl(258 30% 16%), hsl(248 28% 18%));
+  box-shadow: inset 0 1px 0 hsl(302 50% 96% / 0.04);
+}
+
+[data-theme='candy-dusk'] .bg-popover {
+  background: linear-gradient(160deg, hsl(258 30% 17%), hsl(248 28% 19%));
+}
+
+[data-theme='candy-dusk'] .bg-msg-outgoing {
+  background: linear-gradient(135deg, hsl(307 34% 21%), hsl(325 28% 24%));
+  border-left: 2px solid hsl(325 100% 74% / 0.55);
+}
+
+[data-theme='candy-dusk'] .bg-msg-incoming {
+  background: linear-gradient(135deg, hsl(250 24% 18%), hsl(258 20% 20%));
+  border-left: 2px solid hsl(191 90% 76% / 0.38);
+}
+
+[data-theme='candy-dusk'] .bg-primary {
+  background: linear-gradient(135deg, hsl(325 100% 74%), hsl(289 84% 74%));
+}
+
+[data-theme='candy-dusk'] button {
+  border-radius: 999px;
+  transition:
+    transform 0.12s ease,
+    filter 0.2s ease,
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+[data-theme='candy-dusk'] button:hover {
+  filter: drop-shadow(0 0 10px hsl(325 100% 74% / 0.22))
+    drop-shadow(0 0 18px hsl(191 90% 76% / 0.08));
+}
+
+[data-theme='candy-dusk'] button:active {
+  transform: scale(0.98);
+}
+
+[data-theme='candy-dusk'] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, hsl(325 48% 44%), hsl(256 46% 42%));
+}
+
+[data-theme='candy-dusk'] ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, hsl(325 66% 58%), hsl(191 58% 56%));
+}
+
+/* ── Paper Grove ("Field Notes") ──────────────────────────── */
+:root[data-theme='paper-grove'] {
+  --background: 41 43% 93%;
+  --foreground: 148 16% 18%;
+  --card: 43 52% 97%;
+  --card-foreground: 148 16% 18%;
+  --popover: 43 52% 98%;
+  --popover-foreground: 148 16% 18%;
+  --primary: 157 54% 40%;
+  --primary-foreground: 45 60% 98%;
+  --secondary: 42 26% 87%;
+  --secondary-foreground: 148 14% 26%;
+  --muted: 42 22% 89%;
+  --muted-foreground: 148 10% 44%;
+  --accent: 36 42% 83%;
+  --accent-foreground: 148 16% 18%;
+  --destructive: 12 76% 58%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 38 22% 76%;
+  --input: 38 22% 76%;
+  --ring: 157 54% 40%;
+  --radius: 0.9rem;
+  --msg-outgoing: 151 32% 90%;
+  --msg-incoming: 40 30% 94%;
+  --status-connected: 157 54% 38%;
+  --status-disconnected: 148 8% 58%;
+  --warning: 39 92% 46%;
+  --warning-foreground: 39 100% 12%;
+  --success: 157 54% 34%;
+  --success-foreground: 45 60% 98%;
+  --info: 227 78% 64%;
+  --info-foreground: 228 40% 20%;
+  --region-override: 273 56% 44%;
+  --favorite: 43 92% 48%;
+  --console: 157 54% 34%;
+  --console-command: 224 48% 42%;
+  --console-bg: 45 24% 89%;
+  --toast-error: 8 52% 94%;
+  --toast-error-foreground: 9 58% 40%;
+  --toast-error-border: 10 34% 78%;
+  --code-editor-bg: 42 30% 90%;
+  --font-sans: 'Avenir Next', 'Segoe UI', sans-serif;
+  --scrollbar: 36 18% 68%;
+  --scrollbar-hover: 36 22% 58%;
+  --overlay: 148 20% 12%;
+}
+
+[data-theme='paper-grove'] body {
+  background:
+    linear-gradient(hsl(157 20% 50% / 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(157 20% 50% / 0.04) 1px, transparent 1px), hsl(41 43% 93%);
+  background-size:
+    32px 32px,
+    32px 32px,
+    auto;
+}
+
+[data-theme='paper-grove'] .bg-card {
+  background: linear-gradient(180deg, hsl(43 52% 98%), hsl(40 42% 95%));
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.8),
+    0 8px 22px hsl(148 18% 20% / 0.06);
+}
+
+[data-theme='paper-grove'] .bg-popover {
+  background: linear-gradient(180deg, hsl(43 52% 98%), hsl(40 38% 96%));
+}
+
+[data-theme='paper-grove'] .bg-msg-outgoing {
+  background: linear-gradient(135deg, hsl(151 34% 90%), hsl(157 30% 87%));
+  border-left: 2px solid hsl(157 54% 40% / 0.45);
+}
+
+[data-theme='paper-grove'] .bg-msg-incoming {
+  background: linear-gradient(135deg, hsl(40 30% 95%), hsl(38 26% 92%));
+  border-left: 2px solid hsl(227 78% 64% / 0.28);
+}
+
+[data-theme='paper-grove'] .bg-primary {
+  background: linear-gradient(135deg, hsl(157 54% 40%), hsl(180 42% 42%));
+}
+
+[data-theme='paper-grove'] button {
+  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.7);
+  transition:
+    transform 0.12s ease,
+    box-shadow 0.18s ease,
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+[data-theme='paper-grove'] button:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.8),
+    0 6px 14px hsl(148 20% 20% / 0.08);
+}
+
+[data-theme='paper-grove'] button:active {
+  transform: translateY(0);
+}
+
+[data-theme='paper-grove'] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, hsl(157 26% 54%), hsl(227 26% 60%));
+}
+
+[data-theme='paper-grove'] ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, hsl(157 34% 46%), hsl(227 34% 52%));
+}
diff --git a/frontend/src/utils/theme.ts b/frontend/src/utils/theme.ts
index 8055fe4..c5320e6 100644
--- a/frontend/src/utils/theme.ts
+++ b/frontend/src/utils/theme.ts
@@ -52,6 +52,18 @@ export const THEMES: Theme[] = [
     swatches: ['#081A22', '#0F2630', '#23D7C6', '#173844', '#FF7A66', '#7C83FF'],
     metaThemeColor: '#081A22',
   },
+  {
+    id: 'candy-dusk',
+    name: 'Candy Dusk',
+    swatches: ['#140F24', '#201736', '#FF79C9', '#2A2144', '#FFC857', '#8BE9FD'],
+    metaThemeColor: '#140F24',
+  },
+  {
+    id: 'paper-grove',
+    name: 'Paper Grove',
+    swatches: ['#F7F1E4', '#FFF9EE', '#2F9E74', '#E7DEC8', '#E76F51', '#5C7CFA'],
+    metaThemeColor: '#F7F1E4',
+  },
 ];
 
 const THEME_KEY = 'remoteterm-theme';