From 4cbfafdd7687acee69c975566698b6d558e31dcc Mon Sep 17 00:00:00 2001
From: illegitimate-egg <cameron@humaneyestudio.co.uk>
Date: Sun, 6 Apr 2025 13:04:52 +0100
Subject: [PATCH] Add cobalt theme

---
 web/i18n/en/settings.json        |  1 +
 web/src/app.html                 |  4 +++
 web/src/lib/types/settings/v2.ts |  2 +-
 web/src/routes/+layout.svelte    | 59 ++++++++++++++++++++++++++++++++
 4 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 418410bf..351105d1 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -15,6 +15,7 @@
     "theme.auto": "auto",
     "theme.light": "light",
     "theme.dark": "dark",
+    "theme.cobalt": "cobalt",
     "theme.description": "auto theme switches between light and dark themes depending on your device's display mode.",
 
     "video.quality": "video quality",
diff --git a/web/src/app.html b/web/src/app.html
index b60acb3c..edb3d746 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -37,6 +37,10 @@
                 background-color: white;
             }
 
+            #body-cobalt {
+                background-color: #14232d;
+            }
+
             @media (prefers-color-scheme: light) {
                 body {
                     background-color: white;
diff --git a/web/src/lib/types/settings/v2.ts b/web/src/lib/types/settings/v2.ts
index bed04cf1..b4794493 100644
--- a/web/src/lib/types/settings/v2.ts
+++ b/web/src/lib/types/settings/v2.ts
@@ -1,6 +1,6 @@
 import languages from "$i18n/languages.json";
 
-export const themeOptions = ["auto", "light", "dark"] as const;
+export const themeOptions = ["auto", "light", "dark", "cobalt"] as const;
 export const audioBitrateOptions = ["320", "256", "128", "96", "64", "8"] as const;
 export const audioFormatOptions = ["best", "mp3", "ogg", "wav", "opus"] as const;
 export const downloadModeOptions = ["auto", "audio", "mute"] as const;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 1400bc6d..2baf2de3 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -239,6 +239,65 @@
         );
     }
 
+    :global([data-theme="cobalt"]) {
+        --primary: #18354a;
+        --secondary: #d2d2d2;
+
+        --gray: #818181;
+
+        --blue: #2a7ce1;
+        --green: #37aa42;
+
+        --button: #14232d;
+        --button-hover: #24333d;
+        --button-active-hover: #f9f9f9;
+        --button-hover-transparent: rgba(225, 225, 225, 0.1);
+        --button-stroke: #24333d;
+        --button-text: #e1e1e1;
+        --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
+
+        --button-elevated: #282828;
+        --button-elevated-hover: #323232;
+
+        --popover-glow: rgba(135, 135, 135, 0.12);
+
+        --popup-bg: #191919;
+        --popup-stroke: rgba(255, 255, 255, 0.08);
+
+        --dialog-backdrop: rgba(0, 0, 0, 0.3);
+
+        --sidebar-bg: #14232d;
+        --sidebar-highlight: #f2f2f2;
+
+        --input-border: #14232d;
+
+        --toggle-bg: var(--input-border);
+        --toggle-bg-enabled: #8a8a8a;
+
+        --sidebar-mobile-gradient: linear-gradient(
+            90deg,
+            rgba(16, 16, 16, 0.9) 0%,
+            rgba(16, 16, 16, 0) 4%,
+            rgba(16, 16, 16, 0) 50%,
+            rgba(16, 16, 16, 0) 96%,
+            rgba(16, 16, 16, 0.9) 100%
+        );
+
+        --skeleton-gradient: linear-gradient(
+            90deg,
+            var(--button),
+            var(--button-hover),
+            var(--button)
+        );
+
+        --skeleton-gradient-elevated: linear-gradient(
+            90deg,
+            var(--button-elevated),
+            var(--button-elevated-hover),
+            var(--button-elevated)
+        );
+    }
+    
     :global([data-theme="light"] [data-reduce-transparency="true"]) {
         --dialog-backdrop: rgba(255, 255, 255, 0.6);
     }