Тема сменена на тёмную

src/components/LayoutPortal.tsx

@@ -74,7 +74,7 @@ const _LayoutPortal = memo(() => {
     return (
         <Layout className={`page-layout ${isAdmin ? 'page-layout-admin' : ''}`}>
             {(sider || siderProps) && (
-                <Sider {...siderProps} collapsedWidth={50} collapsed={menuCollapsed} trigger={null} collapsible className={`menu-sider ${siderProps?.className || ''}`}>
+                <Sider {...siderProps} collapsedWidth={50} collapsed={menuCollapsed} trigger={null} collapsible className={`dd-menu-sider ${siderProps?.className || ''}`}>
                     <div className={'sider-content'}>
                         <button className={'sider-toogle'} onClick={() => setMenuCollapsed((prev) => !prev)}>
                             <Logo onlyIcon={menuCollapsed} />

src/styles/components/layout.less

@@ -2,6 +2,8 @@
 @active-bg: #c32828;
 @admin-bg: #900;
 @admin-active-bg: #413f3d;
+@bg-color: #232323;
+@text-color: white - @bg-color;
 
 .no-select {
     -webkit-user-select: none;
@@ -25,7 +27,7 @@
 
     height: 100vh;
 
-    & .menu-sider {
+    & .dd-menu-sider {
         overflow-x: hidden;
         overflow-y: auto;
         height: 100%;
@@ -86,7 +88,8 @@
 
     & .page-content {
         overflow-y: auto;
-        background: white;
+        background: @bg-color;
+        color: @text-color;
 
         & .breadcrumb-block {
             display: flex;
@@ -115,11 +118,11 @@
             background-color: @admin-bg;
         }
 
-        .menu-sider {
+        .dd-menu-sider {
             background-color: @admin-bg;
         }
 
-        & .menu-sider .ant-menu-submenu-selected.ant-menu-submenu-inline .ant-menu-submenu-title {
+        & .dd-menu-sider .ant-menu-submenu-selected.ant-menu-submenu-inline .ant-menu-submenu-title {
             color: white;
             & .ant-menu-title-content > a {
                 color: white;
@@ -128,10 +131,6 @@
     }
 }
 
-.site-layout-background {
-    background: #fff;
-}
-
 @media only screen and (max-width: 1280px) {
     .page-layout {
         --sheet-padding: 10px;

src/styles/include/antd_theme.less

@@ -1,11 +1,70 @@
 @import '~antd/dist/antd.less';
-/*
-*   ЭТО ФАЙЛ НАСТРОЙКИ ТЕМЫ И КОМПОНЕНТОВ ТЕМЫ.
-*   НЕ ПИШИТЕ ТУТ СТИЛИ ДЛЯ КАСТОМНЫХ КОМПОНЕНТОВ.
-*/
 
-// Переменные для темы тут:
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+@main: #222629;
+@main-dark: #191C1E;
+@main-light: #2E3338;
+@text: #ddd;
+@text-light: #fff;
+@text-dark: #222;
+@text-disabled: #999;
 
-@primary-color: #C32828; // rgb(195, 40, 40)
-@layout-header-background:#413F3D; // rgb(65, 63, 61)
+@primary: #C32828;
+@info: #FFD166;
+@success: #06D6A0;
+@error: #EF476F;
+@warn: #E55934;
+
+@layout-header-height: 48px;
+
+@primary-color: @primary;
+@processing-color: @info;
+@info-color: @info;
+@success-color: @success;
+@error-color: @error;
+@highlight-color: @error;
+@warning-color: @warn;
+@text-color: @text;
+@text-color-dark: @text-dark;
+@disabled-color: @text-disabled;
+@text-color-secondary: @text-disabled;
+@heading-color: @text-light;
+@heading-color-dark: @text-dark;
+@link-color: lighten(@primary, 10%);
+
+@body-background: @main;
+@component-background: @main-light;
+@item-active-bg: @primary;
+@item-hover-bg: @primary;
+@menu-highlight-color: @text;
+@table-row-hover-bg: darken(@primary, 10%);
+
+@descriptions-bg: @main-light;
+@menu-bg: transparent;
+
+@border-color-base: @main-dark;
+@border-color-split: lighten(@main-light, 2%);
+
+@background-color-light: @main-light;
+@background-color-base: @main-light;
+
+@checkbox-check-color: @main-light;
+
+@layout-header-background: @main-dark;
+@layout-body-background: @main;
+
+// Alert
+@alert-success-border-color: @success;
+@alert-success-bg-color: darken(@success, 20%);
+@alert-success-icon-color: @success;
+
+@alert-info-border-color: @info;
+@alert-info-bg-color: darken(@info, 30%);
+@alert-info-icon-color: @info;
+
+@alert-warning-border-color: @warn;
+@alert-warning-bg-color: darken(@warn, 20%);
+@alert-warning-icon-color: @warn;
+
+@alert-error-border-color: @error;
+@alert-error-bg-color: darken(@error, 20%);
+@alert-error-icon-color: @error;