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/TestimonialsSection.vue
+5 -5
View File
@@ -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>