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

src/containers/settings/SettingsNotes/index.tsx

@@ -25,7 +25,7 @@ const List = () => {
 
   return (
     <>
-      {notes.map(note => (
+      {notes.map((note) => (
         <NoteCard
           remove={() => onRemove(note.id)}
           update={(text, callback) => update(note.id, text, callback)}
@@ -59,7 +59,6 @@ const SettingsNotes: VFC<SettingsNotesProps> = () => {
                 onClick={() => setFormIsShown(true)}
                 size="mini"
                 iconRight="plus"
-                color="secondary"
               >
                 Добавить
               </Button>

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

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

@@ -1,7 +1,4 @@
-@import "src/styles/variables";
-
-$pad_danger: mix($red, $content_bg, 70%);
-$pad_usual: mix(white, $content_bg, 10%);
+@import 'src/styles/variables';
 
 .about {
   flex: 4;
@@ -17,9 +14,6 @@ $pad_usual: mix(white, $content_bg, 10%);
   padding: 0 $gap 0;
 }
 
-.grid {
-}
-
 div.base_info.base_info {
   align-items: stretch;
 }