Add color scheme setting to Settings -> Preferences

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")}

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",