From 694aecf6247eb1ff332c5255ac5a19783868830a Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Fri, 27 Sep 2024 15:01:50 -0700
Subject: [PATCH] add settings toggle for this feature

---
 web/i18n/en/settings.json                     |  4 ++
 web/src/components/sidebar/Sidebar.svelte     | 12 ++++--
 web/src/lib/settings/defaults.ts              |  5 ++-
 web/src/lib/types/settings.ts                 |  5 ++-
 web/src/routes/+layout.svelte                 | 40 ++++++++++++-------
 .../routes/settings/appearance/+page.svelte   | 13 ++++++
 6 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index fba788e2..d99535c5 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -17,6 +17,10 @@
     "theme.dark": "dark",
     "theme.description": "auto theme switches between light and dark themes depending on your device's display mode.",
 
+    "sidebar": "sidebar",
+    "sidebar.dark.title": "dark sidebar",
+    "sidebar.dark.description": "by default, the sidebar will be dark in light theme. if you'd prefer it to match the light theme, enable this option.",
+
     "video.quality": "video quality",
     "video.quality.max": "8k+",
     "video.quality.2160": "4k",
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index ca3a963e..20a6f507 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
     import { defaultNavPage } from "$lib/subnav";
+    import settings from "$lib/state/settings";
 
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
@@ -19,13 +20,17 @@
     let aboutLink = defaultNavPage("about");
 
     $: screenWidth,
-       settingsLink = defaultNavPage("settings"),
-       aboutLink = defaultNavPage("about");
+        (settingsLink = defaultNavPage("settings")),
+        (aboutLink = defaultNavPage("about"));
 </script>
 
 <svelte:window bind:innerWidth={screenWidth} />
 
-<nav id="sidebar" aria-label={$t("a11y.tabs.tab_panel")}>
+<nav
+    id="sidebar"
+    aria-label={$t("a11y.tabs.tab_panel")}
+    class:always-dark={$settings.appearance.darkSidebar}
+>
     <CobaltLogo />
     <div id="sidebar-tabs" role="tablist">
         <div id="sidebar-actions" class="sidebar-inner-container">
@@ -66,6 +71,7 @@
         height: 100vh;
         width: calc(var(--sidebar-width) + var(--sidebar-inner-padding) * 2);
         position: sticky;
+        color: var(--sidebar-text);
     }
 
     #sidebar-tabs {
diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts
index c0b0c187..e31b680b 100644
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@@ -7,11 +7,12 @@ const defaultSettings: CobaltSettings = {
         debug: false,
     },
     appearance: {
-        theme: "auto",
-        language: defaultLocale,
         autoLanguage: true,
+        darkSidebar: true,
+        language: defaultLocale,
         reduceMotion: false,
         reduceTransparency: false,
+        theme: "auto",
     },
     save: {
         audioBitrate: "128",
diff --git a/web/src/lib/types/settings.ts b/web/src/lib/types/settings.ts
index 3c9cef6e..d761d245 100644
--- a/web/src/lib/types/settings.ts
+++ b/web/src/lib/types/settings.ts
@@ -11,11 +11,12 @@ export const youtubeVideoCodecOptions = ["h264", "av1", "vp9"] as const;
 export const savingMethodOptions = ["ask", "download", "share", "copy"] as const;
 
 type CobaltSettingsAppearance = {
-    theme: typeof themeOptions[number],
-    language: keyof typeof languages,
     autoLanguage: boolean,
+    darkSidebar: boolean,
+    language: keyof typeof languages,
     reduceMotion: boolean,
     reduceTransparency: boolean,
+    theme: typeof themeOptions[number],
 };
 
 type CobaltSettingsAdvanced = {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 83d80e30..9410d085 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -34,7 +34,7 @@
 
     $: spawnTurnstile = !!$cachedInfo?.info?.cobalt?.turnstileSitekey;
 
-    afterNavigate(async() => {
+    afterNavigate(async () => {
         const to_focus: HTMLElement | null =
             document.querySelector("[data-first-focus]");
         to_focus?.focus();
@@ -46,11 +46,14 @@
 </script>
 
 <svelte:head>
-    <meta name="description" content={$t("general.embed.description")}>
-    <meta property="og:description" content={$t("general.embed.description")}>
+    <meta name="description" content={$t("general.embed.description")} />
+    <meta property="og:description" content={$t("general.embed.description")} />
 
     {#if env.HOST}
-        <meta property="og:url" content="https://{env.HOST}{$page.url.pathname}">
+        <meta
+            property="og:url"
+            content="https://{env.HOST}{$page.url.pathname}"
+        />
     {/if}
 
     {#if device.is.mobile}
@@ -67,7 +70,11 @@
     {/if}
 </svelte:head>
 
-<div style="display: contents" data-theme={browser ? $currentTheme : undefined} lang={$locale}>
+<div
+    style="display: contents"
+    data-theme={browser ? $currentTheme : undefined}
+    lang={$locale}
+>
     <div
         id="cobalt"
         class:loaded={browser}
@@ -123,9 +130,9 @@
         --dialog-backdrop: rgba(255, 255, 255, 0.3);
 
         --sidebar-bg: #f4f4f4;
-        --sidebar-text: var(--secondary);
-        --sidebar-highlight: var(--secondary);
-        --sidebar-highlight-text: var(--primary);
+        --sidebar-text: #101010;
+        --sidebar-highlight: #101010;
+        --sidebar-highlight-text: var(--sidebar-bg);
         --sidebar-hover: rgba(0, 0, 0, 0.1);
 
         --input-border: #adadb7;
@@ -174,7 +181,7 @@
         );
     }
 
-    :global([data-theme="dark"]) {
+    :global([data-theme="dark"]){
         --primary: #000000;
         --secondary: #e1e1e1;
 
@@ -199,12 +206,6 @@
 
         --dialog-backdrop: rgba(0, 0, 0, 0.3);
 
-        --sidebar-bg: #101010;
-        --sidebar-text: var(--secondary);
-        --sidebar-highlight: var(--secondary);
-        --sidebar-highlight-text: var(--sidebar-bg);
-        --sidebar-hover: rgba(255, 255, 255, 0.1);
-
         --input-border: #383838;
 
         --toggle-bg: var(--input-border);
@@ -234,6 +235,15 @@
         );
     }
 
+    :global([data-theme="dark"]),
+    :global(#sidebar.always-dark) {
+        --sidebar-bg: #101010;
+        --sidebar-text: #f4f4f4;
+        --sidebar-highlight: #f4f4f4;
+        --sidebar-highlight-text: var(--sidebar-bg);
+        --sidebar-hover: rgba(255, 255, 255, 0.1);
+    }
+
     :global([data-theme="light"] [data-reduce-transparency="true"]) {
         --dialog-backdrop: rgba(255, 255, 255, 0.6);
     }
diff --git a/web/src/routes/settings/appearance/+page.svelte b/web/src/routes/settings/appearance/+page.svelte
index b1067be5..1ab66f2a 100644
--- a/web/src/routes/settings/appearance/+page.svelte
+++ b/web/src/routes/settings/appearance/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
 
+    import settings from "$lib/state/settings";
+
     import { themeOptions } from "$lib/types/settings";
 
     import Switcher from "$components/buttons/Switcher.svelte";
@@ -24,6 +26,17 @@
     </Switcher>
 </SettingsCategory>
 
+{#if $settings.appearance.theme === "light"}
+    <SettingsCategory sectionId="sidebar" title={$t("settings.sidebar")}>
+        <SettingsToggle
+            settingContext="appearance"
+            settingId="darkSidebar"
+            title={$t("settings.sidebar.dark.title")}
+            description={$t("settings.sidebar.dark.description")}
+        />
+    </SettingsCategory>
+{/if}
+
 <SettingsCategory sectionId="language" title={$t("settings.language")}>
     <SettingsToggle
         settingContext="appearance"