From e79e90549da341579a76e952763382b9771d4ed3 Mon Sep 17 00:00:00 2001
From: Michael Huynh <43751307+miqh@users.noreply.github.com>
Date: Mon, 16 Oct 2023 22:05:01 +0800
Subject: [PATCH] Add user-friendly theme option labels (#1796) (#1797)

---
 .../src/components/settings/Themes.tsx             |  4 ++--
 packages/desktop-client/src/style/theme.tsx        | 14 +++++++++-----
 upcoming-release-notes/1797.md                     |  6 ++++++
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 upcoming-release-notes/1797.md

diff --git a/packages/desktop-client/src/components/settings/Themes.tsx b/packages/desktop-client/src/components/settings/Themes.tsx
index 485a54e5b57..4db980d7936 100644
--- a/packages/desktop-client/src/components/settings/Themes.tsx
+++ b/packages/desktop-client/src/components/settings/Themes.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useActions } from '../../hooks/useActions';
-import { themeNames, useTheme } from '../../style';
+import { themeOptions, useTheme } from '../../style';
 import Button from '../common/Button';
 import Select from '../common/Select';
 import Text from '../common/Text';
@@ -21,7 +21,7 @@ export default function ThemeSettings() {
               saveGlobalPrefs({ theme: value });
             }}
             value={theme}
-            options={themeNames.map(name => [name, name])}
+            options={themeOptions}
           />
         </Button>
       }
diff --git a/packages/desktop-client/src/style/theme.tsx b/packages/desktop-client/src/style/theme.tsx
index e1465f0a96c..49d87451fea 100644
--- a/packages/desktop-client/src/style/theme.tsx
+++ b/packages/desktop-client/src/style/theme.tsx
@@ -8,12 +8,16 @@ import * as developmentTheme from './themes/development';
 import * as lightTheme from './themes/light';
 
 const themes = {
-  light: lightTheme,
-  dark: darkTheme,
-  ...(isNonProductionEnvironment() && { development: developmentTheme }),
+  light: { name: 'Light', colors: lightTheme },
+  dark: { name: 'Dark', colors: darkTheme },
+  ...(isNonProductionEnvironment() && {
+    development: { name: 'Development', colors: developmentTheme },
+  }),
 };
 
-export const themeNames = Object.keys(themes) as Theme[];
+export const themeOptions = Object.entries(themes).map(
+  ([key, { name }]) => [key, name] as [Theme, string],
+);
 
 export function useTheme() {
   return useSelector(state => state.prefs.global?.theme) || 'light';
@@ -21,7 +25,7 @@ export function useTheme() {
 
 export function ThemeStyle() {
   let theme = useTheme();
-  let themeColors = themes[theme];
+  let themeColors = themes[theme].colors;
   let css = Object.keys(themeColors)
     .map(key => `  --color-${key}: ${themeColors[key]};`)
     .join('\n');
diff --git a/upcoming-release-notes/1797.md b/upcoming-release-notes/1797.md
new file mode 100644
index 00000000000..ca29b85030b
--- /dev/null
+++ b/upcoming-release-notes/1797.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [miqh]
+---
+
+Adjust casing of theme options for consistent presentation.