Added components and logic to dynamically change theme

src/settings/UserInterface.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { SimpleCard } from '../utils/SimpleCard';
+import ToggleSwitch from '../utils/ToggleSwitch';
+import { changeThemeInMarkup, Theme } from '../utils/theme';
+import { Settings, UiSettings } from './reducers/settings';
+
+interface UserInterfaceProps {
+  settings: Settings;
+  setUiSettings: (settings: UiSettings) => void;
+}
+
+export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
+  <SimpleCard title="User interface">
+    <ToggleSwitch
+      checked={ui?.theme === 'dark'}
+      onChange={(useDarkTheme) => {
+        const theme: Theme = useDarkTheme ? 'dark' : 'light';
+
+        setUiSettings({ theme });
+        changeThemeInMarkup(theme);
+      }}
+    >
+      Use dark theme
+    </ToggleSwitch>
+  </SimpleCard>
+);