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

src/containers/profile/ProfileAccounts/styles.module.scss

@@ -1,11 +1,11 @@
-@import "../../../styles/variables";
+@import '../../../styles/variables';
 
 .wrap {
 }
 
 .list {
   border-radius: $radius;
-  background: transparentize(white, 0.95);
+  background: $gray_90;
 }
 
 .buttons {
@@ -38,7 +38,7 @@
   grid-template-columns: 20px auto 20px;
   grid-column-gap: $gap * 1.5;
   align-items: center;
-  border-bottom: 1px solid transparentize(white, 0.9);
+  border-bottom: 1px solid $gray_90;
   padding: $gap;
 
   &:last-child {
@@ -70,7 +70,7 @@
     cursor: pointer;
     opacity: 0.5;
     transition: opacity 0.25s;
-    fill: $red;
+    fill: $color_danger;
     display: flex;
     align-items: center;
 

src/containers/profile/ProfileInfo/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   justify-content: flex-start;
@@ -25,6 +25,6 @@
 }
 
 .description {
-  color: transparentize($color: white, $amount: 0.7);
+  color: $gray_25;
   font: $font_14_regular;
 }

src/containers/profile/ProfileMessages/index.tsx

@@ -1,54 +0,0 @@
-import React, { FC } from 'react';
-
-import { Anchor } from '~/components/common/Anchor';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { Message } from '~/components/profile/Message';
-import { useUser } from '~/hooks/auth/useUser';
-import { useMessages } from '~/hooks/messages/useMessages';
-import { useProfileContext } from '~/utils/providers/ProfileProvider';
-
-import styles from './styles.module.scss';
-
-const ProfileMessages: FC = () => {
-  const { profile, isLoading: isLoadingProfile } = useProfileContext();
-  const { user } = useUser();
-  const { messages, isLoading: isLoadingMessages } = useMessages(profile?.username || '');
-
-  if (!messages.length || isLoadingProfile)
-    return <NodeNoComments is_loading={isLoadingMessages || isLoadingProfile} />;
-
-  if (messages.length <= 0) {
-    return null;
-  }
-
-  return (
-    <div className={styles.messages}>
-      <div className={styles.warning}>
-        <p>В будущем мы собираемся убрать сообщения, превратив их в заметки.</p>
-
-        <p>
-          Вся твоя история сообщений, написанных себе, сохранится. Исчезнут только сообщения другим
-          участникам.
-        </p>
-
-        <p>
-          Давай обсудим это в <Anchor href="/boris">Борисе</Anchor>, если это так важно.
-        </p>
-      </div>
-
-      {messages
-        .filter(message => !!message.text)
-        .map((
-          message // TODO: show files / memo
-        ) => (
-          <Message message={message} incoming={user.id !== message.from.id} key={message.id} />
-        ))}
-
-      {!isLoadingMessages && messages.length > 0 && (
-        <div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
-      )}
-    </div>
-  );
-};
-
-export { ProfileMessages };

src/containers/profile/ProfileMessages/styles.module.scss

@@ -1,43 +0,0 @@
-@import "src/styles/variables";
-
-.messages {
-  padding: $gap;
-  background: $node_bg;
-  display: flex;
-  flex-direction: column !important;
-  overflow: auto;
-
-  & > * {
-    margin: $gap * 0.5 0;
-
-    &:last-child {
-      margin-top: 0;
-    }
-
-    &:first-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.placeholder {
-  font: $font_12_regular;
-  padding: $gap;
-  text-align: center;
-}
-
-div.warning.warning {
-  padding: $gap;
-  box-shadow: $red 0 0 0 2px;
-  border-radius: $radius;
-  font: $font_14_semibold;
-  margin-bottom: $gap * 2;
-
-  p {
-    margin-bottom: $gap;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}

src/containers/profile/ProfilePageLeft/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   @include outer_shadow;
@@ -9,7 +9,7 @@
   align-items: stretch;
   justify-content: stretch;
   flex-direction: column;
-  background: $comment_bg;
+  background: $content_bg_light;
   height: 100%;
   border-radius: $radius;
 }
@@ -39,7 +39,7 @@
   font: $font_14_regular;
   box-sizing: border-box;
   width: 100%;
-  color: transparentize(white, 0.5);
+  color: $gray_50;
 }
 
 .description {

src/containers/profile/ProfileQuickInfo/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrapper {
   @include outer_shadow;
@@ -35,10 +35,10 @@ div.top.top {
 .status {
   font: $font_12_regular;
   margin-top: $gap;
-  color: darken(white, 50%);
+  color: $gray_50;
 
   &.active {
-    color: $olive;
+    color: $color_online;
   }
 
   &::before {

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -4,13 +4,12 @@ import classNames from 'classnames';
 
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
-import { Button } from '~/components/input/Button';
-import { Icon } from '~/components/input/Icon';
-import { MenuButton, MenuItemWithIcon } from '~/components/menu';
+import { Zone } from '~/components/containers/Zone';
 import { VerticalMenu } from '~/components/menu/VerticalMenu';
 import { useStackContext } from '~/components/sidebar/SidebarStack';
 import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
 import { ProfileStats } from '~/containers/profile/ProfileStats';
+import { ThemeSwitcher } from '~/containers/settings/ThemeSwitcher';
 import { useAuth } from '~/hooks/auth/useAuth';
 import markdown from '~/styles/common/markdown.module.scss';
 
@@ -50,9 +49,15 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
             </VerticalMenu.Item>
           </VerticalMenu>
 
-          <div className={styles.toggles}>
-            <ProfileToggles />
-          </div>
+          <Group className={styles.toggles}>
+            <Zone>
+              <ProfileToggles />
+            </Zone>
+
+            <Zone>
+              <ThemeSwitcher />
+            </Zone>
+          </Group>
 
           <div className={styles.stats}>
             <ProfileStats />

src/containers/profile/ProfileToggles/index.tsx

@@ -7,11 +7,9 @@ import { SuperPowersToggle } from '~/containers/auth/SuperPowersToggle';
 interface ProfileTogglesProps {}
 
 const ProfileToggles: FC<ProfileTogglesProps> = () => (
-  <Zone>
-    <Group>
-      <SuperPowersToggle />
-    </Group>
-  </Zone>
+  <Group>
+    <SuperPowersToggle />
+  </Group>
 );
 
 export { ProfileToggles };