localization, dark theme

2025-11-11 08:26:25 +09:00
parent 68bbef35ee
commit 271f303757
8 changed files with 725 additions and 81 deletions
--- a/.env.local
+++ b/.env.local
@@ -0,0 +1,71 @@
+# Django настройки для локальной разработки
+DJANGO_SECRET_KEY=lskjflSDJHFdSFYU7TYOREIFLUDJKFBNKLJSDHFP9Q234856QT80OUAEIYDWSF9PQ28345701784QRTEOYAGWDFLSBAPWO9I485Y
+DJANGO_DEBUG=True
+DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1,web
+DJANGO_CSRF_TRUSTED_ORIGINS=http://localhost:3000,http://127.0.0.1:3000,http://localhost:8000,http://127.0.0.1:8000
+
+# CORS настройки для локальной разработки
+CORS_ALLOWED_ORIGINS=http://127.0.0.1:3000,http://localhost:3000
+CORS_ALLOW_ALL_ORIGINS=True
+CORS_ALLOW_CREDENTIALS=True
+CORS_ALLOW_HEADERS=accept,accept-encoding,authorization,content-type,dnt,origin,user-agent,x-csrftoken,x-requested-with
+
+# Локализация
+DJANGO_LANGUAGE_CODE=ru-ru
+DJANGO_TIME_ZONE=UTC
+DJANGO_USE_I18N=True
+DJANGO_USE_TZ=True
+
+# Статические файлы
+DJANGO_STATIC_URL=/static/
+DJANGO_MEDIA_URL=/storage/
+
+# API настройки
+DJANGO_APPEND_SLASH=False
+
+# JWT настройки
+JWT_ACCESS_TOKEN_LIFETIME_MINUTES=60
+JWT_REFRESH_TOKEN_LIFETIME_DAYS=1
+
+# База данных PostgreSQL
+DATABASE_ENGINE=django.db.backends.postgresql
+DATABASE_NAME=links_db
+DATABASE_USER=links_user
+DATABASE_PASSWORD=links_OASDUIFH90324*ftye(guBJ;O234789SDgfu{
+DATABASE_HOST=db
+DATABASE_PORT=5432
+
+# PostgreSQL настройки для контейнера
+POSTGRES_DB=links_db
+POSTGRES_USER=links_user
+POSTGRES_PASSWORD=links_OASDUIFH90324*ftye(guBJ;O234789SDgfu{
+
+# Frontend настройки (для локальной разработки)
+NEXT_PUBLIC_API_URL=http://localhost:8000
+
+# URL настройки для Django backend (локальные)
+DJANGO_BACKEND_URL=http://localhost:8000
+DJANGO_BACKEND_PROTOCOL=http
+DJANGO_BACKEND_DOMAIN=localhost:8000
+DJANGO_MEDIA_BASE_URL=http://localhost:8000
+
+# Безопасность (отключено для локальной разработки)
+DJANGO_SECURE_SSL_REDIRECT=False
+DJANGO_SECURE_HSTS_SECONDS=0
+DJANGO_SECURE_HSTS_INCLUDE_SUBDOMAINS=False
+DJANGO_SECURE_HSTS_PRELOAD=False
+DJANGO_SECURE_CONTENT_TYPE_NOSNIFF=True
+DJANGO_SECURE_BROWSER_XSS_FILTER=True
+DJANGO_X_FRAME_OPTIONS=SAMEORIGIN
+
+# Email настройки (консоль для локальной разработки)
+DJANGO_EMAIL_BACKEND=django.core.mail.backends.console.EmailBackend
+DJANGO_EMAIL_HOST=
+DJANGO_EMAIL_PORT=587
+DJANGO_EMAIL_HOST_USER=
+DJANGO_EMAIL_HOST_PASSWORD=
+DJANGO_EMAIL_USE_TLS=False
+DJANGO_EMAIL_USE_SSL=False
+DJANGO_EMAIL_TIMEOUT=30
+DJANGO_DEFAULT_FROM_EMAIL=
+DJANGO_SERVER_EMAIL=
--- a/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
+++ b/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
@@ -445,7 +445,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                    <div className="col-12 mb-3">
                      <div className="alert alert-info">
                        <i className="bi bi-info-circle me-2"></i>
-                        <strong>Совет:</strong> Попробуйте разные макеты, чтобы найти наиболее подходящий для вашего контента. 
+                        <strong>{t('customization.layout.tip')}</strong> {t('customization.layout.tipText')} 
                        Каждый стиль имеет свои преимущества в зависимости от количества ссылок и их типа.
                      </div>
                    </div>
@@ -515,7 +515,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                          <div className="d-flex align-items-center gap-2">
                            <img 
                              src={settings.background_image_url} 
-                              alt="Текущий фон" 
+                              alt={t('customization.colors.currentBackgroundAlt')} 
                              className="img-thumbnail"
                              style={{ maxWidth: '200px', maxHeight: '100px', objectFit: 'cover' }}
                            />
@@ -654,13 +654,13 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                          onChange={(e) => handleChange('show_groups_title', e.target.checked)}
                        />
                        <label className="form-check-label">
-                          Показывать заголовок "Группы ссылок"
+                          {t('customization.colors.showGroupsTitle')}
                        </label>
                      </div>
                    </div>
                    
                    <div className="col-md-6 mb-3">
-                      <label className="form-label">Цвет описаний групп</label>
+                      <label className="form-label">{t('customization.colors.groupDescription')}</label>
                      <div className="input-group">
                        <input
                          type="color"
@@ -681,7 +681,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                    <div className="col-12 mb-3">
                      <div className="card">
                        <div className="card-header">
-                          <h6 className="mb-0">Цветовое перекрытие групп</h6>
+                          <h6 className="mb-0">{t('customization.colors.groupOverlay')}</h6>
                        </div>
                        <div className="card-body">
                          <div className="form-check mb-3">
@@ -708,7 +708,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                                      className="form-control form-control-color"
                                      value={settings.group_overlay_color || '#000000'}
                                      onChange={(e) => handleChange('group_overlay_color', e.target.value)}
-                                      title="Выберите цвет перекрытия"
+                                      title={t('customization.colors.chooseOverlayColor')}
                                    />
                                    <input
                                      type="text"
@@ -716,7 +716,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                                      value={settings.group_overlay_color || '#000000'}
                                      onChange={(e) => handleChange('group_overlay_color', e.target.value)}
                                      placeholder="#000000"
-                                      title="Hex код цвета"
+                                      title={t('customization.colors.hexColorCode')}
                                    />
                                  </div>
                                </div>
@@ -767,7 +767,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                    <div className="col-12">
                      <div className="alert alert-info">
                        <i className="bi bi-info-circle me-2"></i>
-                        <strong>Настройки отдельных групп</strong><br/>
+                        <strong>{t('customization.advanced.individualGroupSettings')}</strong><br/>
                        Чтобы настроить конкретную группу (публичность, избранное, разворачивание), используйте кнопку редактирования рядом с названием группы в основном списке.
                      </div>
                    </div>
@@ -776,7 +776,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                    <div className="col-12 mt-4">
                      <div className="border rounded p-3">
                        <div className="d-flex align-items-center justify-content-between mb-3">
-                          <h6 className="mb-0">Цветовое перекрытие кнопок ссылок</h6>
+                          <h6 className="mb-0">{t('customization.colors.linkOverlay')}</h6>
                          <div className="form-check form-switch">
                            <input
                              className="form-check-input"
@@ -883,8 +883,8 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                        value={settings.font_family}
                        onChange={(e) => handleChange('font_family', e.target.value)}
                      >
-                        <option value="sans-serif">Системный Sans Serif</option>
-                        <option value="serif">Системный Serif</option>
+                        <option value="sans-serif">{t('customization.advanced.systemSansSerif')}</option>
+                        <option value="serif">{t('customization.advanced.systemSerif')}</option>
                        <option value="monospace">Monospace</option>
                        <option value="'PT Sans', sans-serif">PT Sans</option>
                        <option value="'PT Serif', serif">PT Serif</option>
@@ -906,7 +906,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                        value={settings.heading_font_family || settings.font_family}
                        onChange={(e) => handleChange('heading_font_family', e.target.value)}
                      >
-                        <option value="">Как основной</option>
+                        <option value="">{t('customization.advanced.sameAsMain')}</option>
                        <option value="'PT Sans', sans-serif">PT Sans</option>
                        <option value="'PT Serif', serif">PT Serif</option>
                        <option value="'Roboto', sans-serif">Roboto</option>
@@ -935,7 +935,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                        value={settings.body_font_family || settings.font_family}
                        onChange={(e) => handleChange('body_font_family', e.target.value)}
                      >
-                        <option value="">Как основной</option>
+                        <option value="">{t('customization.advanced.sameAsMain')}</option>
                        <option value="'PT Sans', sans-serif">PT Sans</option>
                        <option value="'PT Serif', serif">PT Serif</option>
                        <option value="'Roboto', sans-serif">Roboto</option>
--- a/frontend/linktree-frontend/src/app/components/ThemeToggle.css
+++ b/frontend/linktree-frontend/src/app/components/ThemeToggle.css
@@ -6,13 +6,14 @@
  border: 2px solid var(--bs-border-color);
  border-radius: 20px;
  cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
 }

 .theme-toggle.dark {
-  background-color: var(--bs-dark);
-  border-color: var(--bs-secondary);
+  background: linear-gradient(135deg, #7c3aed, #9333ea);
+  border: 2px solid #8b5cf6;
+  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
 }

 .theme-toggle-slider {
@@ -27,12 +28,13 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }

 .theme-toggle.dark .theme-toggle-slider {
  transform: translateX(30px);
-  background: linear-gradient(45deg, #4a5568, #718096);
+  background: linear-gradient(45deg, #f8fafc, #e2e8f0);
+  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.3);
 }

 .theme-toggle-icon {
@@ -66,6 +68,11 @@
  transform: scale(1.05);
 }

+.theme-toggle.dark:hover {
+  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.35);
+  transform: scale(1.05);
+}
+
 .theme-toggle:active {
  transform: scale(0.95);
 }
@@ -104,20 +111,23 @@

 /* Темная тема - звездочки */
 .theme-toggle.dark::after {
-  content: '✨';
+  content: '🌙';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
-  font-size: 8px;
-  animation: twinkle 1.5s ease-in-out infinite alternate;
+  font-size: 10px;
+  animation: moonGlow 2s ease-in-out infinite alternate;
+  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.6));
 }

-@keyframes twinkle {
+@keyframes moonGlow {
  0% {
-    opacity: 0.3;
+    opacity: 0.6;
+    filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.6));
  }
  100% {
    opacity: 1;
+    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.9));
  }
 }
--- a/frontend/linktree-frontend/src/app/layout.tsx
+++ b/frontend/linktree-frontend/src/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import "./styles/themes.css";
+import "./styles/comfort.css";
 import { ReactNode } from "react";
 import { LayoutWrapper } from "./components/LayoutWrapper";
 import Providers from "./components/Providers";
@@ -70,7 +71,7 @@ export default function RootLayout({
        />

        <link rel="manifest" href="/manifest.json?h=457941ffad3c027c946331c09a4d7d2f" />
-        <meta name="theme-color" content="#ffffff" />
+        <meta name="theme-color" content="#1a1a23" />
      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
--- a/frontend/linktree-frontend/src/app/locales/en.json
+++ b/frontend/linktree-frontend/src/app/locales/en.json
@@ -229,7 +229,24 @@
  "customization.layout.masonryDescription": "Dynamic grid with varying heights",
  "customization.layout.timelineDescription": "Chronological display",
  "customization.layout.magazineDescription": "Magazine style with large images",
-  "customization.layout.testListDescription": "Full non-collapsible list of all groups and links",  "customization.colors.theme": "Theme color",
+  "customization.layout.testListDescription": "Full non-collapsible list of all groups and links",
+  "customization.layout.tip": "Tip:",
+  "customization.layout.tipText": "Try different layouts to find the most suitable for your content.",
+
+  "customization.colors.currentBackgroundAlt": "Current background",
+  "customization.colors.groupDescription": "Group descriptions color",
+  "customization.colors.showGroupsTitle": "Show \"Link Groups\" title",
+  "customization.colors.groupOverlay": "Group color overlay",
+  "customization.colors.overlayColor": "Overlay color",
+  "customization.colors.chooseOverlayColor": "Choose overlay color",
+  "customization.colors.overlayOpacity": "Overlay opacity setting",
+  "customization.colors.preview": "Preview",
+  "customization.colors.linkOverlay": "Link button color overlay",
+
+  "customization.advanced.individualGroupSettings": "Individual group settings",
+  "customization.advanced.systemSansSerif": "System Sans Serif",
+  "customization.advanced.systemSerif": "System Serif",
+  "customization.advanced.sameAsMain": "Same as main",  "customization.colors.theme": "Theme color",
  "customization.colors.background": "Background color",
  "customization.colors.backgroundImage": "Background image",
  "customization.colors.removeBackground": "Remove background",
--- a/frontend/linktree-frontend/src/app/locales/ru.json
+++ b/frontend/linktree-frontend/src/app/locales/ru.json
@@ -229,7 +229,24 @@
  "customization.layout.masonryDescription": "Динамическая сетка разной высоты",
  "customization.layout.timelineDescription": "Хронологическое отображение",
  "customization.layout.magazineDescription": "Стиль журнала с крупными изображениями",
-  "customization.layout.testListDescription": "Полный несворачиваемый список всех групп и ссылок",  "customization.colors.theme": "Цвет темы",
+  "customization.layout.testListDescription": "Полный несворачиваемый список всех групп и ссылок",
+  "customization.layout.tip": "Совет:",
+  "customization.layout.tipText": "Попробуйте разные макеты, чтобы найти наиболее подходящий для вашего контента.",
+
+  "customization.colors.currentBackgroundAlt": "Текущий фон",
+  "customization.colors.groupDescription": "Цвет описаний групп",
+  "customization.colors.showGroupsTitle": "Показывать заголовок \"Группы ссылок\"",
+  "customization.colors.groupOverlay": "Цветовое перекрытие групп",
+  "customization.colors.overlayColor": "Цвет перекрытия",
+  "customization.colors.chooseOverlayColor": "Выберите цвет перекрытия",
+  "customization.colors.overlayOpacity": "Настройка прозрачности перекрытия",
+  "customization.colors.preview": "Предварительный просмотр",
+  "customization.colors.linkOverlay": "Цветовое перекрытие кнопок ссылок",
+
+  "customization.advanced.individualGroupSettings": "Настройки отдельных групп",
+  "customization.advanced.systemSansSerif": "Системный Sans Serif",
+  "customization.advanced.systemSerif": "Системный Serif",
+  "customization.advanced.sameAsMain": "Как основной",  "customization.colors.theme": "Цвет темы",
  "customization.colors.background": "Цвет фона",
  "customization.colors.backgroundImage": "Фоновое изображение",
  "customization.colors.removeBackground": "Убрать фон",
--- a/frontend/linktree-frontend/src/app/styles/comfort.css
+++ b/frontend/linktree-frontend/src/app/styles/comfort.css
@@ -0,0 +1,217 @@
+/* Комфортные стили для темной темы - дополнительные настройки для лучшего UX */
+
+/* Адаптация к системным настройкам пользователя */
+@media (prefers-reduced-motion: reduce) {
+  [data-theme="dark"] * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Улучшенная читаемость текста */
+@media (prefers-contrast: high) {
+  [data-theme="dark"] {
+    --text: #f0f0f8;
+    --text-secondary: #c8c8d8;
+    --border: #4a4a5a;
+  }
+}
+
+/* Адаптация к размеру экрана для комфорта */
+@media (max-width: 768px) {
+  [data-theme="dark"] {
+    --card-bg: #1e1e2a;
+    --background-secondary: #1e1e2a;
+  }
+  
+  [data-theme="dark"] .card {
+    border-radius: 16px;
+    margin-bottom: 1rem;
+  }
+  
+  [data-theme="dark"] .btn {
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-size: 16px;
+  }
+}
+
+/* Специальные стили для больших экранов */
+@media (min-width: 1200px) {
+  [data-theme="dark"] .container-fluid {
+    max-width: 1400px;
+  }
+  
+  [data-theme="dark"] .card {
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* Улучшенная фокусировка для пользователей клавиатуры */
+@media (prefers-reduced-transparency: no-preference) {
+  [data-theme="dark"] .btn:focus,
+  [data-theme="dark"] .form-control:focus,
+  [data-theme="dark"] a:focus {
+    outline: 3px solid rgba(124, 58, 237, 0.5);
+    outline-offset: 2px;
+    background: rgba(124, 58, 237, 0.05);
+  }
+}
+
+/* Мягкая анимация появления элементов */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+[data-theme="dark"] .fade-in {
+  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Улучшенные состояния загрузки */
+[data-theme="dark"] .loading {
+  background: linear-gradient(
+    90deg,
+    var(--background-secondary) 25%,
+    var(--background-tertiary) 37%,
+    var(--background-secondary) 63%
+  );
+  background-size: 400% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Специальная палитра для состояний */
+[data-theme="dark"] .state-success {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
+  border-left: 4px solid #22c55e;
+  color: #86efac;
+}
+
+[data-theme="dark"] .state-warning {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
+  border-left: 4px solid #fbbf24;
+  color: #fde68a;
+}
+
+[data-theme="dark"] .state-error {
+  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.05));
+  border-left: 4px solid #f87171;
+  color: #fca5a5;
+}
+
+[data-theme="dark"] .state-info {
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(56, 189, 248, 0.05));
+  border-left: 4px solid #38bdf8;
+  color: #7dd3fc;
+}
+
+/* Комфортные тултипы */
+[data-theme="dark"] .tooltip {
+  background: var(--background-tertiary);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Стили для уведомлений */
+[data-theme="dark"] .notification {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Улучшенный выбор текста */
+[data-theme="dark"] ::selection {
+  background: rgba(124, 58, 237, 0.3);
+  color: var(--text);
+}
+
+[data-theme="dark"] ::-moz-selection {
+  background: rgba(124, 58, 237, 0.3);
+  color: var(--text);
+}
+
+/* Специальные эффекты для интерактивных элементов */
+[data-theme="dark"] .interactive-element {
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .interactive-element::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(124, 58, 237, 0.1),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+[data-theme="dark"] .interactive-element:hover::before {
+  left: 100%;
+}
+
+/* Мягкое появление модальных окон */
+[data-theme="dark"] .modal.fade .modal-dialog {
+  transform: scale(0.9);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="dark"] .modal.show .modal-dialog {
+  transform: scale(1);
+}
+
+/* Комфортные разделители */
+[data-theme="dark"] hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--border),
+    transparent
+  );
+  margin: 2rem 0;
+}
+
+/* Улучшенные списки */
+[data-theme="dark"] .list-group-item {
+  background: var(--card-bg);
+  border-color: var(--border);
+  transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .list-group-item:hover {
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
+  transform: translateX(4px);
+  border-left: 3px solid var(--primary);
+}
--- a/frontend/linktree-frontend/src/app/styles/themes.css
+++ b/frontend/linktree-frontend/src/app/styles/themes.css
@@ -1,67 +1,70 @@
 /* CSS Custom Properties для темизации */

 :root {
-  /* Светлая тема (по умолчанию) */
-  --background: #ffffff;
-  --background-secondary: #f8f9fa;
-  --background-tertiary: #e9ecef;
-  --text: #212529;
-  --text-secondary: #6c757d;
-  --text-muted: #868e96;
-  --border: #dee2e6;
-  --border-light: #e9ecef;
-  --primary: #0d6efd;
-  --primary-hover: #0b5ed7;
-  --secondary: #6c757d;
-  --success: #198754;
-  --danger: #dc3545;
-  --warning: #ffc107;
-  --info: #0dcaf0;
+  /* Светлая тема (обновленная) */
+  --background: #fafafa;
+  --background-secondary: #f5f5f7;
+  --background-tertiary: #e8e8ed;
+  --text: #1a1a1f;
+  --text-secondary: #6e6e73;
+  --text-muted: #86868b;
+  --border: #d2d2d7;
+  --border-light: #e8e8ed;
+  --primary: #8b5cf6;
+  --primary-hover: #7c3aed;
+  --secondary: #6366f1;
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --info: #06b6d4;
  --card-bg: #ffffff;
-  --card-border: #dee2e6;
+  --card-border: #d2d2d7;
  --input-bg: #ffffff;
-  --input-border: #ced4da;
-  --input-focus-border: #86b7fe;
+  --input-border: #d2d2d7;
+  --input-focus-border: #8b5cf6;
  --dropdown-bg: #ffffff;
-  --dropdown-border: #dee2e6;
+  --dropdown-border: #d2d2d7;
  --modal-bg: #ffffff;
-  --modal-backdrop: rgba(0, 0, 0, 0.5);
+  --modal-backdrop: rgba(26, 26, 31, 0.5);
  --navbar-bg: #ffffff;
-  --sidebar-bg: #f8f9fa;
-  --shadow: rgba(0, 0, 0, 0.175);
-  --shadow-lg: rgba(0, 0, 0, 0.15);
+  --sidebar-bg: #f5f5f7;
+  --shadow: rgba(26, 26, 31, 0.1);
+  --shadow-lg: rgba(26, 26, 31, 0.12);
 }

 [data-theme="dark"] {
-  /* Темная тема */
-  --background: #0d1117;
-  --background-secondary: #161b22;
-  --background-tertiary: #21262d;
-  --text: #f0f6fc;
-  --text-secondary: #8b949e;
-  --text-muted: #656d76;
-  --border: #30363d;
-  --border-light: #21262d;
-  --primary: #4fb3ff;
-  --primary-hover: #58a6ff;
-  --secondary: #8b949e;
-  --success: #3fb950;
-  --danger: #f85149;
-  --warning: #d29922;
-  --info: #56d4dd;
-  --card-bg: #161b22;
-  --card-border: #30363d;
-  --input-bg: #0d1117;
-  --input-border: #30363d;
-  --input-focus-border: #58a6ff;
-  --dropdown-bg: #161b22;
-  --dropdown-border: #30363d;
-  --modal-bg: #161b22;
-  --modal-backdrop: rgba(0, 0, 0, 0.7);
-  --navbar-bg: #161b22;
-  --sidebar-bg: #0d1117;
-  --shadow: rgba(0, 0, 0, 0.4);
+  /* Темная тема - Комфортная ночная палитра */
+  --background: #1a1a23;
+  --background-secondary: #22222f;
+  --background-tertiary: #2a2a3a;
+  --text: #e8e8f0;
+  --text-secondary: #b8b8c8;
+  --text-muted: #9090a0;
+  --border: #3a3a4a;
+  --border-light: #32323f;
+  --primary: #7c3aed;
+  --primary-hover: #8b5cf6;
+  --secondary: #64748b;
+  --success: #22c55e;
+  --danger: #f87171;
+  --warning: #fbbf24;
+  --info: #38bdf8;
+  --card-bg: #22222f;
+  --card-border: #3a3a4a;
+  --input-bg: #1a1a23;
+  --input-border: #3a3a4a;
+  --input-focus-border: #7c3aed;
+  --dropdown-bg: #22222f;
+  --dropdown-border: #3a3a4a;
+  --modal-bg: #22222f;
+  --modal-backdrop: rgba(26, 26, 35, 0.75);
+  --navbar-bg: #22222f;
+  --sidebar-bg: #1a1a23;
+  --shadow: rgba(0, 0, 0, 0.2);
  --shadow-lg: rgba(0, 0, 0, 0.3);
+  --accent-glow: rgba(124, 58, 237, 0.1);
+  --warm-accent: #fbbf24;
+  --cool-accent: #38bdf8;
 }

 /* Применение темы к основным элементам */
@@ -102,11 +105,11 @@ body {
  background-color: var(--input-bg);
  border-color: var(--input-focus-border);
  color: var(--text);
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
 }

 [data-theme="dark"] .form-control:focus {
-  box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
 }

 .form-select {
@@ -214,9 +217,165 @@ body {
  color: var(--text) !important;
 }

+/* Специальные стили для светлой темы */
+[data-theme="light"] .btn-primary,
+:root .btn-primary {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: #ffffff;
+}
+
+[data-theme="light"] .btn-primary:hover,
+:root .btn-primary:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+  color: #ffffff;
+}
+
+[data-theme="light"] .btn-outline-primary,
+:root .btn-outline-primary {
+  color: var(--primary);
+  border-color: var(--primary);
+}
+
+[data-theme="light"] .btn-outline-primary:hover,
+:root .btn-outline-primary:hover {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: #ffffff;
+}
+
+[data-theme="light"] .card:hover,
+:root .card:hover {
+  box-shadow: 0 0.5rem 1rem rgba(139, 92, 246, 0.08);
+  transition: box-shadow 0.3s ease;
+}
+
+[data-theme="light"] .nav-tabs .nav-link:hover,
+:root .nav-tabs .nav-link:hover {
+  color: var(--primary);
+}
+
+[data-theme="light"] .nav-tabs .nav-link.active,
+:root .nav-tabs .nav-link.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+
+/* Дополнительные стили для фиолетовой темы */
+[data-theme="dark"] .btn-primary {
+  background: linear-gradient(135deg, var(--primary), #9333ea);
+  border-color: var(--primary);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+}
+
+[data-theme="dark"] .btn-primary:hover {
+  background: linear-gradient(135deg, var(--primary-hover), #a855f7);
+  border-color: var(--primary-hover);
+  color: #ffffff;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+}
+
+[data-theme="dark"] .btn-secondary {
+  background-color: var(--secondary);
+  border-color: var(--secondary);
+  color: #ffffff;
+}
+
+[data-theme="dark"] .btn-secondary:hover {
+  background-color: #475569;
+  border-color: #475569;
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+[data-theme="dark"] .btn-outline-primary {
+  color: var(--primary);
+  border-color: var(--primary);
+  background: rgba(124, 58, 237, 0.05);
+}
+
+[data-theme="dark"] .btn-outline-primary:hover {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+}
+
+[data-theme="dark"] .navbar {
+  background-color: var(--navbar-bg);
+  border-bottom: 1px solid var(--border);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+[data-theme="dark"] .card {
+  background: linear-gradient(145deg, var(--card-bg), #2a2a3a);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+}
+
+[data-theme="dark"] .card:hover {
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="dark"] .modal-content {
+  background: var(--modal-bg);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .form-control,
+[data-theme="dark"] .form-select {
+  background-color: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text);
+  border-radius: 8px;
+}
+
+[data-theme="dark"] .form-control:focus,
+[data-theme="dark"] .form-select:focus {
+  background-color: var(--input-bg);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
+  outline: none;
+}
+
+[data-theme="dark"] .dropdown-item:hover,
+[data-theme="dark"] .dropdown-item:focus {
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05));
+  color: var(--text);
+  border-radius: 6px;
+}
+
+[data-theme="dark"] .nav-tabs .nav-link:hover {
+  color: var(--primary);
+  border-bottom: 2px solid transparent;
+}
+
+[data-theme="dark"] .nav-tabs .nav-link.active {
+  color: var(--primary);
+  background: rgba(124, 58, 237, 0.1);
+  border-bottom: 2px solid var(--primary);
+  border-radius: 8px 8px 0 0;
+}
+
+[data-theme="dark"] .list-group-item:hover {
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
+  border-radius: 8px;
+}
+
 /* Анимация переключения темы */
 * {
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+  transition: 
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Кастомные утилитарные классы для темизации */
@@ -254,4 +413,156 @@ body {

 .theme-shadow-lg {
  box-shadow: 0 1rem 3rem var(--shadow-lg);
+}
+
+/* Комфортные градиенты для темной темы */
+[data-theme="dark"] .gradient-primary {
+  background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
+}
+
+[data-theme="dark"] .gradient-card {
+  background: linear-gradient(145deg, var(--card-bg) 0%, var(--background-tertiary) 100%);
+  border: 1px solid rgba(124, 58, 237, 0.1);
+}
+
+/* Улучшенные тени для комфортного восприятия */
+[data-theme="dark"] .enhanced-shadow {
+  box-shadow: 
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="dark"] .enhanced-shadow-lg {
+  box-shadow: 
+    0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Специальные классы для ночного режима */
+[data-theme="dark"] .night-comfort {
+  filter: brightness(0.95) contrast(1.05);
+}
+
+[data-theme="dark"] .text-emphasis {
+  color: var(--text);
+  font-weight: 500;
+}
+
+[data-theme="dark"] .soft-glow {
+  box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
+}
+
+/* Адаптивная яркость для различных элементов */
+[data-theme="dark"] .bright-element {
+  filter: brightness(1.1);
+}
+
+[data-theme="dark"] .dim-element {
+  filter: brightness(0.9);
+}
+
+/* Гладкие переходы для всех элементов */
+[data-theme="dark"] * {
+  transition: 
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Комфортная прокрутка для темной темы */
+[data-theme="dark"] ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-track {
+  background: var(--background-secondary);
+  border-radius: 6px;
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, var(--primary), #9333ea);
+  border-radius: 6px;
+  border: 2px solid var(--background-secondary);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, var(--primary-hover), #a855f7);
+}
+
+/* Мягкие стили для фокуса */
+[data-theme="dark"] :focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Приятные ссылки */
+[data-theme="dark"] a {
+  color: var(--primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+[data-theme="dark"] a:hover {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
+
+/* Улучшенная типография для ночного чтения */
+[data-theme="dark"] body {
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+}
+
+[data-theme="dark"] h1, 
+[data-theme="dark"] h2, 
+[data-theme="dark"] h3, 
+[data-theme="dark"] h4, 
+[data-theme="dark"] h5, 
+[data-theme="dark"] h6 {
+  color: var(--text);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+/* Мягкие акценты для важных элементов */
+[data-theme="dark"] .alert {
+  border: none;
+  border-radius: 12px;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+[data-theme="dark"] .alert-info {
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(56, 189, 248, 0.05));
+  border-left: 4px solid var(--cool-accent);
+  color: var(--text);
+}
+
+[data-theme="dark"] .alert-warning {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
+  border-left: 4px solid var(--warm-accent);
+  color: var(--text);
+}
+
+[data-theme="dark"] .alert-danger {
+  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.05));
+  border-left: 4px solid var(--danger);
+  color: var(--text);
+}
+
+[data-theme="dark"] .alert-success {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
+  border-left: 4px solid var(--success);
+  color: var(--text);
+}
+
+/* Комфортные тени и подсветки */
+[data-theme="dark"] .btn:focus,
+[data-theme="dark"] .form-control:focus,
+[data-theme="dark"] .form-select:focus {
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
 }