Добавил тему "Веспера"

src/containers/settings/ThemeSwitcher/index.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { Card } from '~/components/containers/Card';
+import { Group } from '~/components/containers/Group';
+import { Theme, themeColors } from '~/constants/themes';
+import { useTheme } from '~/utils/providers/ThemeProvider';
+
+import styles from './styles.module.scss';
+
+interface ThemeSwitcherProps {}
+
+const ThemeSwitcher: FC<ThemeSwitcherProps> = () => {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Group horizontal>
+      {Object.entries(themeColors).map(([id, item]) => (
+        <Card
+          key={id}
+          className={classNames(styles.card, {
+            [styles.active]: theme === id,
+          })}
+          style={{ background: item.background }}
+          role="button"
+          onClick={() => setTheme(id as Theme)}
+        >
+          <Group>
+            <Group horizontal>
+              {item.colors.map((color) => (
+                <div
+                  key={color}
+                  className={styles.sample}
+                  style={{ background: color }}
+                />
+              ))}
+            </Group>
+            <div className={styles.title}>{item.name}</div>
+          </Group>
+        </Card>
+      ))}
+    </Group>
+  );
+};
+
+export { ThemeSwitcher };

src/containers/settings/ThemeSwitcher/styles.module.scss

@@ -0,0 +1,30 @@
+@import 'src/styles/variables';
+
+.button {
+  flex: 1;
+}
+
+.card {
+  padding: $gap;
+  flex: 1;
+  cursor: pointer;
+
+  &.active {
+    outline: 1px solid $color_primary;
+  }
+}
+
+.title {
+  font: $font_12_semibold;
+  text-align: left;
+  text-transform: uppercase;
+  color: $gray_50;
+}
+
+.sample {
+  @include outer_shadow;
+
+  border-radius: 100%;
+  flex: 0 1 20px;
+  height: 20px;
+}