From c259c9617b77863fa4dda6e6520d7cababbab173 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 16 Apr 2024 20:19:07 -0400
Subject: [PATCH] Add color scheme setting to Settings -> Preferences

---
 app/scenes/Settings/Preferences.tsx        | 22 +++++++++++++++++++++-
 shared/i18n/locales/en_US/translation.json |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/scenes/Settings/Preferences.tsx b/app/scenes/Settings/Preferences.tsx
index 0755a6adb..075ecb3c3 100644
--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -5,6 +5,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { languageOptions } from "@shared/i18n";
 import { TeamPreference, UserPreference } from "@shared/types";
+import { Theme } from "~/stores/UiStore";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import InputSelect from "~/components/InputSelect";
@@ -19,7 +20,7 @@ import SettingRow from "./components/SettingRow";
 
 function Preferences() {
   const { t } = useTranslation();
-  const { dialogs } = useStores();
+  const { ui, dialogs } = useStores();
   const user = useCurrentUser();
   const team = useCurrentTeam();
 
@@ -82,6 +83,25 @@ function Preferences() {
           ariaLabel={t("Language")}
         />
       </SettingRow>
+      <SettingRow
+        name="theme"
+        label={t("Appearance")}
+        description={t("Choose your preferred interface color scheme.")}
+      >
+        <InputSelect
+          ariaLabel={t("Appearance")}
+          options={[
+            { label: t("Light"), value: Theme.Light },
+            { label: t("Dark"), value: Theme.Dark },
+            { label: t("System"), value: Theme.System },
+          ]}
+          value={ui.resolvedTheme}
+          onChange={(theme) => {
+            ui.setTheme(theme as Theme);
+            toast.success(t("Preferences saved"));
+          }}
+        />
+      </SettingRow>
       <SettingRow
         name={UserPreference.UseCursorPointer}
         label={t("Use pointer cursor")}
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index c5794bf9c..e4c8f1c22 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -898,6 +898,7 @@
   "Manage settings that affect your personal experience.": "Manage settings that affect your personal experience.",
   "Language": "Language",
   "Choose the interface language. Community translations are accepted though our <2>translation portal</2>.": "Choose the interface language. Community translations are accepted though our <2>translation portal</2>.",
+  "Choose your preferred interface color scheme.": "Choose your preferred interface color scheme.",
   "Use pointer cursor": "Use pointer cursor",
   "Show a hand cursor when hovering over interactive elements.": "Show a hand cursor when hovering over interactive elements.",
   "Show line numbers": "Show line numbers",