From 600140d2227e24e20945c8e5ca14db940ae19317 Mon Sep 17 00:00:00 2001
From: KatoakDR <68095633+KatoakDR@users.noreply.github.com>
Date: Sun, 8 Sep 2024 12:12:16 -0500
Subject: [PATCH] feat: toggle ui theme in settings

---
 .../settings/sidebar-item-settings.tsx        | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/electron/renderer/components/sidebar/settings/sidebar-item-settings.tsx b/electron/renderer/components/sidebar/settings/sidebar-item-settings.tsx
index ba1c4da2..3ed7c2a8 100644
--- a/electron/renderer/components/sidebar/settings/sidebar-item-settings.tsx
+++ b/electron/renderer/components/sidebar/settings/sidebar-item-settings.tsx
@@ -1,14 +1,47 @@
-import { EuiCallOut, EuiPanel, EuiSpacer } from '@elastic/eui';
+import type { EuiThemeColorMode } from '@elastic/eui';
+import {
+  EuiCallOut,
+  EuiForm,
+  EuiFormRow,
+  EuiPanel,
+  EuiRadioGroup,
+  EuiSpacer,
+} from '@elastic/eui';
 import type { ReactNode } from 'react';
+import { useTheme } from '../../../hooks/theme.jsx';
 
 export const SidebarItemSettings: React.FC = (): ReactNode => {
+  const { colorMode, setColorMode } = useTheme();
+
   return (
     <EuiPanel>
       <EuiCallOut title="Settings" iconType="gear" size="s">
-        (todo)
+        Customize your Phoenix experience.
       </EuiCallOut>
 
       <EuiSpacer size="m" />
+
+      <EuiForm component="form">
+        <EuiFormRow label="Appearance">
+          <EuiRadioGroup
+            name="theme"
+            idSelected={colorMode}
+            options={[
+              {
+                id: 'light',
+                label: 'Light',
+              },
+              {
+                id: 'dark',
+                label: 'Dark',
+              },
+            ]}
+            onChange={(themeId: string) => {
+              setColorMode?.(themeId as EuiThemeColorMode);
+            }}
+          />
+        </EuiFormRow>
+      </EuiForm>
     </EuiPanel>
   );
 };