support dark theme closes #25

apps/frontend/src/views/CreateView.vue

@@ -39,7 +39,9 @@
       </template>
     </CreateSectionManager>
 
-    <p v-if="isError" class="text-red-500 mt-4">Ошибка создания QR‑кода: {{ error }}</p>
+    <p v-if="isError" class="text-red-500 dark:text-red-400 mt-4">
+      Ошибка создания QR‑кода: {{ error }}
+    </p>
 
     <div class="h-[30dvh] md:h-[10dvh] overflow-hidden"></div>
   </LayoutWithTabs>

apps/frontend/src/views/DonateView.vue

@@ -1,7 +1,9 @@
 <template>
   <LayoutWithTabs>
     <template #footer>
-      <footer class="py-4 border-t text-center text-sm hidden sm:block">
+      <footer
+        class="py-4 border-t text-center text-sm hidden sm:block border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400"
+      >
         <p>НаСвязи © 2024</p>
       </footer>
     </template>
@@ -12,8 +14,10 @@
     </MetaHead>
 
     <section class="max-w-2xl mx-auto py-8 px-4 text-center">
-      <h1 class="text-2xl font-bold mb-4">Поддержите развитие НаСвязи</h1>
-      <p class="text-gray-600 mb-6">
+      <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">
+        Поддержите развитие НаСвязи
+      </h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-6">
         Мы делаем всё, чтобы НаСвязи оставался удобным и полезным. Вы можете помочь нам, поддержав
         проект на Бусти.
       </p>
@@ -24,7 +28,7 @@
           href="https://boosty.to/hereconnect/donate"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-block bg-orange-500 text-white font-semibold py-3 px-6 rounded-lg shadow hover:bg-orange-600 transition duration-300"
+          class="inline-block bg-orange-500 text-white font-semibold py-3 px-6 rounded-lg shadow hover:bg-orange-600 transition duration-300 dark:hover:bg-orange-700"
         >
           Поддержать через Бусти
         </a>
@@ -32,8 +36,10 @@
 
       <!-- Рассказать друзьям -->
       <div class="mb-8">
-        <h2 class="text-xl font-semibold mb-4">Рассказать друзьям</h2>
-        <p class="text-gray-600 mb-4">Поделитесь ссылкой на НаСвязи:</p>
+        <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
+          Рассказать друзьям
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Поделитесь ссылкой на НаСвязи:</p>
         <div class="flex justify-center gap-6">
           <!-- Telegram -->
           <a
@@ -56,31 +62,6 @@
           </a>
         </div>
       </div>
-
-      <!-- Обратная связь -->
-      <!--    <div>-->
-      <!--      <h2 class="text-xl font-semibold mb-4">Оставить отзыв или идею</h2>-->
-      <!--      <p class="text-gray-600 mb-4">Мы рады любым предложениям и обратной связи.</p>-->
-      <!--      <form @submit.prevent="sendFeedback">-->
-      <!--        <div class="mb-4">-->
-      <!--          <InputText v-model="email" class="w-full" placeholder="Ваш email" />-->
-      <!--        </div>-->
-      <!--        <div class="mb-4">-->
-      <!--          <Textarea-->
-      <!--            v-model="message"-->
-      <!--            rows="4"-->
-      <!--            class="w-full"-->
-      <!--            placeholder="Ваше сообщение"-->
-      <!--          ></Textarea>-->
-      <!--        </div>-->
-      <!--        <Button-->
-      <!--          label="Отправить"-->
-      <!--          class="p-button-md"-->
-      <!--          :disabled="!email.trim() || !message.trim()"-->
-      <!--        />-->
-      <!--      </form>-->
-      <!--      <p v-if="success" class="text-green-500 mt-4">Спасибо за ваше сообщение!</p>-->
-      <!--    </div>-->
     </section>
   </LayoutWithTabs>
 </template>

apps/frontend/src/views/PublicChatView.vue

@@ -19,10 +19,12 @@
           <!-- Уведомление, если гость отправил только одно сообщение -->
           <div
             v-if="count === 1 && lastMessage && lastMessage.from === 'guest'"
-            class="flex flex-col items-center justify-center text-center bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 my-6"
+            class="flex flex-col items-center justify-center text-center bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md p-6 my-6"
           >
-            <p class="text-gray-700 font-medium text-lg">Ваше сообщение отправлено.</p>
-            <p class="text-gray-600 mt-2">
+            <p class="text-gray-700 dark:text-gray-200 font-medium text-lg">
+              Ваше сообщение отправлено.
+            </p>
+            <p class="text-gray-600 dark:text-gray-400 mt-2">
               Вы можете написать ещё одно сообщение или подождать ответа.
             </p>
           </div>

apps/frontend/src/views/ReadQRCodeView.vue

@@ -22,15 +22,21 @@
       </section>
     </main>
 
-    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
+    <footer
+      class="bg-gray-100 dark:bg-gray-800 text-center py-4 border-t dark:border-gray-700 text-sm text-gray-700 dark:text-gray-300"
+    >
       <p>
         Нужен такой же?
-        <a href="/create" class="underline underline-offset-2">Создайте свой QR‑код</a>.
+        <a
+          href="/create"
+          class="underline underline-offset-2 text-primary-600 dark:text-primary-400"
+          >Создайте свой QR‑код</a
+        >.
       </p>
       <p class="mt-1">
         Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a
           href="/donate"
-          class="underline underline-offset-2"
+          class="underline underline-offset-2 text-primary-600 dark:text-primary-400"
           >поддержке</a
         >.
       </p>

apps/frontend/src/views/manage/ManageQRCodeReadyView.vue

@@ -18,24 +18,28 @@
       <section class="max-w-prose w-full flex flex-col gap-1">
         <div
           v-if="svgQueryIsLoading || qrCodeQueryIsLoading"
-          class="text-gray-500 mt-4 text-center"
+          class="text-gray-500 dark:text-gray-400 mt-4 text-center"
         >
           <ProgressSpinner styleClass="mt-4" />
         </div>
-        <p v-else-if="svgQueryIsError" class="text-red-500 mt-4 text-center">
+        <p v-else-if="svgQueryIsError" class="text-red-500 dark:text-red-400 mt-4 text-center">
           Ошибка генерации QR‑кода: {{ svgQueryError?.message }}
         </p>
-        <p v-else-if="qrCodeQueryIsError" class="text-red-500 mt-4 text-center">
+        <p v-else-if="qrCodeQueryIsError" class="text-red-500 dark:text-red-400 mt-4 text-center">
           Ошибка загрузки данных QR‑кода: {{ qrCodeQueryError!.message }}
         </p>
         <template v-else>
-          <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
-          <p class="text-gray-600 mb-4">
+          <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
+            Ваш QR‑код готов
+          </h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
             Сохраните его и ознакомьтесь с инструкциями по размещению.
           </p>
 
           <!-- Рендер QR‑кода -->
-          <div class="border p-4 bg-white rounded-lg mb-6">
+          <div class="border dark:border-gray-700 p-4 bg-white rounded-lg mb-6">
+            <!-- dark:bg-gray-800 -->
+
             <img v-if="!svgQueryIsLoading && svgQueryData" :src="svgQueryData" alt="QR‑код" />
           </div>
 
@@ -47,7 +51,7 @@
             <Button
               label="Скачать SVG"
               icon="pi pi-download"
-              class="p-button-sm"
+              class="p-button-sm dark:border-orange-500 dark:hover:border-orange-600 dark:text-gray-300"
               :href="svgQueryData"
               :download="`${sanitizedFileName}.svg`"
               as="a"