fix: themes and layout

frontend/src/main.tsx

@@ -1,9 +1,12 @@
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router";
+import { ThemeInitialProvider } from "./modules/theme-changer";
 import App from "./app/App";
 
 createRoot(document.getElementById("root")!).render(
   <BrowserRouter>
-    <App />
+    <ThemeInitialProvider>
+      <App />
+    </ThemeInitialProvider>
   </BrowserRouter>,
 );

frontend/src/modules/theme-bw/stores/theme.store.ts

@@ -1,6 +1,7 @@
 import type { Theme } from "@/modules/auth/types/auth.types";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+import { applyTheme, getSavedTheme, getCurrentTheme } from "@/modules/theme-changer/utils/apply.theme";
 
 interface ThemeState {
   theme: Theme;
@@ -10,26 +11,20 @@ interface ThemeState {
 
 export const useThemeStore = create<ThemeState>()(
   persist(
-    (set) => ({
-      theme: "dark",
+    (set, get) => ({
+      theme: "dark" as Theme,
       toggleTheme: () => {
-        set((state) => {
-          const newTheme = state.theme === "dark" ? "light" : "dark";
-          // Применяем класс к documentElement
-          if (newTheme === "dark") {
-            document.documentElement.classList.add("dark");
-          } else {
-            document.documentElement.classList.remove("dark");
-          }
-          return { theme: newTheme };
-        });
+        const currentTheme = getCurrentTheme();
+        const newThemeType = currentTheme === "dark" || currentTheme === "nightowl" || currentTheme === "sunset" || currentTheme === "forest" || currentTheme === "ocean" || currentTheme === "coffee"
+          ? "light"
+          : "dark";
+        // Переключаемся между light и dark базовыми темами
+        const newTheme = newThemeType === "dark" ? "dark" : "light";
+        applyTheme(newTheme);
+        set({ theme: newTheme as Theme });
       },
       setTheme: (theme: Theme) => {
-        if (theme === "dark") {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
+        applyTheme(theme);
         set({ theme });
       },
     }),
@@ -38,17 +33,3 @@ export const useThemeStore = create<ThemeState>()(
     },
   ),
 );
-
-// Инициализация темы при загрузке
-if (typeof window !== "undefined") {
-  const storedTheme = localStorage.getItem("theme-storage");
-  if (storedTheme) {
-    const { state } = JSON.parse(storedTheme);
-    if (state.theme === "dark") {
-      document.documentElement.classList.add("dark");
-    }
-  } else {
-    // По умолчанию dark
-    document.documentElement.classList.add("dark");
-  }
-}

frontend/src/modules/theme-bw/ui/ThemeToggle.tsx

@@ -1,20 +1,56 @@
-import React from "react";
-import { useThemeStore } from "../stores/theme.store";
+import React, { useState, useEffect } from "react";
 import { FiSun, FiMoon } from "react-icons/fi";
+import { getCurrentTheme, toggleDarkLight, getSavedTheme } from "../../theme-changer/utils/apply.theme";
+import { themes } from "../../theme-changer/config/theme.config";
 
 export const ThemeToggle: React.FC = () => {
-  const { theme, toggleTheme } = useThemeStore();
+  const [currentTheme, setCurrentTheme] = useState<string>(() => getSavedTheme());
+
+  const currentThemeData = themes.find((t) => t.id === currentTheme);
+  const isDark = currentThemeData?.type === "dark";
+
+  const handleClick = () => {
+    const newTheme = toggleDarkLight();
+    setCurrentTheme(newTheme);
+  };
+
+  // Инициализация при монтировании
+  useEffect(() => {
+    const saved = getSavedTheme();
+    const current = getCurrentTheme() || saved;
+    setCurrentTheme(current);
+  }, []);
+
+  // Слушаем изменения темы из других компонентов
+  useEffect(() => {
+    const handleThemeChange = (e: Event) => {
+      const event = e as CustomEvent;
+      setCurrentTheme(event.detail.theme);
+    };
+    window.addEventListener("themechange", handleThemeChange);
+    return () => window.removeEventListener("themechange", handleThemeChange);
+  }, []);
 
   return (
     <button
-      onClick={toggleTheme}
-      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200"
-      aria-label="Toggle theme"
+      onClick={handleClick}
+      className="p-2 rounded-lg transition-colors duration-200"
+      style={{
+        backgroundColor: "var(--bg-secondary)",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor = "var(--bg-tertiary)";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
+      }}
+      aria-label="Переключить тему"
+      title={isDark ? "Переключить на светлую тему" : "Переключить на тёмную тему"}
     >
-      {theme === "dark" ? (
-        <FiSun className="w-5 h-5 text-yellow-500" />
+      {isDark ? (
+        <FiSun className="w-5 h-5" style={{ color: "var(--accent)" }} />
       ) : (
-        <FiMoon className="w-5 h-5 text-gray-700" />
+        <FiMoon className="w-5 h-5" style={{ color: "var(--text-secondary)" }} />
       )}
     </button>
   );

frontend/src/pages/auth.page.tsx

@@ -13,7 +13,7 @@ export const AuthPage: React.FC = () => {
 
   useEffect(() => {
     if (token) {
-      navigate("/dashboard");
+      navigate("/");
     }
   }, [token, navigate]);
 
@@ -21,7 +21,7 @@ export const AuthPage: React.FC = () => {
     e.preventDefault();
     try {
       await login(formData);
-      navigate("/dashboard");
+      navigate("/");
     } catch (err) {
       // Error is handled by store
     }
@@ -36,23 +36,49 @@ export const AuthPage: React.FC = () => {
   };
 
   return (
-    <div className="pt-[25%] flex items-center justify-center bg-white dark:bg-black transition-colors duration-200">
-      <div className="w-full max-w-md px-8">
+    <div
+      className="min-h-screen flex items-center justify-center p-4"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="w-full max-w-md">
         {/* Card */}
-        <div className="bg-gray-50 dark:bg-gray-900 rounded-lg shadow-xl p-8 border border-gray-200 dark:border-gray-800">
+        <div
+          className="rounded-2xl shadow-2xl p-8 border"
+          style={{
+            backgroundColor: "var(--card-bg)",
+            borderColor: "var(--border)",
+            boxShadow: "0 20px 60px var(--shadow-color)",
+          }}
+        >
           {/* Header */}
           <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Welcome Back
+            <div
+              className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <FiUser className="w-8 h-8" style={{ color: "var(--accent)" }} />
+            </div>
+            <h1
+              className="text-3xl font-bold mb-2"
+              style={{ color: "var(--text-primary)" }}
+            >
+              С возвращением!
             </h1>
-            <p className="text-gray-600 dark:text-gray-400">
-              Sign in to your account
+            <p style={{ color: "var(--text-secondary)" }}>
+              Войдите в свой аккаунт
             </p>
           </div>
 
           {/* Error Message */}
           {error && (
-            <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-800 rounded text-red-700 dark:text-red-400 text-sm">
+            <div
+              className="mb-6 p-4 rounded-lg border text-sm"
+              style={{
+                backgroundColor: "var(--error-bg)",
+                borderColor: "var(--error-border)",
+                color: "var(--error-text)",
+              }}
+            >
               {error}
             </div>
           )}
@@ -60,37 +86,75 @@ export const AuthPage: React.FC = () => {
           {/* Form */}
           <form onSubmit={handleSubmit} className="space-y-5">
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Login
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Логин
               </label>
               <div className="relative">
-                <FiUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiUser
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                 <input
                   type="text"
                   name="login"
                   value={formData.login}
                   onChange={handleChange}
                   required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Enter your login"
+                  className="w-full pl-10 pr-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Введите ваш логин"
                 />
               </div>
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Password
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Пароль
               </label>
               <div className="relative">
-                <FiLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiLock
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                 <input
                   type="password"
                   name="password"
                   value={formData.password}
                   onChange={handleChange}
                   required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Enter your password"
+                  className="w-full pl-10 pr-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Введите ваш пароль"
                 />
               </div>
             </div>
@@ -98,14 +162,29 @@ export const AuthPage: React.FC = () => {
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              style={{
+                backgroundColor: "var(--button-primary)",
+                color: "var(--button-primary-text)",
+              }}
+              onMouseEnter={(e) => {
+                if (!isLoading) {
+                  e.currentTarget.style.backgroundColor = "var(--button-primary-hover)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--button-primary)";
+              }}
             >
               {isLoading ? (
-                "Signing in..."
+                <>
+                  <div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                  Вход...
+                </>
               ) : (
                 <>
                   <FiLogIn />
-                  Sign In
+                  Войти
                 </>
               )}
             </button>
@@ -113,13 +192,20 @@ export const AuthPage: React.FC = () => {
 
           {/* Footer */}
           <div className="mt-6 text-center">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Don't have an account?{" "}
+            <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+              Нет аккаунта?{" "}
               <Link
                 to="/register"
-                className="text-gray-900 dark:text-white hover:underline font-medium"
+                className="font-medium hover:underline transition-colors"
+                style={{ color: "var(--link)" }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = "var(--link-hover)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = "var(--link)";
+                }}
               >
-                Sign up
+                Зарегистрироваться
               </Link>
             </p>
           </div>

frontend/src/pages/register.page.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
-import { FiUser, FiLock, FiUserPlus, FiMail } from "react-icons/fi";
+import { FiUser, FiLock, FiUserPlus } from "react-icons/fi";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 
 export const RegisterPage: React.FC = () => {
@@ -17,7 +17,7 @@ export const RegisterPage: React.FC = () => {
 
   useEffect(() => {
     if (token) {
-      navigate("/dashboard");
+      navigate("/");
     }
   }, [token, navigate]);
 
@@ -25,7 +25,7 @@ export const RegisterPage: React.FC = () => {
     e.preventDefault();
 
     if (formData.password !== formData.confirmPassword) {
-      setPasswordError("Passwords do not match");
+      setPasswordError("Пароли не совпадают");
       return;
     }
 
@@ -38,7 +38,7 @@ export const RegisterPage: React.FC = () => {
         firstName: formData.firstName,
         lastName: formData.lastName,
       });
-      navigate("/dashboard");
+      navigate("/");
     } catch (err) {
       // Error is handled by store
     }
@@ -53,34 +53,72 @@ export const RegisterPage: React.FC = () => {
     if (passwordError) setPasswordError(null);
   };
 
+  const inputStyles = `
+    w-full pl-10 pr-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all
+  `;
+
+  const simpleInputStyles = `
+    w-full px-3 py-2.5 rounded-lg border focus:outline-none focus:ring-2 transition-all
+  `;
+
   return (
-    <div className="min-h-screen flex items-center justify-center bg-white dark:bg-black transition-colors duration-200">
-      <div className="w-full max-w-md px-8">
+    <div
+      className="min-h-screen flex items-center justify-center p-4"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div className="w-full max-w-md">
         {/* Card */}
-        <div className="bg-gray-50 dark:bg-gray-900 rounded-lg shadow-xl p-8 border border-gray-200 dark:border-gray-800">
+        <div
+          className="rounded-2xl shadow-2xl p-8 border"
+          style={{
+            backgroundColor: "var(--card-bg)",
+            borderColor: "var(--border)",
+            boxShadow: "0 20px 60px var(--shadow-color)",
+          }}
+        >
           {/* Header */}
           <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Create Account
+            <div
+              className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <FiUserPlus className="w-8 h-8" style={{ color: "var(--accent)" }} />
+            </div>
+            <h1
+              className="text-3xl font-bold mb-2"
+              style={{ color: "var(--text-primary)" }}
+            >
+              Создать аккаунт
             </h1>
-            <p className="text-gray-600 dark:text-gray-400">
-              Sign up to get started
+            <p style={{ color: "var(--text-secondary)" }}>
+              Зарегистрируйтесь, чтобы начать
             </p>
           </div>
 
           {/* Error Message */}
           {error && (
-            <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-800 rounded text-red-700 dark:text-red-400 text-sm">
+            <div
+              className="mb-6 p-4 rounded-lg border text-sm"
+              style={{
+                backgroundColor: "var(--error-bg)",
+                borderColor: "var(--error-border)",
+                color: "var(--error-text)",
+              }}
+            >
               {error}
             </div>
           )}
 
           {/* Form */}
           <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Name Fields */}
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  First Name
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Имя
                 </label>
                 <input
                   type="text"
@@ -88,14 +126,30 @@ export const RegisterPage: React.FC = () => {
                   value={formData.firstName}
                   onChange={handleChange}
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="John"
+                  className={simpleInputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Иван"
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Last Name
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Фамилия
                 </label>
                 <input
                   type="text"
@@ -103,66 +157,145 @@ export const RegisterPage: React.FC = () => {
                   value={formData.lastName}
                   onChange={handleChange}
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Doe"
+                  className={simpleInputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Иванов"
                 />
               </div>
             </div>
 
+            {/* Login */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Login
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Логин
               </label>
               <div className="relative">
-                <FiUser className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiUser
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                 <input
                   type="text"
                   name="login"
                   value={formData.login}
                   onChange={handleChange}
                   required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Choose a login"
+                  className={inputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Придумайте логин"
                 />
               </div>
             </div>
 
+            {/* Password */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Password
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Пароль
               </label>
               <div className="relative">
-                <FiLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiLock
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                 <input
                   type="password"
                   name="password"
                   value={formData.password}
                   onChange={handleChange}
                   required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Create a password"
+                  className={inputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Придумайте пароль"
                 />
               </div>
             </div>
 
+            {/* Confirm Password */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Confirm Password
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                Подтвердите пароль
               </label>
               <div className="relative">
-                <FiLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <FiLock
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2"
+                  style={{ color: "var(--text-muted)" }}
+                />
                 <input
                   type="password"
                   name="confirmPassword"
                   value={formData.confirmPassword}
                   onChange={handleChange}
                   required
-                  className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors"
-                  placeholder="Confirm your password"
+                  className={inputStyles}
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    borderColor: "var(--border)",
+                    color: "var(--text-primary)",
+                  }}
+                  onFocus={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border-focus)";
+                    e.currentTarget.style.boxShadow = `0 0 0 3px ${e.currentTarget.style.borderColor}20`;
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.style.borderColor = "var(--border)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }}
+                  placeholder="Повторите пароль"
                 />
               </div>
               {passwordError && (
-                <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                <p
+                  className="mt-2 text-sm flex items-center gap-1"
+                  style={{ color: "var(--error-text)" }}
+                >
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                  </svg>
                   {passwordError}
                 </p>
               )}
@@ -171,14 +304,29 @@ export const RegisterPage: React.FC = () => {
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+              style={{
+                backgroundColor: "var(--button-primary)",
+                color: "var(--button-primary-text)",
+              }}
+              onMouseEnter={(e) => {
+                if (!isLoading) {
+                  e.currentTarget.style.backgroundColor = "var(--button-primary-hover)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "var(--button-primary)";
+              }}
             >
               {isLoading ? (
-                "Creating account..."
+                <>
+                  <div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                  Регистрация...
+                </>
               ) : (
                 <>
                   <FiUserPlus />
-                  Sign Up
+                  Зарегистрироваться
                 </>
               )}
             </button>
@@ -186,13 +334,20 @@ export const RegisterPage: React.FC = () => {
 
           {/* Footer */}
           <div className="mt-6 text-center">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Already have an account?{" "}
+            <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+              Уже есть аккаунт?{" "}
               <Link
                 to="/auth"
-                className="text-gray-900 dark:text-white hover:underline font-medium"
+                className="font-medium hover:underline transition-colors"
+                style={{ color: "var(--link)" }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = "var(--link-hover)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = "var(--link)";
+                }}
               >
-                Sign in
+                Войти
               </Link>
             </p>
           </div>

frontend/src/shared/layouts/DefaultLayout.tsx

@@ -13,33 +13,53 @@ export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
 
   const handleLogout = () => {
     logout();
-    navigate("/login");
+    navigate("/auth");
   };
 
   return (
-    <div className="min-h-screen bg-white dark:bg-black transition-colors duration-200">
+    <div className="min-h-screen flex flex-col" style={{ backgroundColor: "var(--bg-primary)", color: "var(--text-primary)" }}>
       {/* Header */}
-      <header className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-black sticky top-0 z-50">
+      <header
+        className="border-b sticky top-0 z-50"
+        style={{
+          backgroundColor: "var(--header-bg)",
+          borderColor: "var(--border)",
+        }}
+      >
         <div className="container mx-auto px-4 py-3">
           <div className="flex justify-between items-center">
             {/* Logo */}
-            <div className="text-xl font-bold text-gray-900 dark:text-white">
+            <div
+              className="text-xl font-bold cursor-pointer hover:opacity-80 transition-opacity"
+              style={{ color: "var(--text-primary)" }}
+              onClick={() => navigate("/")}
+            >
               HellreigN
             </div>
 
             {/* Right side */}
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-3">
               <ThemeToggle />
               {user && (
                 <div className="flex items-center gap-3">
-                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                  <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
                     {user.firstName} {user.lastName}
                   </span>
                   <button
                     onClick={handleLogout}
-                    className="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
+                    className="px-3 py-1.5 text-sm rounded-lg transition-colors font-medium"
+                    style={{
+                      backgroundColor: "var(--button-danger)",
+                      color: "var(--button-danger-text)",
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.backgroundColor = "var(--button-danger-hover)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = "var(--button-danger)";
+                    }}
                   >
-                    Logout
+                    Выйти
                   </button>
                 </div>
               )}
@@ -49,7 +69,22 @@ export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
       </header>
 
       {/* Main content */}
-      <main className="min-h-[calc(100vh-61px)]">{children || <Outlet />}</main>
+      <main className="flex-1">{children || <Outlet />}</main>
+
+      {/* Footer */}
+      <footer
+        className="border-t py-4 mt-auto"
+        style={{
+          backgroundColor: "var(--bg-secondary)",
+          borderColor: "var(--border)",
+        }}
+      >
+        <div className="container mx-auto px-4">
+          <p className="text-center text-sm" style={{ color: "var(--text-muted)" }}>
+            © 2026 HellreigN. Все права защищены.
+          </p>
+        </div>
+      </footer>
     </div>
   );
 };

frontend/src/shared/styles/themes.css

@@ -1,16 +1,9 @@
 @import "tailwindcss";
 
-/* Кастомные темы для dark mode */
-@custom-variant dark (&:where(.dark, .dark *));
+/* Tailwind dark mode через data-theme атрибут */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
-/* Базовые стили */
-@layer base {
-  body {
-    @apply bg-white dark:bg-black text-gray-900 dark:text-white;
-  }
-}
-
-/* Кастомные утилиты (опционально) */
+/* Кастомные утилиты */
 @layer utilities {
   .transition-theme {
     transition-property: background-color, border-color, color, fill, stroke;
@@ -19,36 +12,256 @@
   }
 }
 
-:root {
+/* ===========================
+   БАЗОВЫЕ ТЕМЫ (Light/Dark)
+   =========================== */
+
+/* Светлая тема (по умолчанию) */
+:root,
+[data-theme="light"] {
   --bg-primary: #ffffff;
-  --bg-secondary: #f5f5f5;
-  --text-primary: #000000;
-  --text-secondary: #333333;
-  --border: #e5e5e5;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+  --border: #e2e8f0;
+  --border-focus: #94a3b8;
   --card-bg: #ffffff;
   --input-bg: #ffffff;
-  --button-bg: #000000;
-  --button-text: #ffffff;
-  --button-hover: #333333;
+  --header-bg: #ffffff;
+  --button-primary: #0f172a;
+  --button-primary-text: #ffffff;
+  --button-primary-hover: #1e293b;
+  --button-danger: #ef4444;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #dc2626;
+  --error-bg: #fef2f2;
+  --error-border: #fecaca;
+  --error-text: #dc2626;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --link: #0f172a;
+  --link-hover: #475569;
 }
 
+/* Темная тема */
 [data-theme="dark"] {
-  --bg-primary: #000000;
-  --bg-secondary: #1a1a1a;
-  --text-primary: #ffffff;
-  --text-secondary: #cccccc;
-  --border: #333333;
-  --card-bg: #0a0a0a;
-  --input-bg: #1a1a1a;
-  --button-bg: #ffffff;
-  --button-text: #000000;
-  --button-hover: #cccccc;
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-muted: #64748b;
+  --border: #334155;
+  --border-focus: #64748b;
+  --card-bg: #1e293b;
+  --input-bg: #1e293b;
+  --header-bg: #0f172a;
+  --button-primary: #f8fafc;
+  --button-primary-text: #0f172a;
+  --button-primary-hover: #e2e8f0;
+  --button-danger: #ef4444;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #f87171;
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-border: rgba(239, 68, 68, 0.3);
+  --error-text: #fca5a5;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --accent: #818cf8;
+  --accent-hover: #a5b4fc;
+  --link: #f8fafc;
+  --link-hover: #cbd5e1;
 }
 
+/* ===========================
+   ЦВЕТНЫЕ ТЕМЫ
+   =========================== */
+
+/* Night Owl */
+[data-theme="nightowl"] {
+  --bg-primary: #011627;
+  --bg-secondary: #011e3c;
+  --bg-tertiary: #0d2f4f;
+  --text-primary: #d6deeb;
+  --text-secondary: #8892b0;
+  --text-muted: #4a5568;
+  --border: #1d3b53;
+  --border-focus: #7dd3fc;
+  --card-bg: #011e3c;
+  --input-bg: #011e3c;
+  --header-bg: #011627;
+  --button-primary: #7dd3fc;
+  --button-primary-text: #011627;
+  --button-primary-hover: #bae6fd;
+  --button-danger: #f87171;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #fca5a5;
+  --error-bg: rgba(248, 113, 113, 0.1);
+  --error-border: rgba(248, 113, 113, 0.3);
+  --error-text: #fca5a5;
+  --shadow-color: rgba(0, 0, 0, 0.4);
+  --accent: #7dd3fc;
+  --accent-hover: #bae6fd;
+  --link: #7dd3fc;
+  --link-hover: #bae6fd;
+}
+
+/* Sunset */
+[data-theme="sunset"] {
+  --bg-primary: #1c1917;
+  --bg-secondary: #292524;
+  --bg-tertiary: #44403c;
+  --text-primary: #fafaf9;
+  --text-secondary: #d6d3d1;
+  --text-muted: #78716c;
+  --border: #57534e;
+  --border-focus: #f97316;
+  --card-bg: #292524;
+  --input-bg: #292524;
+  --header-bg: #1c1917;
+  --button-primary: #f97316;
+  --button-primary-text: #1c1917;
+  --button-primary-hover: #fb923c;
+  --button-danger: #ef4444;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #f87171;
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-border: rgba(239, 68, 68, 0.3);
+  --error-text: #fca5a5;
+  --shadow-color: rgba(0, 0, 0, 0.4);
+  --accent: #f97316;
+  --accent-hover: #fb923c;
+  --link: #f97316;
+  --link-hover: #fb923c;
+}
+
+/* Forest */
+[data-theme="forest"] {
+  --bg-primary: #052e16;
+  --bg-secondary: #14532d;
+  --bg-tertiary: #166534;
+  --text-primary: #f0fdf4;
+  --text-secondary: #bbf7d0;
+  --text-muted: #4ade80;
+  --border: #166534;
+  --border-focus: #22c55e;
+  --card-bg: #14532d;
+  --input-bg: #14532d;
+  --header-bg: #052e16;
+  --button-primary: #22c55e;
+  --button-primary-text: #052e16;
+  --button-primary-hover: #4ade80;
+  --button-danger: #ef4444;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #f87171;
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-border: rgba(239, 68, 68, 0.3);
+  --error-text: #fca5a5;
+  --shadow-color: rgba(0, 0, 0, 0.4);
+  --accent: #22c55e;
+  --accent-hover: #4ade80;
+  --link: #22c55e;
+  --link-hover: #4ade80;
+}
+
+/* Ocean */
+[data-theme="ocean"] {
+  --bg-primary: #164e63;
+  --bg-secondary: #0e7490;
+  --bg-tertiary: #0891b2;
+  --text-primary: #f0fdfd;
+  --text-secondary: #a5f3fc;
+  --text-muted: #22d3ee;
+  --border: #0891b2;
+  --border-focus: #06b6d4;
+  --card-bg: #0e7490;
+  --input-bg: #0e7490;
+  --header-bg: #164e63;
+  --button-primary: #06b6d4;
+  --button-primary-text: #164e63;
+  --button-primary-hover: #22d3ee;
+  --button-danger: #ef4444;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #f87171;
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-border: rgba(239, 68, 68, 0.3);
+  --error-text: #fca5a5;
+  --shadow-color: rgba(0, 0, 0, 0.4);
+  --accent: #06b6d4;
+  --accent-hover: #22d3ee;
+  --link: #06b6d4;
+  --link-hover: #22d3ee;
+}
+
+/* Lavender */
+[data-theme="lavender"] {
+  --bg-primary: #faf5ff;
+  --bg-secondary: #f3e8ff;
+  --bg-tertiary: #e9d5ff;
+  --text-primary: #581c87;
+  --text-secondary: #7e22ce;
+  --text-muted: #a855f7;
+  --border: #e9d5ff;
+  --border-focus: #a855f7;
+  --card-bg: #f3e8ff;
+  --input-bg: #f3e8ff;
+  --header-bg: #faf5ff;
+  --button-primary: #a855f7;
+  --button-primary-text: #faf5ff;
+  --button-primary-hover: #c084fc;
+  --button-danger: #ef4444;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #f87171;
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-border: rgba(239, 68, 68, 0.3);
+  --error-text: #dc2626;
+  --shadow-color: rgba(88, 28, 135, 0.1);
+  --accent: #a855f7;
+  --accent-hover: #c084fc;
+  --link: #7e22ce;
+  --link-hover: #a855f7;
+}
+
+/* Coffee */
+[data-theme="coffee"] {
+  --bg-primary: #292524;
+  --bg-secondary: #44403c;
+  --bg-tertiary: #57534e;
+  --text-primary: #f5f5f4;
+  --text-secondary: #d6d3d1;
+  --text-muted: #a8a29e;
+  --border: #57534e;
+  --border-focus: #d97706;
+  --card-bg: #44403c;
+  --input-bg: #44403c;
+  --header-bg: #292524;
+  --button-primary: #d97706;
+  --button-primary-text: #292524;
+  --button-primary-hover: #fbbf24;
+  --button-danger: #ef4444;
+  --button-danger-text: #ffffff;
+  --button-danger-hover: #f87171;
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-border: rgba(239, 68, 68, 0.3);
+  --error-text: #fca5a5;
+  --shadow-color: rgba(0, 0, 0, 0.4);
+  --accent: #d97706;
+  --accent-hover: #fbbf24;
+  --link: #d97706;
+  --link-hover: #fbbf24;
+}
+
+/* ===========================
+   БАЗОВЫЕ СТИЛИ
+   =========================== */
+
 body {
   background-color: var(--bg-primary);
   color: var(--text-primary);
   transition:
     background-color 0.3s ease,
-    color 0.3s ease;
+    color 0.3s ease,
+    border-color 0.3s ease;
 }