uVPN/frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 6 Activity

# feature: add dark/light theme support

Browse Source 
Realized by prefers-color-scheme media queries with Tailwind CSS
This commit is contained in:
austnv
2026-05-24 02:00:54 +03:00
parent 5edd56a31f
commit b89f92953d
8 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppHeader.vue
+9 -9
View File
@@ -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>