From 75fa59807c0f6d59c1a5df0406d5bfeee4007c4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20S=C3=A1nchez=20Pizarro?= <omar.sanchez@pistacero.net>
Date: Mon, 19 Jan 2026 22:47:03 +0100
Subject: [PATCH] Implement dark mode support across the application

---
 web/frontend/src/App.vue             |  62 ++++++++++++----
 web/frontend/src/style.css           |  12 +--
 web/frontend/src/views/Articles.vue  |  24 +++---
 web/frontend/src/views/Dashboard.vue |  48 ++++++------
 web/frontend/src/views/Favorites.vue |  18 ++---
 web/frontend/src/views/Logs.vue      |  12 +--
 web/frontend/src/views/Workers.vue   | 106 +++++++++++++--------------
 web/frontend/tailwind.config.js      |   1 +
 8 files changed, 160 insertions(+), 123 deletions(-)

diff --git a/web/frontend/src/App.vue b/web/frontend/src/App.vue
index 60f8510..02a6221 100644
--- a/web/frontend/src/App.vue
+++ b/web/frontend/src/App.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
-    <nav class="bg-white shadow-lg">
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <nav class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-gray-900 border-b border-gray-200 dark:border-gray-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
           <div class="flex">
             <div class="flex-shrink-0 flex items-center">
-              <h1 class="text-xl sm:text-2xl font-bold text-primary-600">🛎️ Wallabicher</h1>
+              <h1 class="text-xl sm:text-2xl font-bold text-primary-600 dark:text-primary-400">🛎️ Wallabicher</h1>
             </div>
             <div class="hidden md:ml-6 md:flex md:space-x-8">
               <router-link
                 v-for="item in navItems"
                 :key="item.path"
                 :to="item.path"
-                class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900 hover:text-primary-600 border-b-2 border-transparent hover:border-primary-600 transition-colors"
-                active-class="border-primary-600 text-primary-600"
+                class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 border-b-2 border-transparent hover:border-primary-600 dark:hover:border-primary-400 transition-colors"
+                active-class="border-primary-600 dark:border-primary-400 text-primary-600 dark:text-primary-400"
               >
                 <component :is="item.icon" class="w-5 h-5 mr-2" />
                 {{ item.name }}
@@ -21,19 +21,27 @@
             </div>
           </div>
           <div class="flex items-center space-x-3">
+            <button
+              @click="toggleDarkMode"
+              class="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              title="Alternar modo oscuro"
+            >
+              <SunIcon v-if="isDark" class="w-5 h-5" />
+              <MoonIcon v-else class="w-5 h-5" />
+            </button>
             <div class="hidden sm:flex items-center space-x-2">
               <div
                 class="w-3 h-3 rounded-full"
                 :class="wsConnected ? 'bg-green-500' : 'bg-red-500'"
               ></div>
-              <span class="text-sm text-gray-600">
+              <span class="text-sm text-gray-600 dark:text-gray-300">
                 {{ wsConnected ? 'Conectado' : 'Desconectado' }}
               </span>
             </div>
             <!-- Mobile menu button -->
             <button
               @click="mobileMenuOpen = !mobileMenuOpen"
-              class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
+              class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
               aria-expanded="false"
             >
               <Bars3Icon v-if="!mobileMenuOpen" class="block h-6 w-6" />
@@ -44,27 +52,27 @@
       </div>
 
       <!-- Mobile menu -->
-      <div v-if="mobileMenuOpen" class="md:hidden border-t border-gray-200">
+      <div v-if="mobileMenuOpen" class="md:hidden border-t border-gray-200 dark:border-gray-700">
         <div class="pt-2 pb-3 space-y-1 px-4">
           <router-link
             v-for="item in navItems"
             :key="item.path"
             :to="item.path"
             @click="mobileMenuOpen = false"
-            class="flex items-center px-3 py-2 text-base font-medium text-gray-900 hover:text-primary-600 hover:bg-gray-50 rounded-md transition-colors"
-            :class="$route.path === item.path ? 'text-primary-600 bg-gray-50' : ''"
+            class="flex items-center px-3 py-2 text-base font-medium text-gray-900 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
+            :class="$route.path === item.path ? 'text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-gray-700' : ''"
           >
             <component :is="item.icon" class="w-5 h-5 mr-3" />
             {{ item.name }}
           </router-link>
         </div>
-        <div class="pt-4 pb-3 border-t border-gray-200 px-4">
+        <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700 px-4">
           <div class="flex items-center space-x-2">
             <div
               class="w-3 h-3 rounded-full"
               :class="wsConnected ? 'bg-green-500' : 'bg-red-500'"
             ></div>
-            <span class="text-sm text-gray-600">
+            <span class="text-sm text-gray-600 dark:text-gray-300">
               {{ wsConnected ? 'Conectado' : 'Desconectado' }}
             </span>
           </div>
@@ -79,7 +87,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import {
   HomeIcon,
   DocumentTextIcon,
@@ -88,6 +96,8 @@ import {
   DocumentMagnifyingGlassIcon,
   Bars3Icon,
   XMarkIcon,
+  SunIcon,
+  MoonIcon,
 } from '@heroicons/vue/24/outline';
 
 const navItems = [
@@ -100,9 +110,35 @@ const navItems = [
 
 const wsConnected = ref(false);
 const mobileMenuOpen = ref(false);
+const darkMode = ref(false);
 let ws = null;
 
+const isDark = computed(() => darkMode.value);
+
+function toggleDarkMode() {
+  darkMode.value = !darkMode.value;
+  if (darkMode.value) {
+    document.documentElement.classList.add('dark');
+    localStorage.setItem('darkMode', 'true');
+  } else {
+    document.documentElement.classList.remove('dark');
+    localStorage.setItem('darkMode', 'false');
+  }
+}
+
+function initDarkMode() {
+  const saved = localStorage.getItem('darkMode');
+  if (saved === 'true' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    darkMode.value = true;
+    document.documentElement.classList.add('dark');
+  } else {
+    darkMode.value = false;
+    document.documentElement.classList.remove('dark');
+  }
+}
+
 onMounted(() => {
+  initDarkMode();
   connectWebSocket();
 });
 
diff --git a/web/frontend/src/style.css b/web/frontend/src/style.css
index 3d32b71..5ab50fe 100644
--- a/web/frontend/src/style.css
+++ b/web/frontend/src/style.css
@@ -4,13 +4,13 @@
 
 @layer base {
   body {
-    @apply bg-gray-50 text-gray-900;
+    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
   }
 }
 
 @layer components {
   .card {
-    @apply bg-white rounded-lg shadow-md p-6;
+    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg p-6 border border-gray-200 dark:border-gray-700;
   }
   
   .btn {
@@ -18,19 +18,19 @@
   }
   
   .btn-primary {
-    @apply bg-primary-600 text-white hover:bg-primary-700;
+    @apply bg-primary-600 dark:bg-primary-500 text-white hover:bg-primary-700 dark:hover:bg-primary-600;
   }
   
   .btn-secondary {
-    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
+    @apply bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600;
   }
   
   .btn-danger {
-    @apply bg-red-600 text-white hover:bg-red-700;
+    @apply bg-red-600 dark:bg-red-700 text-white hover:bg-red-700 dark:hover:bg-red-800;
   }
   
   .input {
-    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+    @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400;
   }
   
   /* Line clamp utility */
diff --git a/web/frontend/src/views/Articles.vue b/web/frontend/src/views/Articles.vue
index 1cbb76f..b6218bb 100644
--- a/web/frontend/src/views/Articles.vue
+++ b/web/frontend/src/views/Articles.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="mb-4 sm:mb-6">
       <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4 mb-4">
-        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Artículos Notificados</h1>
+        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">Artículos Notificados</h1>
         <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:space-x-4">
           <select
             v-model="selectedPlatform"
@@ -40,20 +40,20 @@
 
     <div v-if="loading" class="text-center py-12">
       <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
-      <p class="mt-2 text-gray-600">Cargando artículos...</p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Cargando artículos...</p>
     </div>
 
     <div v-else-if="filteredArticles.length === 0 && !searchQuery" class="card text-center py-12">
-      <p class="text-gray-600">No hay artículos para mostrar</p>
+      <p class="text-gray-600 dark:text-gray-400">No hay artículos para mostrar</p>
     </div>
 
     <div v-else-if="searching" class="card text-center py-12">
       <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
-      <p class="mt-2 text-gray-600">Buscando artículos en Redis...</p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Buscando artículos en Redis...</p>
     </div>
 
     <div v-else-if="filteredArticles.length === 0 && searchQuery && !searching" class="card text-center py-12">
-      <p class="text-gray-600">No se encontraron artículos que coincidan con "{{ searchQuery }}"</p>
+      <p class="text-gray-600 dark:text-gray-400">No se encontraron artículos que coincidan con "{{ searchQuery }}"</p>
       <button @click="searchQuery = ''" class="btn btn-secondary mt-4">Limpiar búsqueda</button>
     </div>
 
@@ -74,8 +74,8 @@
                 @error="($event) => handleImageError($event)"
               />
             </div>
-            <div v-else class="w-24 h-24 sm:w-32 sm:h-32 bg-gray-200 rounded-lg flex items-center justify-center">
-              <span class="text-gray-400 text-xs">Sin imagen</span>
+            <div v-else class="w-24 h-24 sm:w-32 sm:h-32 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+              <span class="text-gray-400 dark:text-gray-500 text-xs">Sin imagen</span>
             </div>
           </div>
 
@@ -94,12 +94,12 @@
               >
                     {{ article.platform?.toUpperCase() || 'N/A' }}
               </span>
-                  <span class="text-xs sm:text-sm text-gray-500">
+                  <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
                 {{ formatDate(article.notifiedAt) }}
               </span>
             </div>
                 
-                <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-1 line-clamp-2" :title="article.title">
+                <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-2" :title="article.title">
                   {{ article.title || 'Sin título' }}
                 </h3>
                 
@@ -109,7 +109,7 @@
                   </span>
                 </div>
                 
-                <div class="space-y-1 text-xs sm:text-sm text-gray-600 mb-2">
+                <div class="space-y-1 text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-2">
                   <div v-if="article.location" class="flex flex-wrap items-center">
                     <span class="font-medium">📍 Localidad:</span>
                     <span class="ml-2">{{ article.location }}</span>
@@ -124,7 +124,7 @@
                   </div>
                 </div>
                 
-                <p v-if="article.description" class="text-xs sm:text-sm text-gray-700 mb-2 overflow-hidden line-clamp-2">
+                <p v-if="article.description" class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 mb-2 overflow-hidden line-clamp-2">
                   {{ article.description }}
                 </p>
                 
@@ -138,7 +138,7 @@
                   >
                     🔗 Ver anuncio
                   </a>
-                  <span class="text-xs text-gray-400 break-all">
+                  <span class="text-xs text-gray-400 dark:text-gray-500 break-all">
                     ID: {{ article.id }}
                   </span>
                 </div>
diff --git a/web/frontend/src/views/Dashboard.vue b/web/frontend/src/views/Dashboard.vue
index 7eaac03..76ee783 100644
--- a/web/frontend/src/views/Dashboard.vue
+++ b/web/frontend/src/views/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 sm:mb-6">Dashboard</h1>
+    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6">Dashboard</h1>
 
     <!-- Estadísticas -->
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
@@ -10,8 +10,8 @@
             <Cog6ToothIcon class="w-6 h-6 text-primary-600" />
           </div>
           <div class="ml-3 sm:ml-4">
-            <p class="text-xs sm:text-sm font-medium text-gray-600">Workers Activos</p>
-            <p class="text-xl sm:text-2xl font-bold text-gray-900">{{ stats.activeWorkers }}/{{ stats.totalWorkers }}</p>
+            <p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400">Workers Activos</p>
+            <p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.activeWorkers }}/{{ stats.totalWorkers }}</p>
           </div>
         </div>
       </div>
@@ -22,8 +22,8 @@
             <HeartIcon class="w-6 h-6 text-green-600" />
           </div>
           <div class="ml-4">
-            <p class="text-sm font-medium text-gray-600">Favoritos</p>
-            <p class="text-2xl font-bold text-gray-900">{{ stats.totalFavorites }}</p>
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Favoritos</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.totalFavorites }}</p>
           </div>
         </div>
       </div>
@@ -34,8 +34,8 @@
             <DocumentTextIcon class="w-6 h-6 text-blue-600" />
           </div>
           <div class="ml-4">
-            <p class="text-sm font-medium text-gray-600">Artículos Notificados</p>
-            <p class="text-2xl font-bold text-gray-900">{{ stats.totalNotified }}</p>
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Artículos Notificados</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.totalNotified }}</p>
           </div>
         </div>
       </div>
@@ -46,8 +46,8 @@
             <ChartBarIcon class="w-6 h-6 text-purple-600" />
           </div>
           <div class="ml-4">
-            <p class="text-sm font-medium text-gray-600">Plataformas</p>
-            <p class="text-sm font-bold text-gray-900">
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Plataformas</p>
+            <p class="text-sm font-bold text-gray-900 dark:text-gray-100">
               W: {{ stats.platforms?.wallapop || 0 }} | V: {{ stats.platforms?.vinted || 0 }}
             </p>
           </div>
@@ -58,14 +58,14 @@
     <!-- Gráfico de plataformas -->
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
       <div class="card">
-        <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">Distribución por Plataforma</h2>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Distribución por Plataforma</h2>
         <div class="space-y-4">
           <div>
             <div class="flex justify-between mb-2">
-              <span class="text-sm font-medium text-gray-700">Wallapop</span>
-              <span class="text-sm font-medium text-gray-900">{{ stats.platforms?.wallapop || 0 }}</span>
+              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Wallapop</span>
+              <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ stats.platforms?.wallapop || 0 }}</span>
             </div>
-            <div class="w-full bg-gray-200 rounded-full h-2">
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
               <div
                 class="bg-primary-600 h-2 rounded-full"
                 :style="{
@@ -76,10 +76,10 @@
           </div>
           <div>
             <div class="flex justify-between mb-2">
-              <span class="text-sm font-medium text-gray-700">Vinted</span>
-              <span class="text-sm font-medium text-gray-900">{{ stats.platforms?.vinted || 0 }}</span>
+              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Vinted</span>
+              <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ stats.platforms?.vinted || 0 }}</span>
             </div>
-            <div class="w-full bg-gray-200 rounded-full h-2">
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
               <div
                 class="bg-green-600 h-2 rounded-full"
                 :style="{
@@ -92,28 +92,28 @@
       </div>
 
       <div class="card">
-        <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">Accesos Rápidos</h2>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Accesos Rápidos</h2>
         <div class="space-y-3">
           <router-link
             to="/articles"
-            class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+            class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
           >
-            <span class="text-sm font-medium text-gray-700">Ver todos los artículos</span>
-            <ArrowRightIcon class="w-5 h-5 text-gray-400" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Ver todos los artículos</span>
+            <ArrowRightIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
           </router-link>
           <router-link
             to="/favorites"
             class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
           >
-            <span class="text-sm font-medium text-gray-700">Ver favoritos</span>
-            <ArrowRightIcon class="w-5 h-5 text-gray-400" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Ver favoritos</span>
+            <ArrowRightIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
           </router-link>
           <router-link
             to="/workers"
             class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
           >
-            <span class="text-sm font-medium text-gray-700">Gestionar workers</span>
-            <ArrowRightIcon class="w-5 h-5 text-gray-400" />
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Gestionar workers</span>
+            <ArrowRightIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
           </router-link>
         </div>
       </div>
diff --git a/web/frontend/src/views/Favorites.vue b/web/frontend/src/views/Favorites.vue
index 442dcd8..4ed2df9 100644
--- a/web/frontend/src/views/Favorites.vue
+++ b/web/frontend/src/views/Favorites.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-6">
-      <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Favoritos</h1>
+      <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">Favoritos</h1>
       <button @click="loadFavorites" class="btn btn-primary self-start sm:self-auto">
         Actualizar
       </button>
@@ -9,13 +9,13 @@
 
     <div v-if="loading" class="text-center py-12">
       <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
-      <p class="mt-2 text-gray-600">Cargando favoritos...</p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Cargando favoritos...</p>
     </div>
 
     <div v-else-if="favorites.length === 0" class="card text-center py-12">
-      <HeartIcon class="w-16 h-16 text-gray-300 mx-auto mb-4" />
-      <p class="text-gray-600 text-lg">No tienes favoritos aún</p>
-      <p class="text-gray-400 text-sm mt-2">
+      <HeartIcon class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
+      <p class="text-gray-600 dark:text-gray-400 text-lg">No tienes favoritos aún</p>
+      <p class="text-gray-400 dark:text-gray-500 text-sm mt-2">
         Los artículos que marques como favoritos aparecerán aquí
       </p>
     </div>
@@ -40,17 +40,17 @@
                 {{ favorite.platform?.toUpperCase() || 'N/A' }}
               </span>
             </div>
-            <h3 class="text-lg font-semibold text-gray-900 mb-2">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
               {{ favorite.title || 'Sin título' }}
             </h3>
-            <p class="text-sm text-gray-600 mb-2">
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
               {{ favorite.description?.substring(0, 100) }}...
             </p>
             <div class="flex items-center justify-between mt-4">
               <span class="text-xl font-bold text-primary-600">
                 {{ favorite.price }} {{ favorite.currency }}
               </span>
-              <span class="text-sm text-gray-500">
+              <span class="text-sm text-gray-500 dark:text-gray-400">
                 {{ favorite.location }}
               </span>
             </div>
@@ -82,7 +82,7 @@
           />
         </div>
 
-        <p class="text-xs text-gray-400 mt-2">
+          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">
           Añadido: {{ formatDate(favorite.addedAt) }}
         </p>
       </div>
diff --git a/web/frontend/src/views/Logs.vue b/web/frontend/src/views/Logs.vue
index d6a688c..b1a86c3 100644
--- a/web/frontend/src/views/Logs.vue
+++ b/web/frontend/src/views/Logs.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="flex flex-col gap-4 mb-4 sm:mb-6">
       <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4">
-        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Logs del Sistema</h1>
+        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">Logs del Sistema</h1>
         <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:space-x-4">
           <select v-model="logLevel" @change="loadLogs(followLatestLog)" class="input text-sm sm:text-base" style="width: 100%; min-width: 160px;">
             <option value="">Todos los niveles</option>
@@ -18,7 +18,7 @@
       </div>
       
       <!-- Panel de configuración de auto-refresh -->
-      <div class="card p-4 bg-gray-50 border border-gray-200">
+      <div class="card p-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
         <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
           <label class="flex items-center gap-2 cursor-pointer">
             <input 
@@ -27,12 +27,12 @@
               @change="handleAutoRefreshChange"
               class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
             >
-            <span class="font-medium text-gray-700">Auto-refresh</span>
+            <span class="font-medium text-gray-700 dark:text-gray-300">Auto-refresh</span>
           </label>
           
           <div v-if="autoRefresh" class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 flex-1">
             <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600 whitespace-nowrap">Intervalo:</label>
+              <label class="text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">Intervalo:</label>
               <input 
                 type="number" 
                 v-model.number="refreshIntervalSeconds" 
@@ -41,7 +41,7 @@
                 max="300"
                 class="input text-sm w-20"
               >
-              <span class="text-sm text-gray-600 whitespace-nowrap">segundos</span>
+              <span class="text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">segundos</span>
             </div>
             
             <label class="flex items-center gap-2 cursor-pointer">
@@ -50,7 +50,7 @@
                 v-model="followLatestLog" 
                 class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
               >
-              <span class="text-sm text-gray-700">Seguir último log</span>
+              <span class="text-sm text-gray-700 dark:text-gray-300">Seguir último log</span>
             </label>
           </div>
         </div>
diff --git a/web/frontend/src/views/Workers.vue b/web/frontend/src/views/Workers.vue
index 6121b3f..0fab386 100644
--- a/web/frontend/src/views/Workers.vue
+++ b/web/frontend/src/views/Workers.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-6">
-      <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Gestión de Workers</h1>
+      <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">Gestión de Workers</h1>
       <div class="flex flex-wrap gap-2">
         <button @click="showGeneralModal = true" class="btn btn-secondary text-xs sm:text-sm">
           ⚙️ Configuración General
@@ -17,13 +17,13 @@
 
     <div v-if="loading" class="text-center py-12">
       <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
-      <p class="mt-2 text-gray-600">Cargando workers...</p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Cargando workers...</p>
     </div>
 
     <div v-else class="space-y-4">
       <!-- Workers activos -->
       <div v-if="activeWorkers.length > 0">
-        <h2 class="text-xl font-semibold text-gray-900 mb-4">Workers Activos ({{ activeWorkers.length }})</h2>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Workers Activos ({{ activeWorkers.length }})</h2>
         <div class="grid grid-cols-1 gap-4">
           <div
             v-for="(worker, index) in activeWorkers"
@@ -33,7 +33,7 @@
             <div class="flex items-start justify-between">
               <div class="flex-1">
                 <div class="flex items-center space-x-2 mb-3">
-                  <h3 class="text-lg font-semibold text-gray-900">{{ worker.name }}</h3>
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ worker.name }}</h3>
                   <span class="px-2 py-1 text-xs font-semibold rounded bg-green-100 text-green-800">
                     Activo
                   </span>
@@ -72,12 +72,12 @@
                 </div>
 
                 <!-- Filtros aplicados -->
-                <div v-if="hasFilters(worker)" class="mt-3 pt-3 border-t border-gray-200">
+                <div v-if="hasFilters(worker)" class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                   <details class="text-xs">
-                    <summary class="cursor-pointer text-gray-600 hover:text-gray-900 font-medium">
+                    <summary class="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 font-medium">
                       Ver filtros ({{ countFilters(worker) }})
                     </summary>
-                    <div class="mt-2 space-y-1 text-gray-600">
+                    <div class="mt-2 space-y-1 text-gray-600 dark:text-gray-400">
                       <div v-if="worker.title_exclude?.length" class="flex items-start">
                         <span class="font-medium mr-2">Excluir título:</span>
                         <span>{{ worker.title_exclude.join(', ') }}</span>
@@ -129,7 +129,7 @@
 
       <!-- Workers desactivados -->
       <div v-if="disabledWorkers.length > 0" class="mt-6 sm:mt-8">
-        <h2 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4">Workers Desactivados ({{ disabledWorkers.length }})</h2>
+        <h2 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Workers Desactivados ({{ disabledWorkers.length }})</h2>
         <div class="grid grid-cols-1 gap-4">
           <div
             v-for="(worker, index) in disabledWorkers"
@@ -139,7 +139,7 @@
             <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
               <div class="flex-1">
                 <div class="flex flex-wrap items-center gap-2 mb-2">
-                  <h3 class="text-base sm:text-lg font-semibold text-gray-900">{{ worker.name }}</h3>
+                  <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100">{{ worker.name }}</h3>
                   <span class="px-2 py-1 text-xs font-semibold rounded bg-red-100 text-red-800">
                     Desactivado
                   </span>
@@ -147,7 +147,7 @@
                     {{ (worker.platform || 'wallapop').toUpperCase() }}
                   </span>
                 </div>
-                <p class="text-xs sm:text-sm text-gray-600">{{ worker.search_query }}</p>
+                <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">{{ worker.search_query }}</p>
               </div>
               <div class="flex flex-wrap gap-2 sm:space-x-2 sm:ml-4">
                 <button
@@ -175,7 +175,7 @@
       </div>
 
       <div v-if="activeWorkers.length === 0 && disabledWorkers.length === 0" class="card text-center py-12">
-        <p class="text-gray-600">No hay workers configurados</p>
+        <p class="text-gray-600 dark:text-gray-400">No hay workers configurados</p>
         <button @click="showAddModal = true" class="btn btn-primary mt-4">
           + Crear primer worker
         </button>
@@ -185,50 +185,50 @@
     <!-- Modal para añadir/editar worker -->
     <div
       v-if="showAddModal || editingWorker"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4"
+      class="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center z-50 p-2 sm:p-4"
       @click.self="closeModal"
     >
-      <div class="bg-white rounded-lg p-4 sm:p-6 max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-y-auto">
-        <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3 sm:mb-4">
+      <div class="bg-white dark:bg-gray-800 rounded-lg p-4 sm:p-6 max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-y-auto">
+        <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">
           {{ editingWorker ? 'Editar Worker' : 'Añadir Worker' }}
         </h2>
         <form @submit.prevent="saveWorker" class="space-y-6">
           <!-- Información básica -->
-          <div class="border-b border-gray-200 pb-3 sm:pb-4">
-            <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4">Información Básica</h3>
+          <div class="border-b border-gray-200 dark:border-gray-700 pb-3 sm:pb-4">
+            <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Información Básica</h3>
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nombre *</label>
                 <input v-model="workerForm.name" type="text" class="input" required />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Plataforma</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Plataforma</label>
                 <select v-model="workerForm.platform" class="input">
                   <option value="wallapop">Wallapop</option>
                   <option value="vinted">Vinted</option>
                 </select>
               </div>
               <div class="md:col-span-2">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Búsqueda *</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Búsqueda *</label>
                 <input v-model="workerForm.search_query" type="text" class="input" required placeholder="ej: playstation 1" />
               </div>
             </div>
           </div>
 
           <!-- Precios y Thread -->
-          <div class="border-b border-gray-200 pb-3 sm:pb-4">
-            <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4">Precios y Notificaciones</h3>
+          <div class="border-b border-gray-200 dark:border-gray-700 pb-3 sm:pb-4">
+            <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Precios y Notificaciones</h3>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Precio Mínimo (€)</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Precio Mínimo (€)</label>
                 <input v-model.number="workerForm.min_price" type="number" class="input" min="0" step="0.01" />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Precio Máximo (€)</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Precio Máximo (€)</label>
                 <input v-model.number="workerForm.max_price" type="number" class="input" min="0" step="0.01" />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Thread ID (Telegram)</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Thread ID (Telegram)</label>
                 <div class="flex gap-2">
                   <input v-model.number="workerForm.thread_id" type="number" class="input flex-1" placeholder="Ej: 8" />
                   <button 
@@ -240,20 +240,20 @@
                     {{ loadingThreads ? 'Cargando...' : '📋 Obtener Threads' }}
                   </button>
                 </div>
-                <p class="text-xs text-gray-500 mt-1">Opcional: ID del hilo donde enviar notificaciones</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Opcional: ID del hilo donde enviar notificaciones</p>
                 
                 <!-- Lista de threads disponibles -->
-                <div v-if="availableThreads.length > 0" class="mt-2 p-2 bg-gray-50 rounded border border-gray-200 max-h-40 overflow-y-auto">
-                  <p class="text-xs font-medium text-gray-700 mb-2">Threads disponibles:</p>
+                <div v-if="availableThreads.length > 0" class="mt-2 p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 max-h-40 overflow-y-auto">
+                  <p class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Threads disponibles:</p>
                   <div 
                     v-for="thread in availableThreads" 
                     :key="thread.id"
                     @click="selectThread(thread.id)"
-                    class="flex items-center justify-between p-2 mb-1 bg-white rounded border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors"
+                    class="flex items-center justify-between p-2 mb-1 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                   >
                     <div class="flex-1">
-                      <span class="text-sm font-medium text-gray-900">{{ thread.name }}</span>
-                      <span class="text-xs text-gray-500 ml-2">ID: {{ thread.id }}</span>
+                      <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ thread.name }}</span>
+                      <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">ID: {{ thread.id }}</span>
                     </div>
                     <button 
                       type="button"
@@ -266,9 +266,9 @@
                 </div>
                 
                 <!-- Mensaje informativo si no hay threads -->
-                <div v-if="threadsMessage" class="mt-2 p-2 bg-blue-50 border border-blue-200 rounded">
-                  <p class="text-xs text-blue-800">{{ threadsMessage }}</p>
-                  <p v-if="threadsInfo" class="text-xs text-blue-700 mt-1">{{ threadsInfo }}</p>
+                <div v-if="threadsMessage" class="mt-2 p-2 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded">
+                  <p class="text-xs text-blue-800 dark:text-blue-300">{{ threadsMessage }}</p>
+                  <p v-if="threadsInfo" class="text-xs text-blue-700 dark:text-blue-400 mt-1">{{ threadsInfo }}</p>
                 </div>
               </div>
             </div>
@@ -276,18 +276,18 @@
 
           <!-- Ubicación -->
           <div class="border-b border-gray-200 pb-4">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Búsqueda Local (Opcional)</h3>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Búsqueda Local (Opcional)</h3>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Latitud</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Latitud</label>
                 <input v-model.number="workerForm.latitude" type="number" class="input" step="any" />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Longitud</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Longitud</label>
                 <input v-model.number="workerForm.longitude" type="number" class="input" step="any" />
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Distancia Máxima (km)</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Distancia Máxima (km)</label>
                 <input v-model.number="workerForm.max_distance" type="number" class="input" min="0" />
               </div>
             </div>
@@ -295,20 +295,20 @@
 
           <!-- Filtros de exclusión -->
           <div class="border-b border-gray-200 pb-4">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Filtros de Exclusión</h3>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Filtros de Exclusión</h3>
             <div class="space-y-4">
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Excluir palabras del título</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Excluir palabras del título</label>
                 <textarea 
                   v-model="workerForm.title_exclude_text" 
                   class="input" 
                   rows="3"
                   placeholder="Una palabra por línea o separadas por comas"
                 ></textarea>
-                <p class="text-xs text-gray-500 mt-1">Si aparece alguna palabra, se excluye el artículo</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Si aparece alguna palabra, se excluye el artículo</p>
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Excluir palabras de la descripción</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Excluir palabras de la descripción</label>
                 <textarea 
                   v-model="workerForm.description_exclude_text" 
                   class="input" 
@@ -317,34 +317,34 @@
                 ></textarea>
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Excluir si primera palabra del título es</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Excluir si primera palabra del título es</label>
                 <textarea 
                   v-model="workerForm.title_first_word_exclude_text" 
                   class="input" 
                   rows="2"
                   placeholder="Una palabra por línea o separadas por comas"
                 ></textarea>
-                <p class="text-xs text-gray-500 mt-1">Ej: "Reacondicionado", "Vendido", etc.</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Ej: "Reacondicionado", "Vendido", etc.</p>
               </div>
             </div>
           </div>
 
           <!-- Filtros de inclusión -->
           <div class="border-b border-gray-200 pb-4">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Filtros de Inclusión (Requeridos)</h3>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Filtros de Inclusión (Requeridos)</h3>
             <div class="space-y-4">
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Palabras requeridas en el título</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Palabras requeridas en el título</label>
                 <textarea 
                   v-model="workerForm.title_must_include_text" 
                   class="input" 
                   rows="3"
                   placeholder="Una palabra por línea o separadas por comas"
                 ></textarea>
-                <p class="text-xs text-gray-500 mt-1">TODAS las palabras deben aparecer</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">TODAS las palabras deben aparecer</p>
               </div>
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">Palabras requeridas en la descripción</label>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Palabras requeridas en la descripción</label>
                 <textarea 
                   v-model="workerForm.description_must_include_text" 
                   class="input" 
@@ -357,7 +357,7 @@
 
           <!-- Configuración avanzada -->
           <div class="border-b border-gray-200 pb-4">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Configuración Avanzada</h3>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Configuración Avanzada</h3>
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-1">Intervalo de verificación (segundos)</label>
               <input v-model.number="workerForm.check_every" type="number" class="input" min="1" />
@@ -380,12 +380,12 @@
     <!-- Modal para configuración general -->
     <div
       v-if="showGeneralModal"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4"
+      class="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center z-50 p-2 sm:p-4"
       @click.self="closeGeneralModal"
     >
-      <div class="bg-white rounded-lg p-4 sm:p-6 max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-y-auto">
-        <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3 sm:mb-4">Configuración General</h2>
-        <p class="text-sm text-gray-600 mb-4">Estas configuraciones se aplican a todos los workers</p>
+      <div class="bg-white dark:bg-gray-800 rounded-lg p-4 sm:p-6 max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-y-auto">
+        <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Configuración General</h2>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Estas configuraciones se aplican a todos los workers</p>
         <form @submit.prevent="saveGeneralConfig" class="space-y-4">
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-1">Excluir palabras del título (global)</label>
@@ -405,7 +405,7 @@
               placeholder="Una palabra por línea o separadas por comas"
             ></textarea>
           </div>
-          <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:space-x-2 pt-4 border-t border-gray-200">
+          <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:space-x-2 pt-4 border-t border-gray-200 dark:border-gray-700">
             <button type="button" @click="closeGeneralModal" class="btn btn-secondary text-sm sm:text-base">
               Cancelar
             </button>
diff --git a/web/frontend/tailwind.config.js b/web/frontend/tailwind.config.js
index 9553471..070f640 100644
--- a/web/frontend/tailwind.config.js
+++ b/web/frontend/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {