feat: toggle ui theme in settings

Author: KatoakDR

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