# feature: add dark/light theme support

Realized by prefers-color-scheme media queries with Tailwind CSS

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-950 text-white font-sans antialiased min-h-screen">
+  <div class="bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white font-sans antialiased min-h-screen">
     <AppHeader />
     <HeroSection />
     <FeaturesSection />

src/components/AppFooter.vue

@@ -1,16 +1,16 @@
 <template>
-  <footer id="footer" class="border-t border-gray-800 px-6 py-12 md:px-12">
+  <footer id="footer" class="border-t border-gray-200 dark:border-gray-800 px-6 py-12 md:px-12">
     <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-3">
       <div class="flex items-center gap-3">
         <img src="/images/logo.png" alt="uVPN logo" class="size-8" />
         <span class="text-lg font-bold">uVPN</span>
       </div>
-      <div class="flex gap-6 text-gray-400 text-sm">
-        <a href="#" class="hover:text-white transition">Политика конфиденциальности</a>
-        <a href="#" class="hover:text-white transition">Условия использования</a>
-        <a href="#" class="hover:text-white transition">Поддержка</a>
+      <div class="flex gap-6 text-gray-500 dark:text-gray-400 text-sm">
+        <a href="#" class="hover:text-gray-900 dark:text-white transition">Политика конфиденциальности</a>
+        <a href="#" class="hover:text-gray-900 dark:text-white transition">Условия использования</a>
+        <a href="#" class="hover:text-gray-900 dark:text-white transition">Поддержка</a>
       </div>
-      <p class="text-gray-500 text-sm">
+      <p class="text-gray-500 dark:text-gray-400 text-sm">
         © 2026 uVPN. Все права защищены.
       </p>
     </div>

src/components/AppHeader.vue

@@ -1,21 +1,21 @@
 <template>
-  <header class="flex items-center justify-between px-6 py-4 md:px-12 border-b border-gray-800 sticky top-0 bg-gray-900/80 backdrop-blur-xs z-50">
+  <header class="flex items-center justify-between px-6 py-4 md:px-12 border-b border-gray-200 dark:border-gray-800 sticky top-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xs z-50">
     <div class="flex items-center gap-3">
       <img src="/images/logo.png" alt="uVPN logo" class="size-8" />
       <span class="text-xl font-bold tracking-tight">uVPN</span>
     </div>
 
     <!-- Якорные ссылки -->
-    <nav class="hidden md:flex items-center gap-6 text-sm text-gray-300">
-      <a href="#hero" @click.prevent="scrollTo('hero')" class="hover:text-white transition">Главная</a>
-      <a href="#features" @click.prevent="scrollTo('features')" class="hover:text-white transition">Преимущества</a>
-      <a href="#pricing" @click.prevent="scrollTo('pricing')" class="hover:text-white transition">Тарифы</a>
-      <a href="#steps" @click.prevent="scrollTo('steps')" class="hover:text-white transition">Как начать</a>
-      <a href="#testimonials" @click.prevent="scrollTo('testimonials')" class="hover:text-white transition">Отзывы</a>
-      <a href="#footer" @click.prevent="scrollTo('footer')" class="hover:text-white transition">Контакты</a>
+    <nav class="hidden md:flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
+      <a href="#hero" @click.prevent="scrollTo('hero')" class="hover:text-gray-900 dark:text-white transition">Главная</a>
+      <a href="#features" @click.prevent="scrollTo('features')" class="hover:text-gray-900 dark:text-white transition">Преимущества</a>
+      <a href="#pricing" @click.prevent="scrollTo('pricing')" class="hover:text-gray-900 dark:text-white transition">Тарифы</a>
+      <a href="#steps" @click.prevent="scrollTo('steps')" class="hover:text-gray-900 dark:text-white transition">Как начать</a>
+      <a href="#testimonials" @click.prevent="scrollTo('testimonials')" class="hover:text-gray-900 dark:text-white transition">Отзывы</a>
+      <a href="#footer" @click.prevent="scrollTo('footer')" class="hover:text-gray-900 dark:text-white transition">Контакты</a>
     </nav>
 
-    <button class="bg-blue-600 hover:bg-blue-700 transition px-5 py-2 rounded-lg font-medium text-sm">
+    <button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition px-5 py-2 rounded-lg font-medium text-sm text-white">
       Попробовать бесплатно
     </button>
   </header>

src/components/FeaturesSection.vue

@@ -4,20 +4,20 @@
       Почему выбирают uVPN
     </h2>
     <div class="grid md:grid-cols-3 gap-8">
-      <div class="bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-800 transition border border-gray-800">
-        <Zap class="w-12 h-12 text-blue-500 mx-auto mb-4" />
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <Zap class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
         <h3 class="text-xl font-semibold mb-3">Высокая скорость</h3>
-        <p class="text-gray-400">Серверы в 90+ странах с пропускной способностью до 10 Гбит/с.</p>
+        <p class="text-gray-500 dark:text-gray-400">Серверы в 90+ странах с пропускной способностью до 10 Гбит/с.</p>
       </div>
-      <div class="bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-800 transition border border-gray-800">
-        <Shield class="w-12 h-12 text-blue-500 mx-auto mb-4" />
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <Shield class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
         <h3 class="text-xl font-semibold mb-3">Полная безопасность</h3>
-        <p class="text-gray-400">Шифрование AES-256 и политика отсутствия логов.</p>
+        <p class="text-gray-500 dark:text-gray-400">Шифрование AES-256 и политика отсутствия логов.</p>
       </div>
-      <div class="bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-800 transition border border-gray-800">
-        <Globe class="w-12 h-12 text-blue-500 mx-auto mb-4" />
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
+        <Globe class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
         <h3 class="text-xl font-semibold mb-3">Глобальный доступ</h3>
-        <p class="text-gray-400">Обходите цензуру и получайте доступ к любому контенту из любой точки мира.</p>
+        <p class="text-gray-500 dark:text-gray-400">Обходите цензуру и получайте доступ к любому контенту из любой точки мира.</p>
       </div>
     </div>
   </section>

src/components/HeroSection.vue

@@ -2,12 +2,12 @@
   <section id="hero" class="px-6 py-16 md:py-24 md:px-12 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
     <div>
       <h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6">
-        Безопасный и быстрый VPN <br /> от <span class="text-blue-500">uVPN</span>
+        Безопасный и быстрый VPN <br /> от <span class="text-blue-600 dark:text-blue-400">uVPN</span>
       </h1>
-      <p class="text-gray-400 text-lg mb-8 max-w-md">
+      <p class="text-gray-500 dark:text-gray-400 text-lg mb-8 max-w-md">
         Защитите свои данные, обходите блокировки и оставайтесь анонимными в сети с нашим современным VPN-сервисом на базе Xray.
       </p>
-      <button class="bg-blue-600 hover:bg-blue-700 transition px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 flex items-center gap-2">
+      <button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 flex items-center gap-2 text-white">
         <Zap class="w-5 h-5" /> Начать бесплатно
       </button>
       <p class="text-gray-500 text-sm mt-4">30-дневная гарантия возврата денег</p>

src/components/PricingSection.vue

@@ -5,42 +5,42 @@
     </h2>
     <div class="grid md:grid-cols-3 gap-8">
       <!-- Тариф Месяц -->
-      <div class="bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-800 hover:border-blue-600 transition">
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-200 dark:border-gray-800 hover:border-blue-600 transition">
         <h3 class="text-xl font-semibold mb-2">Месяц</h3>
-        <p class="text-4xl font-extrabold mb-4">$11.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
-        <ul class="text-gray-400 space-y-3 mb-8 flex-1">
+        <p class="text-4xl font-extrabold mb-4">$11.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
+        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Поддержка 24/7</li>
         </ul>
-        <button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium">
+        <button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium text-white">
           Выбрать
         </button>
       </div>
       <!-- Тариф Год (выделенный) -->
-      <div class="bg-gray-900 rounded-2xl p-8 flex flex-col border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20">
-        <span class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl">ПОПУЛЯРНЫЙ</span>
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20">
+        <span class="absolute top-0 right-0 bg-blue-600 dark:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl">ПОПУЛЯРНЫЙ</span>
         <h3 class="text-xl font-semibold mb-2">Год</h3>
-        <p class="text-4xl font-extrabold mb-4">$4.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
-        <ul class="text-gray-400 space-y-3 mb-8 flex-1">
+        <p class="text-4xl font-extrabold mb-4">$4.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
+        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Приоритетная поддержка</li>
         </ul>
-        <button class="w-full bg-blue-600 hover:bg-blue-700 transition py-3 rounded-xl font-bold">
+        <button class="w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition py-3 rounded-xl font-bold text-white">
           Выбрать тариф
         </button>
       </div>
       <!-- Тариф 2 года -->
-      <div class="bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-800 hover:border-blue-600 transition">
+      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-200 dark:border-gray-800 hover:border-blue-600 transition">
         <h3 class="text-xl font-semibold mb-2">2 года</h3>
-        <p class="text-4xl font-extrabold mb-4">$2.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
-        <ul class="text-gray-400 space-y-3 mb-8 flex-1">
+        <p class="text-4xl font-extrabold mb-4">$2.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
+        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
           <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Максимальная экономия</li>
         </ul>
-        <button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium">
+        <button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium text-white">
           Выбрать
         </button>
       </div>

src/components/StepsSection.vue

@@ -5,25 +5,25 @@
     </h2>
     <div class="grid md:grid-cols-3 gap-8 text-center">
       <div>
-        <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5">
-          <Download class="w-8 h-8" />
+        <div class="w-16 h-16 bg-blue-600 dark:bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5">
+          <Download class="w-8 h-8 text-white" />
         </div>
         <h3 class="text-xl font-semibold mb-3">Скачайте приложение</h3>
-        <p class="text-gray-400">Доступно на Windows, macOS, Android, iOS и Linux.</p>
+        <p class="text-gray-500 dark:text-gray-400">Доступно на Windows, macOS, Android, iOS и Linux.</p>
       </div>
       <div>
-        <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5">
-          <CreditCard class="w-8 h-8" />
+        <div class="w-16 h-16 bg-blue-600 dark:bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5">
+          <CreditCard class="w-8 h-8 text-white" />
         </div>
         <h3 class="text-xl font-semibold mb-3">Выберите тариф</h3>
-        <p class="text-gray-400">Оформите подписку за пару минут.</p>
+        <p class="text-gray-500 dark:text-gray-400">Оформите подписку за пару минут.</p>
       </div>
       <div>
-        <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5">
-          <Shield class="w-8 h-8" />
+        <div class="w-16 h-16 bg-blue-600 dark:bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5">
+          <Shield class="w-8 h-8 text-white" />
         </div>
         <h3 class="text-xl font-semibold mb-3">Включите защиту</h3>
-        <p class="text-gray-400">Нажмите «Подключиться» и пользуйтесь безопасным интернетом.</p>
+        <p class="text-gray-500 dark:text-gray-400">Нажмите «Подключиться» и пользуйтесь безопасным интернетом.</p>
       </div>
     </div>
   </section>

src/components/TestimonialsSection.vue

@@ -31,28 +31,28 @@
         @swiper="onSwiper"
       >
         <SwiperSlide v-for="(review, i) in reviews" :key="i">
-          <div class="bg-gray-900 rounded-2xl p-6 border border-gray-800 aspect-4/5 flex flex-col h-full">
+          <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 border border-gray-200 dark:border-gray-800 aspect-4/5 flex flex-col h-full">
             <div class="flex items-center gap-4 mb-4">
               <img :src="review.avatar" class="w-12 h-12 rounded-full" alt="avatar" />
               <div>
                 <p class="font-semibold">{{ review.name }}</p>
-                <p class="text-sm text-gray-400">{{ review.username }}</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">{{ review.username }}</p>
               </div>
             </div>
-            <p class="text-gray-300 italic flex-1">{{ review.text }}</p>
+            <p class="text-gray-500 dark:text-gray-400 italic flex-1">{{ review.text }}</p>
           </div>
         </SwiperSlide>
       </Swiper>
 
       <button
         ref="swiperPrev"
-        class="absolute left-0 top-1/2 -translate-y-1/2 bg-gray-800/80 hover:bg-gray-700 text-white p-2 rounded-full shadow-lg backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity ml-2 z-10"
+        class="absolute left-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300/80 dark:bg-gray-800/80 dark:hover:bg-gray-700 text-gray-900 dark:text-white p-2 rounded-full shadow-lg backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity ml-2 z-10"
       >
         <ChevronLeft class="w-5 h-5" />
       </button>
       <button
         ref="swiperNext"
-        class="absolute right-0 top-1/2 -translate-y-1/2 bg-gray-800/80 hover:bg-gray-700 text-white p-2 rounded-full shadow-lg backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity mr-2 z-10"
+        class="absolute right-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300/80 dark:bg-gray-800/80 dark:hover:bg-gray-700 text-gray-900 dark:text-white p-2 rounded-full shadow-lg backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity mr-2 z-10"
       >
         <ChevronRight class="w-5 h-5" />
       </button>