allowlgroup/front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлена кнопка переключения темы и кнопки избранного и прочитанного

Browse Source
This commit is contained in:
Yro Boros
2026-03-03 17:12:06 +10:00
parent d83046dcf5
commit 2692edefd3
4 changed files with 79 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/main.css
View File

@@ -1,8 +1,5 @@
@import "tailwindcss";
/* Включение dark mode через класс в Tailwind v4 */
@custom-variant dark (&:where(.dark, .dark *));
/* Базовые стили для светлой темы */
body {
background-color: #f3f4f6;

93
src/components/My_naw.vue
View File

@@ -1,53 +1,56 @@
<template>
<div class=" sticky top-0 w-full sm:w-1/5 sm:h-screen bg-white z-10 pt-5 md:p-5 dark:bg-gray-800">
<!-- Переключатель темы -->
<ThemeToggle />
<!-- Фиксированный левый блок -->
<div v-if="currentPage === 'rezylt'" class="flex sm:flex-col">
<button
@click="ValueRezylt"
class="bg-gray-600 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
>
Результат
</button>
<div
class="sticky top-0 w-full sm:w-1/5 sm:h-screen bg-white z-10 pt-5 md:p-5 dark:bg-gray-800"
>
<div class="">
<!-- Фиксированный левый блок -->
<div v-if="currentPage === 'rezylt'" class="flex sm:flex-col">
<button
@click="ValueRezylt"
class="bg-gray-600 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
>
Результат
</button>
<button
@click="ValueSeting"
class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Настройка
</button>
<button
@click="ValueSeting"
class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Настройка
</button>
<button
@click="Valuestatus"
class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Избранное
</button>
</div>
<button
@click="Valuestatus"
class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Избранное
</button>
</div>
<div v-if="currentPage === 'setings'" class="flex sm:flex-col">
<button
@click="ValueRezylt"
class="bg-gray-300 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Результат
</button>
<div v-if="currentPage === 'setings'" class="flex sm:flex-col">
<button
@click="ValueRezylt"
class="bg-gray-300 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Результат
</button>
<button
@click="ValueSeting"
class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
>
Настройка
</button>
<button
@click="ValueSeting"
class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
>
Настройка
</button>
<button
@click="Valuestatus"
class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Избранное
</button>
<button
@click="Valuestatus"
class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
>
Избранное
</button>
</div>
<!-- Переключатель темы -->
<ThemeToggle />
</div>
<div v-if="currentPage === 'status'" class="flex sm:flex-col">
@@ -96,4 +99,4 @@ function ValueRezylt() {
function Valuestatus() {
emit("update", "status");
}
</script>
</script>

31
src/components/Stat.vue
View File

@@ -2,6 +2,23 @@
import { ref, onMounted, onBeforeUnmount } from "vue";
import axios from "axios";
// Реактивная проверка темной темы
const isDarkMode = ref(document.documentElement.classList.contains("dark"));
// Следим за изменениями класса dark на html
onMounted(() => {
// Инициализация при загрузке (если класс ещё не установлен)
isDarkMode.value = document.documentElement.classList.contains("dark");
const observer = new MutationObserver(() => {
isDarkMode.value = document.documentElement.classList.contains("dark");
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
});
const props = defineProps({
url: String,
parsed_at: String,
@@ -160,10 +177,15 @@ onBeforeUnmount(() => {
class="h-12 hover:opacity-75 active:opacity-75"
/>
<img
v-else
v-else-if="isDarkMode"
src="https://img.icons8.com/?size=100&id=qliQ29ghmkZh&format=png&color=000000"
class="h-12 hover:opacity-75 active:opacity-75"
/>
<img
v-else
src="https://img.icons8.com/?size=100&id=KDfrR4UXlVPn&format=png&color=000000"
class="h-12 hover:opacity-75 active:opacity-75"
/>
</button>
<button class="cursor-pointer" @click="status_b">
@@ -173,10 +195,15 @@ onBeforeUnmount(() => {
class="h-12 hover:opacity-75 active:opacity-75"
/>
<img
v-else
v-else-if="isDarkMode"
src="https://img.icons8.com/?size=100&id=BmD1kkH92ppy&format=png&color=000000"
class="h-12 hover:opacity-75 active:opacity-75"
/>
<img
v-else
src="https://img.icons8.com/?size=100&id=wVQaONwgqX8h&format=png&color=000000"
class="h-12 hover:opacity-75 active:opacity-75"
/>
</button>
</div>
<button

3
src/components/ThemeToggle.vue
View File

@@ -8,9 +8,10 @@ onMounted(() => {
// Проверяем localStorage
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
// Если есть сохранённая тема - используем её
isDark.value = savedTheme === "dark";
} else {
// Проверяем системные настройки
// Нет сохранённой темы - берём из системных настроек браузера
isDark.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
}
applyTheme();