From beecbb3b869dc3b13b51bf2b88b6ad872df755ec Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Thu, 30 Oct 2025 00:22:00 +0500
Subject: [PATCH] 	modified:  
 main_dc/yalarba/easySite/easySite/app/assets/css/components.css 
 modified:   main_dc/yalarba/easySite/easySite/app/assets/css/main.css 
 modified:   main_dc/yalarba/easySite/easySite/app/assets/css/travel.css 
 modified:   main_dc/yalarba/easySite/easySite/app/assets/css/typography.css 
 modified:   main_dc/yalarba/easySite/easySite/app/assets/css/variables.css 
 modified:  
 main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue 
 modified:  
 main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue 	new
 file:   main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts 
 modified:   main_dc/yalarba/easySite/easySite/app/pages/index.vue 	new
 file:   main_dc/yalarba/easySite/easySite/app/plugins/theme.client.ts add
 dark theme for easysite

---
 .../easySite/app/assets/css/components.css    |  33 +++++
 .../easySite/easySite/app/assets/css/main.css |  29 +++--
 .../easySite/app/assets/css/travel.css        |  26 +++-
 .../easySite/app/assets/css/typography.css    |  41 ++++++
 .../easySite/app/assets/css/variables.css     | 123 ++++++++++++++++--
 .../easySite/app/components/layout/Footer.vue |  56 +++++---
 .../easySite/app/components/layout/Header.vue |  94 ++++++++++++-
 .../easySite/app/composables/useTheme.ts      |  30 +++++
 .../easySite/easySite/app/pages/index.vue     |  12 +-
 .../easySite/app/plugins/theme.client.ts      |  20 +++
 10 files changed, 413 insertions(+), 51 deletions(-)
 create mode 100644 main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts
 create mode 100644 main_dc/yalarba/easySite/easySite/app/plugins/theme.client.ts

diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/components.css b/main_dc/yalarba/easySite/easySite/app/assets/css/components.css
index ac33599..41d776b 100644
--- a/main_dc/yalarba/easySite/easySite/app/assets/css/components.css
+++ b/main_dc/yalarba/easySite/easySite/app/assets/css/components.css
@@ -166,3 +166,36 @@
   color: var(--primary-600);
   background: var(--primary-50);
 }
+
+/* Дополнения для темной темы */
+.form-input,
+.form-select {
+  background: var(--bg-primary);
+  border-color: var(--border-medium);
+  color: var(--text-primary);
+  transition: all 0.3s ease;
+}
+
+.form-input:focus,
+.form-select:focus {
+  border-color: var(--primary-500);
+  box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
+}
+
+.card {
+  background: var(--bg-primary);
+  border-color: var(--border-light);
+  transition: all 0.3s ease;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
+}
+
+.btn-outline:hover {
+  background: var(--bg-secondary);
+  border-color: var(--primary-500);
+  color: var(--primary-500);
+}
diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/main.css b/main_dc/yalarba/easySite/easySite/app/assets/css/main.css
index caadb09..1de6518 100644
--- a/main_dc/yalarba/easySite/easySite/app/assets/css/main.css
+++ b/main_dc/yalarba/easySite/easySite/app/assets/css/main.css
@@ -8,27 +8,33 @@
   --gray-800: #1f2937;
   --gray-900: #111827;
   --white: #ffffff;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-color 0.3s ease;
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-color 0.3s ease;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1.6;
-  color: var(--gray-900);
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  transition: color 0.3s ease, background-color 0.3s ease;
 }
 
+/* Обновляем остальные стили для поддержки темы */
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
 }
 
-/* Базовые компоненты */
 .btn {
   display: inline-block;
   padding: 0.75rem 1.5rem;
@@ -37,21 +43,24 @@ body {
   text-decoration: none;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
 }
 
 .btn-primary {
-  background: var(--primary);
-  color: var(--white);
+  background: var(--primary-500);
+  color: var(--text-inverse);
 }
 
 .btn-primary:hover {
-  background: var(--primary-dark);
+  background: var(--primary-600);
+  transform: translateY(-1px);
 }
 
 .card {
-  background: var(--white);
+  background: var(--bg-primary);
   border-radius: 0.5rem;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  box-shadow: var(--shadow-sm);
   padding: 1.5rem;
-}
\ No newline at end of file
+  border: 1px solid var(--border-light);
+  transition: all 0.3s ease;
+}
diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/travel.css b/main_dc/yalarba/easySite/easySite/app/assets/css/travel.css
index 55df4fc..d13f6e3 100644
--- a/main_dc/yalarba/easySite/easySite/app/assets/css/travel.css
+++ b/main_dc/yalarba/easySite/easySite/app/assets/css/travel.css
@@ -1,14 +1,18 @@
 /* assets/css/travel.css */
 /* Герой-секция с фоном */
 .hero-section {
-  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--primary-500) 0%,
+    var(--primary-700) 100%
+  );
   color: var(--text-inverse);
   position: relative;
   overflow: hidden;
 }
 
 .hero-section::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -116,4 +120,20 @@
   font-weight: 600;
   color: var(--text-primary);
   margin-left: var(--space-xs);
-}
\ No newline at end of file
+}
+
+/* Дополнения для темной темы */
+.search-filters {
+  background: var(--bg-secondary);
+  border-color: var(--border-light);
+}
+
+.category-card {
+  background: var(--bg-primary);
+  border-color: var(--border-light);
+}
+
+.category-card:hover {
+  border-color: var(--primary-300);
+  background: var(--bg-secondary);
+}
diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/typography.css b/main_dc/yalarba/easySite/easySite/app/assets/css/typography.css
index 118256b..0804071 100644
--- a/main_dc/yalarba/easySite/easySite/app/assets/css/typography.css
+++ b/main_dc/yalarba/easySite/easySite/app/assets/css/typography.css
@@ -211,3 +211,44 @@ li {
 .text-success {
   color: var(--success-600);
 }
+
+/* Дополнения для темной темы */
+body {
+  color: var(--text-primary);
+  background: var(--bg-primary);
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  color: var(--text-primary);
+}
+
+p {
+  color: var(--text-secondary);
+}
+
+.lead {
+  color: var(--text-secondary);
+}
+
+.small {
+  color: var(--text-tertiary);
+}
+
+a {
+  color: var(--primary-500);
+}
+
+a:hover {
+  color: var(--primary-400);
+}
diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/variables.css b/main_dc/yalarba/easySite/easySite/app/assets/css/variables.css
index e6053f4..a3692af 100644
--- a/main_dc/yalarba/easySite/easySite/app/assets/css/variables.css
+++ b/main_dc/yalarba/easySite/easySite/app/assets/css/variables.css
@@ -6,7 +6,7 @@
   --primary-200: #bae6fd;
   --primary-300: #7dd3fc;
   --primary-400: #38bdf8;
-  --primary-500: #0ea5e9;    /* Основной синий - небо/вода */
+  --primary-500: #0ea5e9; /* Основной синий - небо/вода */
   --primary-600: #0284c7;
   --primary-700: #0369a1;
   --primary-800: #075985;
@@ -17,7 +17,7 @@
   --secondary-100: #fef9c3;
   --secondary-200: #fef08a;
   --secondary-300: #fde047;
-  --secondary-400: #facc15;   /* Золотой - солнце/песок */
+  --secondary-400: #facc15; /* Золотой - солнце/песок */
   --secondary-500: #eab308;
   --secondary-600: #ca8a04;
   --secondary-700: #a16207;
@@ -29,7 +29,7 @@
   --accent-100: #dcfce7;
   --accent-200: #bbf7d0;
   --accent-300: #86efac;
-  --accent-400: #4ade80;     /* Зеленый - природа/растения */
+  --accent-400: #4ade80; /* Зеленый - природа/растения */
   --accent-500: #22c55e;
   --accent-600: #16a34a;
   --accent-700: #15803d;
@@ -52,15 +52,15 @@
   --success-50: #f0fdf4;
   --success-500: #22c55e;
   --success-600: #16a34a;
-  
+
   --warning-50: #fffbeb;
   --warning-500: #f59e0b;
   --warning-600: #d97706;
-  
+
   --error-50: #fef2f2;
   --error-500: #ef4444;
   --error-600: #dc2626;
-  
+
   --info-50: #eff6ff;
   --info-500: #3b82f6;
   --info-600: #2563eb;
@@ -69,7 +69,7 @@
   --bg-primary: #ffffff;
   --bg-secondary: #f8fafc;
   --bg-tertiary: #f1f5f9;
-  
+
   /* Текстовые цвета */
   --text-primary: #0f172a;
   --text-secondary: #475569;
@@ -84,7 +84,8 @@
   /* Тени */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
 
   /* Радиусы */
   --radius-sm: 0.375rem;
@@ -99,4 +100,108 @@
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-2xl: 3rem;
-}
\ No newline at end of file
+
+  &[data-theme="dark"] {
+    /* Основные цвета - темная тема */
+    --primary-50: #0c4a6e;
+    --primary-100: #075985;
+    --primary-200: #0369a1;
+    --primary-300: #0284c7;
+    --primary-400: #0ea5e9;
+    --primary-500: #38bdf8;
+    --primary-600: #7dd3fc;
+    --primary-700: #bae6fd;
+    --primary-800: #e0f2fe;
+    --primary-900: #f0f9ff;
+
+    /* Вторичные цвета - темная тема */
+    --secondary-50: #713f12;
+    --secondary-100: #854d0e;
+    --secondary-200: #a16207;
+    --secondary-300: #ca8a04;
+    --secondary-400: #eab308;
+    --secondary-500: #facc15;
+    --secondary-600: #fde047;
+    --secondary-700: #fef08a;
+    --secondary-800: #fef9c3;
+    --secondary-900: #fefce8;
+
+    /* Акцентные цвета - темная тема */
+    --accent-50: #14532d;
+    --accent-100: #166534;
+    --accent-200: #15803d;
+    --accent-300: #16a34a;
+    --accent-400: #22c55e;
+    --accent-500: #4ade80;
+    --accent-600: #86efac;
+    --accent-700: #bbf7d0;
+    --accent-800: #dcfce7;
+    --accent-900: #f0fdf4;
+
+    /* Нейтральные цвета - темная тема */
+    --gray-50: #0f172a;
+    --gray-100: #1e293b;
+    --gray-200: #334155;
+    --gray-300: #475569;
+    --gray-400: #64748b;
+    --gray-500: #94a3b8;
+    --gray-600: #cbd5e1;
+    --gray-700: #e2e8f0;
+    --gray-800: #f1f5f9;
+    --gray-900: #f8fafc;
+
+    /* Семантические цвета - темная тема */
+    --success-50: #14532d;
+    --success-500: #4ade80;
+    --success-600: #86efac;
+
+    --warning-50: #713f12;
+    --warning-500: #facc15;
+    --warning-600: #fde047;
+
+    --error-50: #7f1d1d;
+    --error-500: #f87171;
+    --error-600: #fca5a5;
+
+    --info-50: #1e3a8a;
+    --info-500: #60a5fa;
+    --info-600: #93c5fd;
+
+    /* Фоновые цвета - темная тема */
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-tertiary: #334155;
+
+    /* Текстовые цвета - темная тема */
+    --text-primary: #f8fafc;
+    --text-secondary: #e2e8f0;
+    --text-tertiary: #cbd5e1;
+    --text-inverse: #0f172a;
+
+    /* Границы - темная тема */
+    --border-light: #334155;
+    --border-medium: #475569;
+    --border-dark: #64748b;
+
+    /* Тени - темная тема */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3),
+      0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3),
+      0 4px 6px -4px rgb(0 0 0 / 0.3);
+  }
+
+  /* Градиенты для hero-секции */
+  --hero-gradient: linear-gradient(
+    135deg,
+    var(--primary-500) 0%,
+    var(--primary-700) 100%
+  );
+  --hero-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%230ea5e9" points="0,1000 1000,0 1000,1000"/></svg>');
+
+  /* Темная тема */
+  &[data-theme="dark"] {
+    --hero-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+    --hero-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%23374151" points="0,1000 1000,0 1000,1000"/></svg>');
+  }
+}
diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
index 3652b3c..df40c10 100644
--- a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
@@ -118,9 +118,11 @@
 
 <style scoped>
 .footer {
-  background: var(--gray-900);
-  color: var(--text-inverse);
+  background: var(--bg-primary);
+  color: var(--text-primary);
   margin-top: auto;
+  border-top: 1px solid var(--border-light);
+  transition: all 0.3s ease;
 }
 
 .footer-content {
@@ -151,6 +153,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.3s ease;
 }
 
 .logo-text {
@@ -162,12 +165,15 @@
 .logo-name {
   font-weight: bold;
   font-size: 1.5rem;
+  color: var(--text-primary);
+  transition: color 0.3s ease;
 }
 
 .footer-description {
-  color: var(--gray-400);
+  color: var(--text-secondary);
   line-height: 1.6;
   font-size: 0.9rem;
+  transition: color 0.3s ease;
 }
 
 .social-links {
@@ -181,15 +187,18 @@
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
-  background: var(--gray-700);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
   border-radius: 50%;
-  transition: all 0.3s;
+  transition: all 0.3s ease;
   text-decoration: none;
 }
 
 .social-link:hover {
   background: var(--primary-500);
+  border-color: var(--primary-500);
   transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
 .social-icon {
@@ -200,7 +209,8 @@
   font-size: 1.125rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
-  color: var(--text-inverse);
+  color: var(--text-primary);
+  transition: color 0.3s ease;
 }
 
 .footer-title-margin {
@@ -221,28 +231,33 @@
 }
 
 .info-label {
-  color: var(--gray-400);
+  color: var(--text-secondary);
   min-width: 80px;
+  transition: color 0.3s ease;
 }
 
 .info-value {
-  color: var(--gray-300);
+  color: var(--text-secondary);
   line-height: 1.4;
+  transition: color 0.3s ease;
 }
 
 .info-icon {
   font-size: 1rem;
   min-width: 1.5rem;
+  color: var(--text-tertiary);
+  transition: color 0.3s ease;
 }
 
 .info-link {
-  color: var(--gray-300);
+  color: var(--text-secondary);
   text-decoration: none;
-  transition: color 0.3s;
+  transition: all 0.3s ease;
 }
 
 .info-link:hover {
-  color: var(--primary-400);
+  color: var(--primary-500);
+  text-decoration: underline;
 }
 
 .footer-links {
@@ -252,9 +267,9 @@
 }
 
 .footer-link {
-  color: var(--gray-400);
+  color: var(--text-secondary);
   text-decoration: none;
-  transition: all 0.3s;
+  transition: all 0.3s ease;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
@@ -262,13 +277,14 @@
 }
 
 .footer-link:hover {
-  color: var(--primary-400);
+  color: var(--primary-500);
   transform: translateX(4px);
 }
 
 .footer-bottom {
-  border-top: 1px solid var(--gray-700);
+  border-top: 1px solid var(--border-light);
   padding: 1.5rem 0;
+  transition: border-color 0.3s ease;
 }
 
 .footer-bottom-content {
@@ -278,8 +294,9 @@
 }
 
 .copyright {
-  color: var(--gray-500);
+  color: var(--text-tertiary);
   font-size: 0.875rem;
+  transition: color 0.3s ease;
 }
 
 .footer-bottom-links {
@@ -288,14 +305,15 @@
 }
 
 .footer-bottom-link {
-  color: var(--gray-500);
+  color: var(--text-tertiary);
   text-decoration: none;
   font-size: 0.875rem;
-  transition: color 0.3s;
+  transition: all 0.3s ease;
 }
 
 .footer-bottom-link:hover {
-  color: var(--gray-300);
+  color: var(--primary-500);
+  text-decoration: underline;
 }
 
 /* Адаптивность */
diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
index b4f4d9b..972f802 100644
--- a/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
@@ -12,6 +12,15 @@
 
         <!-- Навигация -->
         <nav class="nav">
+          <!-- Переключатель темы -->
+          <button @click="toggleTheme" class="theme-toggle" :title="theme === 'light' ? 'Темная тема' : 'Светлая тема'">
+            <span class="theme-icon" :class="theme">
+              <span class="sun">☀️</span>
+              <span class="moon">🌙</span>
+            </span>
+            <span class="theme-text">{{ theme === 'light' ? 'Темная' : 'Светлая' }}</span>
+          </button>
+
           <NuxtLink to="/profile" class="nav-link">
             👤 Профиль
           </NuxtLink>
@@ -28,18 +37,19 @@
 </template>
 
 <script setup lang="ts">
-// Простой хедер без проверки авторизации
+const { theme, toggleTheme } = useTheme()
 </script>
 
 <style scoped>
 .header {
-  background: var(--bg-primary);
+  background: var(--bg-primary); /* Теперь использует основной фон */
   box-shadow: var(--shadow-sm);
   position: sticky;
   top: 0;
   z-index: 50;
   border-bottom: 1px solid var(--border-light);
   width: 100%;
+  transition: all 0.3s ease;
 }
 
 .header-content {
@@ -56,10 +66,11 @@
   gap: 0.75rem;
   text-decoration: none;
   color: var(--text-primary);
+  transition: color 0.3s ease;
 }
 
 .logo:hover {
-  color: var(--text-primary);
+  color: var(--primary-500);
 }
 
 .logo-icon {
@@ -71,6 +82,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  transition: all 0.3s ease;
 }
 
 .logo-text {
@@ -83,6 +95,7 @@
   font-weight: bold;
   font-size: 1.5rem;
   white-space: nowrap;
+  transition: color 0.3s ease;
 }
 
 .nav {
@@ -97,19 +110,82 @@
   text-decoration: none;
   padding: 0.5rem 1rem;
   border-radius: var(--radius-md);
-  transition: all 0.2s;
+  transition: all 0.3s ease;
   font-weight: 500;
   white-space: nowrap;
 }
 
 .nav-link:hover {
-  color: var(--primary-600);
+  color: var(--primary-500);
   background: var(--primary-50);
 }
 
 .nav-button {
   white-space: nowrap;
   flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+/* Стили для переключателя темы */
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.theme-toggle:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--primary-300);
+  color: var(--text-primary);
+}
+
+.theme-icon {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-icon .sun,
+.theme-icon .moon {
+  position: absolute;
+  transition: all 0.3s ease;
+  font-size: 1rem;
+}
+
+.theme-icon.light .sun {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.theme-icon.light .moon {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.theme-icon.dark .sun {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.theme-icon.dark .moon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.theme-text {
+  white-space: nowrap;
 }
 
 @media (max-width: 768px) {
@@ -138,6 +214,14 @@
   .logo-text {
     font-size: 1rem;
   }
+  
+  .theme-text {
+    display: none;
+  }
+  
+  .theme-toggle {
+    padding: 0.5rem;
+  }
 }
 
 @media (max-width: 480px) {
diff --git a/main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts b/main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts
new file mode 100644
index 0000000..1912ae1
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts
@@ -0,0 +1,30 @@
+// composables/useTheme.ts
+export const useTheme = () => {
+    const theme = ref<'light' | 'dark'>('light')
+
+    const setTheme = (newTheme: 'light' | 'dark') => {
+        theme.value = newTheme
+        document.documentElement.setAttribute('data-theme', newTheme)
+        localStorage.setItem('theme', newTheme)
+    }
+
+    const toggleTheme = () => {
+        const newTheme = theme.value === 'light' ? 'dark' : 'light'
+        setTheme(newTheme)
+    }
+
+    // Инициализация темы при загрузке
+    onMounted(() => {
+        const savedTheme = localStorage.getItem('theme') as 'light' | 'dark'
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+        const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light')
+        setTheme(initialTheme)
+    })
+
+    return {
+        theme: readonly(theme),
+        toggleTheme,
+        setTheme
+    }
+}
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/index.vue b/main_dc/yalarba/easySite/easySite/app/pages/index.vue
index 944623c..2372113 100644
--- a/main_dc/yalarba/easySite/easySite/app/pages/index.vue
+++ b/main_dc/yalarba/easySite/easySite/app/pages/index.vue
@@ -8,7 +8,9 @@
       <div class="container">
         <div class="hero-content">
           <div class="hero-text">
-            <h1 class="hero-title">Создавай аккаунт, добавляй объекты и получи сайт на каждый добавленный объект</h1>
+            <h1 class="hero-title">Создавай аккаунт</h1>
+            <h1 class="hero-title">Добавляй услуги</h1>
+            <h1 class="hero-title">Получи сайт</h1>
             <p class="hero-subtitle">Диджитал присутвие в интернете легко и доступно</p>
           </div>
         </div>
@@ -44,14 +46,14 @@ const handleSearch = () => {
 
 /* Hero секция занимает всю доступную высоту */
 .hero-section {
-  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
+  background: var(--hero-gradient);
   color: var(--text-inverse);
   position: relative;
   overflow: hidden;
-  flex: 1 0 auto; /* Занимает всё доступное пространство */
+  flex: 1 0 auto;
   display: flex;
   align-items: center;
-  min-height: calc(100vh - 80px); /* Минимальная высота минус хедер */
+  min-height: calc(100vh - 80px);
 }
 
 .hero-section::before {
@@ -61,7 +63,7 @@ const handleSearch = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%230ea5e9" points="0,1000 1000,0 1000,1000"/></svg>');
+  background: var(--hero-pattern);
   opacity: 0.1;
 }
 
diff --git a/main_dc/yalarba/easySite/easySite/app/plugins/theme.client.ts b/main_dc/yalarba/easySite/easySite/app/plugins/theme.client.ts
new file mode 100644
index 0000000..64d6b7e
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/plugins/theme.client.ts
@@ -0,0 +1,20 @@
+// plugins/theme.client.ts
+export default defineNuxtPlugin(() => {
+  const initializeTheme = () => {
+    const savedTheme = localStorage.getItem('theme')
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    
+    const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light')
+    document.documentElement.setAttribute('data-theme', theme)
+  }
+  
+  // Инициализируем при загрузке
+  initializeTheme()
+  
+  // Слушаем изменения системной темы
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+      document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light')
+    }
+  })
+})
\ No newline at end of file