From 0142ba740fa8a777b3f3afdae5769628c73f51aa Mon Sep 17 00:00:00 2001
From: Exteban08 <exteban16@gamil.com>
Date: Tue, 3 Feb 2026 11:58:10 +0000
Subject: [PATCH] Add dark mode support for tables and data pages

- Add CSS overrides for MaterialTable in dark mode
- Update page containers with dark:bg-zinc-950
- Update sidebars with dark mode (MetersSidebar, ConcentratorsSidebar)
- Update tables in AuditoriaPage, UsersPage, RolesPage
- Update ConsumptionPage with dark gradient background
- Update search inputs, select elements, and modals
- Add dark borders for card separation

Affected pages:
- MeterPage, ConcentratorsPage, ProjectsPage
- UsersPage, RolesPage, AuditoriaPage
- ConsumptionPage

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/index.css                                 | 96 ++++++++++++++++++
 src/pages/AuditoriaPage.tsx                   | 98 +++++++++----------
 src/pages/RolesPage.tsx                       | 28 +++---
 src/pages/UsersPage.tsx                       | 30 +++---
 src/pages/concentrators/ConcentratorsPage.tsx |  4 +-
 .../concentrators/ConcentratorsSidebar.tsx    | 50 +++++-----
 src/pages/consumption/ConsumptionPage.tsx     | 22 ++---
 src/pages/meters/MeterPage.tsx                |  4 +-
 src/pages/meters/MetersSidebar.tsx            | 48 ++++-----
 src/pages/projects/ProjectsPage.tsx           |  4 +-
 10 files changed, 240 insertions(+), 144 deletions(-)

diff --git a/src/index.css b/src/index.css
index 66f22d3..05ebc01 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,4 +20,100 @@ body {
 .dark body,
 body:where(.dark *) {
   @apply bg-zinc-950 text-zinc-100;
+}
+
+/* MaterialTable Dark Mode Overrides */
+.dark .MuiPaper-root {
+  background-color: #18181b !important; /* zinc-900 */
+  color: #fafafa !important; /* zinc-50 */
+}
+
+.dark .MuiTableCell-root {
+  color: #e4e4e7 !important; /* zinc-200 */
+  border-bottom-color: #3f3f46 !important; /* zinc-700 */
+}
+
+.dark .MuiTableCell-head {
+  background-color: #18181b !important; /* zinc-900 */
+  color: #fafafa !important; /* zinc-50 */
+}
+
+.dark .MuiTableRow-root:hover {
+  background-color: #27272a !important; /* zinc-800 */
+}
+
+.dark .MuiTableRow-root.Mui-selected,
+.dark .MuiTableRow-root.Mui-selected:hover {
+  background-color: #3f3f46 !important; /* zinc-700 */
+}
+
+.dark .MuiToolbar-root {
+  background-color: #18181b !important; /* zinc-900 */
+  color: #fafafa !important; /* zinc-50 */
+}
+
+.dark .MuiTypography-root {
+  color: #fafafa !important; /* zinc-50 */
+}
+
+.dark .MuiTablePagination-root {
+  color: #a1a1aa !important; /* zinc-400 */
+}
+
+.dark .MuiTablePagination-selectIcon {
+  color: #a1a1aa !important; /* zinc-400 */
+}
+
+.dark .MuiIconButton-root {
+  color: #a1a1aa !important; /* zinc-400 */
+}
+
+.dark .MuiIconButton-root:hover {
+  background-color: #3f3f46 !important; /* zinc-700 */
+}
+
+.dark .MuiIconButton-root.Mui-disabled {
+  color: #52525b !important; /* zinc-600 */
+}
+
+.dark .MuiInputBase-root {
+  color: #e4e4e7 !important; /* zinc-200 */
+}
+
+.dark .MuiInput-underline:before {
+  border-bottom-color: #3f3f46 !important; /* zinc-700 */
+}
+
+.dark .MuiSelect-icon {
+  color: #a1a1aa !important; /* zinc-400 */
+}
+
+.dark .MuiTableSortLabel-root {
+  color: #fafafa !important; /* zinc-50 */
+}
+
+.dark .MuiTableSortLabel-root:hover {
+  color: #ffffff !important;
+}
+
+.dark .MuiTableSortLabel-root.Mui-active {
+  color: #60a5fa !important; /* blue-400 */
+}
+
+.dark .MuiTableSortLabel-icon {
+  color: #60a5fa !important; /* blue-400 */
+}
+
+/* Dark mode for table row active/selected state */
+.dark .MuiTableBody-root .MuiTableRow-root[style*="background-color: rgb(238, 242, 255)"],
+.dark .MuiTableBody-root .MuiTableRow-root[style*="#EEF2FF"] {
+  background-color: #3f3f46 !important; /* zinc-700 */
+}
+
+/* Fix for inline styles - override white backgrounds */
+.dark [style*="background-color: rgb(255, 255, 255)"],
+.dark [style*="background-color: #FFFFFF"],
+.dark [style*="background-color: #fff"],
+.dark [style*="backgroundColor: rgb(255, 255, 255)"] {
+  background-color: #18181b !important; /* zinc-900 */
 }
\ No newline at end of file
diff --git a/src/pages/AuditoriaPage.tsx b/src/pages/AuditoriaPage.tsx
index ec709d0..b514475 100644
--- a/src/pages/AuditoriaPage.tsx
+++ b/src/pages/AuditoriaPage.tsx
@@ -114,20 +114,20 @@ export default function AuditoriaPage() {
   const uniqueTables = Array.from(new Set(logs.map((log) => log.table_name)));
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-full dark:bg-zinc-950">
       {/* Sidebar */}
-      <aside className="w-64 border-r border-gray-200 bg-white p-4">
-        <h2 className="text-lg font-semibold mb-4">Filtros</h2>
+      <aside className="w-64 border-r border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4">
+        <h2 className="text-lg font-semibold mb-4 dark:text-white">Filtros</h2>
 
         {/* Action Filter */}
         <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
             Acción
           </label>
           <select
             value={selectedAction}
             onChange={(e) => setSelectedAction(e.target.value as AuditAction | "")}
-            className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
+            className="w-full border border-gray-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 rounded-md px-3 py-2 text-sm"
           >
             <option value="">Todas las acciones</option>
             {actions.map((action) => (
@@ -140,13 +140,13 @@ export default function AuditoriaPage() {
 
         {/* Table Filter */}
         <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
             Tabla
           </label>
           <select
             value={selectedTable}
             onChange={(e) => setSelectedTable(e.target.value)}
-            className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
+            className="w-full border border-gray-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 rounded-md px-3 py-2 text-sm"
           >
             <option value="">Todas las tablas</option>
             {uniqueTables.map((table) => (
@@ -160,17 +160,17 @@ export default function AuditoriaPage() {
         {/* Clear Filters */}
         <button
           onClick={handleClearFilters}
-          className="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-md text-sm"
+          className="w-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-zinc-200 px-3 py-2 rounded-md text-sm"
         >
           Limpiar filtros
         </button>
 
         {/* Statistics */}
-        <div className="mt-6 pt-6 border-t border-gray-200">
-          <h3 className="text-sm font-semibold text-gray-700 mb-2">
+        <div className="mt-6 pt-6 border-t border-gray-200 dark:border-zinc-700">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-zinc-300 mb-2">
             Estadísticas
           </h3>
-          <div className="text-sm text-gray-600">
+          <div className="text-sm text-gray-600 dark:text-zinc-400">
             <p>Total de registros: {total}</p>
             <p>Página actual: {currentPage} de {totalPages}</p>
           </div>
@@ -180,9 +180,9 @@ export default function AuditoriaPage() {
       {/* Main Content */}
       <main className="flex-1 flex flex-col">
         {/* Header */}
-        <div className="border-b border-gray-200 bg-white px-6 py-4">
+        <div className="border-b border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-4">
           <div className="flex items-center justify-between mb-4">
-            <h1 className="text-2xl font-bold text-gray-900">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
               Auditoría del Sistema
             </h1>
             <div className="flex gap-2">
@@ -205,7 +205,7 @@ export default function AuditoriaPage() {
               placeholder="Buscar por usuario, email, tabla o descripción..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md"
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 rounded-md"
             />
           </div>
         </div>
@@ -213,52 +213,52 @@ export default function AuditoriaPage() {
         {/* Table */}
         <div className="flex-1 overflow-auto p-6">
           {loading ? (
-            <div className="text-center py-12 text-gray-500">
+            <div className="text-center py-12 text-gray-500 dark:text-zinc-400">
               Cargando registros...
             </div>
           ) : filteredLogs.length === 0 ? (
-            <div className="text-center py-12 text-gray-500">
+            <div className="text-center py-12 text-gray-500 dark:text-zinc-400">
               No se encontraron registros de auditoría
             </div>
           ) : (
-            <div className="bg-white rounded-lg shadow overflow-hidden">
-              <table className="min-w-full divide-y divide-gray-200">
-                <thead className="bg-gray-50">
+            <div className="bg-white dark:bg-zinc-900 rounded-lg shadow dark:border dark:border-zinc-800 overflow-hidden">
+              <table className="min-w-full divide-y divide-gray-200 dark:divide-zinc-700">
+                <thead className="bg-gray-50 dark:bg-zinc-800">
                   <tr>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-zinc-400 uppercase">
                       Fecha/Hora
                     </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-zinc-400 uppercase">
                       Usuario
                     </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-zinc-400 uppercase">
                       Acción
                     </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-zinc-400 uppercase">
                       Tabla
                     </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-zinc-400 uppercase">
                       Descripción
                     </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-zinc-400 uppercase">
                       Estado
                     </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-zinc-400 uppercase">
                       Acciones
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
+                <tbody className="bg-white divide-y divide-gray-200 dark:divide-zinc-700">
                   {filteredLogs.map((log) => (
-                    <tr key={log.id} className="hover:bg-gray-50">
-                      <td className="px-4 py-3 text-sm text-gray-900 whitespace-nowrap">
+                    <tr key={log.id} className="hover:bg-gray-50 dark:hover:bg-zinc-800">
+                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-zinc-100 whitespace-nowrap">
                         {new Date(log.created_at).toLocaleString("es-MX")}
                       </td>
                       <td className="px-4 py-3 text-sm">
-                        <div className="font-medium text-gray-900">
+                        <div className="font-medium text-gray-900 dark:text-zinc-100">
                           {log.user_name}
                         </div>
-                        <div className="text-gray-500">{log.user_email}</div>
+                        <div className="text-gray-500 dark:text-zinc-400">{log.user_email}</div>
                       </td>
                       <td className="px-4 py-3 text-sm">
                         <span
@@ -269,10 +269,10 @@ export default function AuditoriaPage() {
                           {log.action}
                         </span>
                       </td>
-                      <td className="px-4 py-3 text-sm text-gray-900">
+                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-zinc-100">
                         {log.table_name}
                       </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">
+                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-zinc-400">
                         {log.description || "-"}
                       </td>
                       <td className="px-4 py-3 text-sm">
@@ -305,7 +305,7 @@ export default function AuditoriaPage() {
           {!loading && logs.length > 0 && (
             <div className="mt-4 flex flex-wrap items-center justify-between gap-4 px-4">
               {/* Page Info */}
-              <div className="text-sm text-gray-600">
+              <div className="text-sm text-gray-600 dark:text-zinc-400">
                 Mostrando{" "}
                 <span className="font-semibold text-gray-800">
                   {(currentPage - 1) * limit + 1}
@@ -322,11 +322,11 @@ export default function AuditoriaPage() {
               <div className="flex items-center gap-4">
                 {/* Page Size Selector */}
                 <div className="flex items-center gap-2">
-                  <span className="text-sm text-gray-600">Filas por página:</span>
+                  <span className="text-sm text-gray-600 dark:text-zinc-400">Filas por página:</span>
                   <select
                     value={limit}
                     onChange={(e) => handleLimitChange(Number(e.target.value))}
-                    className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    className="px-3 py-1.5 text-sm bg-white dark:bg-zinc-800 dark:text-zinc-100 border border-gray-300 dark:border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                   >
                     <option value={10}>10</option>
                     <option value={20}>20</option>
@@ -340,7 +340,7 @@ export default function AuditoriaPage() {
                     <button
                       onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                       disabled={currentPage === 1}
-                      className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      className="px-4 py-2 border border-gray-300 dark:border-zinc-700 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-800 dark:text-zinc-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                     >
                       Anterior
                     </button>
@@ -350,7 +350,7 @@ export default function AuditoriaPage() {
                     <button
                       onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                       disabled={currentPage === totalPages}
-                      className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      className="px-4 py-2 border border-gray-300 dark:border-zinc-700 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-800 dark:text-zinc-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                     >
                       Siguiente
                     </button>
@@ -375,7 +375,7 @@ export default function AuditoriaPage() {
                   <label className="block text-sm font-medium text-gray-700">
                     ID
                   </label>
-                  <p className="text-sm text-gray-900 font-mono">
+                  <p className="text-sm text-gray-900 dark:text-zinc-100 font-mono">
                     {selectedLog.id}
                   </p>
                 </div>
@@ -383,7 +383,7 @@ export default function AuditoriaPage() {
                   <label className="block text-sm font-medium text-gray-700">
                     Fecha/Hora
                   </label>
-                  <p className="text-sm text-gray-900">
+                  <p className="text-sm text-gray-900 dark:text-zinc-100">
                     {new Date(selectedLog.created_at).toLocaleString("es-MX")}
                   </p>
                 </div>
@@ -391,7 +391,7 @@ export default function AuditoriaPage() {
                   <label className="block text-sm font-medium text-gray-700">
                     Usuario
                   </label>
-                  <p className="text-sm text-gray-900">{selectedLog.user_name}</p>
+                  <p className="text-sm text-gray-900 dark:text-zinc-100">{selectedLog.user_name}</p>
                   <p className="text-xs text-gray-500">{selectedLog.user_email}</p>
                 </div>
                 <div>
@@ -410,13 +410,13 @@ export default function AuditoriaPage() {
                   <label className="block text-sm font-medium text-gray-700">
                     Tabla
                   </label>
-                  <p className="text-sm text-gray-900">{selectedLog.table_name}</p>
+                  <p className="text-sm text-gray-900 dark:text-zinc-100">{selectedLog.table_name}</p>
                 </div>
                 <div>
                   <label className="block text-sm font-medium text-gray-700">
                     Record ID
                   </label>
-                  <p className="text-sm text-gray-900 font-mono">
+                  <p className="text-sm text-gray-900 dark:text-zinc-100 font-mono">
                     {selectedLog.record_id || "-"}
                   </p>
                 </div>
@@ -424,7 +424,7 @@ export default function AuditoriaPage() {
                   <label className="block text-sm font-medium text-gray-700">
                     IP Address
                   </label>
-                  <p className="text-sm text-gray-900">
+                  <p className="text-sm text-gray-900 dark:text-zinc-100">
                     {selectedLog.ip_address || "-"}
                   </p>
                 </div>
@@ -446,16 +446,16 @@ export default function AuditoriaPage() {
 
               {selectedLog.description && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
                     Descripción
                   </label>
-                  <p className="text-sm text-gray-900">{selectedLog.description}</p>
+                  <p className="text-sm text-gray-900 dark:text-zinc-100">{selectedLog.description}</p>
                 </div>
               )}
 
               {selectedLog.old_values && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
                     Valores Anteriores
                   </label>
                   <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto">
@@ -466,7 +466,7 @@ export default function AuditoriaPage() {
 
               {selectedLog.new_values && (
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
                     Valores Nuevos
                   </label>
                   <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto">
@@ -486,7 +486,7 @@ export default function AuditoriaPage() {
                 </div>
               )}
             </div>
-            <div className="p-6 border-t border-gray-200 flex justify-end">
+            <div className="p-6 border-t border-gray-200 dark:border-zinc-700 flex justify-end">
               <button
                 onClick={() => setShowDetails(false)}
                 className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-md"
diff --git a/src/pages/RolesPage.tsx b/src/pages/RolesPage.tsx
index c763fe0..b3899fd 100644
--- a/src/pages/RolesPage.tsx
+++ b/src/pages/RolesPage.tsx
@@ -110,34 +110,34 @@ export default function RolesPage() {
   );
 
   return (
-    <div className="flex gap-6 p-6 w-full bg-gray-100">
+    <div className="flex gap-6 p-6 w-full bg-gray-100 dark:bg-zinc-950">
       {/* LEFT INFO SIDEBAR */}
-      <div className="w-72 bg-white rounded-xl shadow p-4">
-        <h3 className="text-xs font-semibold text-gray-500 mb-3">Role Information</h3>
-        <p className="text-sm text-gray-700 mb-4">
+      <div className="w-72 bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-4">
+        <h3 className="text-xs font-semibold text-gray-500 dark:text-zinc-400 mb-3">Role Information</h3>
+        <p className="text-sm text-gray-700 dark:text-zinc-300 mb-4">
           Manage system roles and their permissions. Roles define what actions users can perform.
         </p>
         
         {activeRole && (
           <div className="mt-6 pt-4 border-t">
-            <h4 className="text-xs font-semibold text-gray-500 mb-2">Selected Role</h4>
+            <h4 className="text-xs font-semibold text-gray-500 dark:text-zinc-400 mb-2">Selected Role</h4>
             <div className="space-y-2">
               <div>
-                <p className="text-xs text-gray-500">Name</p>
-                <p className="text-sm font-medium">{activeRole.name}</p>
+                <p className="text-xs text-gray-500 dark:text-zinc-400">Name</p>
+                <p className="text-sm font-medium dark:text-zinc-200">{activeRole.name}</p>
               </div>
               <div>
-                <p className="text-xs text-gray-500">Description</p>
-                <p className="text-sm">{activeRole.description || "No description"}</p>
+                <p className="text-xs text-gray-500 dark:text-zinc-400">Description</p>
+                <p className="text-sm dark:text-zinc-300">{activeRole.description || "No description"}</p>
               </div>
               <div>
-                <p className="text-xs text-gray-500">Created</p>
-                <p className="text-sm">{new Date(activeRole.created_at).toLocaleDateString()}</p>
+                <p className="text-xs text-gray-500 dark:text-zinc-400">Created</p>
+                <p className="text-sm dark:text-zinc-300">{new Date(activeRole.created_at).toLocaleDateString()}</p>
               </div>
               {activeRole.permissions && Object.keys(activeRole.permissions).length > 0 && (
                 <div>
-                  <p className="text-xs text-gray-500">Permissions</p>
-                  <p className="text-sm">{Object.keys(activeRole.permissions).length} permission groups</p>
+                  <p className="text-xs text-gray-500 dark:text-zinc-400">Permissions</p>
+                  <p className="text-sm dark:text-zinc-300">{Object.keys(activeRole.permissions).length} permission groups</p>
                 </div>
               )}
             </div>
@@ -206,7 +206,7 @@ export default function RolesPage() {
 
         {/* SEARCH */}
         <input 
-          className="bg-white rounded-lg shadow px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:text-zinc-100 rounded-lg shadow px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:placeholder-zinc-500"
           placeholder="Search role by name or description..."
           value={search}
           onChange={e => setSearch(e.target.value)} 
diff --git a/src/pages/UsersPage.tsx b/src/pages/UsersPage.tsx
index 6ec9af2..37dd15a 100644
--- a/src/pages/UsersPage.tsx
+++ b/src/pages/UsersPage.tsx
@@ -246,17 +246,17 @@ export default function UsersPage() {
   });
 
   return (
-    <div className="flex gap-6 p-6 w-full bg-gray-100">
+    <div className="flex gap-6 p-6 w-full bg-gray-100 dark:bg-zinc-950">
       {/* LEFT INFO SIDEBAR */}
-      <div className="w-72 bg-white rounded-xl shadow p-4">
-        <h3 className="text-xs font-semibold text-gray-500 mb-3">Filter Options</h3>
-        <p className="text-sm text-gray-700 mb-4">Filter users by role</p>
+      <div className="w-72 bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-4">
+        <h3 className="text-xs font-semibold text-gray-500 dark:text-zinc-400 mb-3">Filter Options</h3>
+        <p className="text-sm text-gray-700 dark:text-zinc-300 mb-4">Filter users by role</p>
         
         <label className="text-xs font-semibold text-gray-500 mb-2 block">Role</label>
         <select 
           value={selectedRoleFilter} 
           onChange={e => setSelectedRoleFilter(e.target.value)} 
-          className="w-full border px-3 py-2 rounded"
+          className="w-full border dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded"
           disabled={loadingUsers}
         >
           <option value="">All Roles</option>
@@ -294,12 +294,12 @@ export default function UsersPage() {
         </div>
 
         {/* SEARCH */}
-        <input className="bg-white rounded-lg shadow px-4 py-2 text-sm" placeholder="Search user..." value={search} onChange={e => setSearch(e.target.value)} />
+        <input className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:text-zinc-100 dark:placeholder-zinc-500 rounded-lg shadow px-4 py-2 text-sm" placeholder="Search user..." value={search} onChange={e => setSearch(e.target.value)} />
 
         {/* TABLE */}
         {loadingUsers ? (
-          <div className="bg-white rounded-xl shadow p-8 text-center">
-            <p className="text-gray-500">Loading users...</p>
+          <div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-8 text-center">
+            <p className="text-gray-500 dark:text-zinc-400">Loading users...</p>
           </div>
         ) : (
           <MaterialTable
@@ -329,8 +329,8 @@ export default function UsersPage() {
       {/* MODAL */}
       {showModal && (
         <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
-          <div className="bg-white rounded-xl p-6 w-96 space-y-3">
-            <h2 className="text-lg font-semibold">{editingId ? "Edit User" : "Add User"}</h2>
+          <div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl p-6 w-96 space-y-3">
+            <h2 className="text-lg font-semibold dark:text-white">{editingId ? "Edit User" : "Add User"}</h2>
             
             {error && (
               <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded text-sm">
@@ -339,7 +339,7 @@ export default function UsersPage() {
             )}
             
             <input 
-              className="w-full border px-3 py-2 rounded" 
+              className="w-full border dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded" 
               placeholder="Full Name *" 
               value={form.name} 
               onChange={e => setForm({...form, name: e.target.value})}
@@ -347,7 +347,7 @@ export default function UsersPage() {
             />
             
             <input 
-              className="w-full border px-3 py-2 rounded" 
+              className="w-full border dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded" 
               type="email"
               placeholder="Email *" 
               value={form.email} 
@@ -357,7 +357,7 @@ export default function UsersPage() {
             
             {!editingId && (
               <input 
-                className="w-full border px-3 py-2 rounded" 
+                className="w-full border dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded" 
                 type="password"
                 placeholder="Password * (min 8 characters)" 
                 value={form.password || ""} 
@@ -369,7 +369,7 @@ export default function UsersPage() {
             <select 
               value={form.roleId} 
               onChange={e => setForm({...form, roleId: e.target.value, projectId: ""})} 
-              className="w-full border px-3 py-2 rounded" 
+              className="w-full border dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded" 
               disabled={loadingModalRoles || saving}
             >
               <option value="">{loadingModalRoles ? "Loading roles..." : "Select Role *"}</option>
@@ -380,7 +380,7 @@ export default function UsersPage() {
               <select 
                 value={form.projectId || ""} 
                 onChange={e => setForm({...form, projectId: e.target.value})} 
-                className="w-full border px-3 py-2 rounded" 
+                className="w-full border dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded" 
                 disabled={loadingProjects || saving}
               >
                 <option value="">{loadingProjects ? "Loading projects..." : "Select Project *"}</option>
diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx
index f1330eb..8c89964 100644
--- a/src/pages/concentrators/ConcentratorsPage.tsx
+++ b/src/pages/concentrators/ConcentratorsPage.tsx
@@ -136,7 +136,7 @@ export default function ConcentratorsPage() {
   };
 
   return (
-    <div className="flex gap-6 p-6 w-full bg-gray-100">
+    <div className="flex gap-6 p-6 w-full bg-gray-100 dark:bg-zinc-950">
       <aside className="w-[420px] shrink-0">
         <ConcentratorsSidebar
           loadingProjects={c.loadingProjects}
@@ -224,7 +224,7 @@ export default function ConcentratorsPage() {
         </div>
 
         <input
-          className="bg-white rounded-lg shadow px-4 py-2 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
+          className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:text-zinc-100 rounded-lg shadow px-4 py-2 text-sm disabled:opacity-60 disabled:cursor-not-allowed dark:placeholder-zinc-500"
           placeholder="Buscar concentrador..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
diff --git a/src/pages/concentrators/ConcentratorsSidebar.tsx b/src/pages/concentrators/ConcentratorsSidebar.tsx
index aadd7b7..2c66cb8 100644
--- a/src/pages/concentrators/ConcentratorsSidebar.tsx
+++ b/src/pages/concentrators/ConcentratorsSidebar.tsx
@@ -59,12 +59,12 @@ export default function ConcentratorsSidebar({
   );
 
   return (
-    <div className="bg-white rounded-xl shadow p-4 flex flex-col h-[calc(100vh-48px)]">
+    <div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-4 flex flex-col h-[calc(100vh-48px)]">
       {/* Header */}
       <div className="flex items-start justify-between gap-3">
         <div>
-          <p className="text-sm text-gray-500">Proyectos</p>
-          <p className="text-xs text-gray-400">
+          <p className="text-sm text-gray-500 dark:text-zinc-400">Proyectos</p>
+          <p className="text-xs text-gray-400 dark:text-zinc-500">
             Seleccionado:{" "}
             <span className="font-semibold">
               {projects.find((p) => p.id === selectedProject)?.name || "—"}
@@ -86,7 +86,7 @@ export default function ConcentratorsSidebar({
       <div className="mt-4 relative">
 
         {typesMenuOpen && (
-          <div className="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden">
+          <div className="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 shadow-lg overflow-hidden">
             {options.map((opt) => {
               const active = sampleView === opt.key;
               return (
@@ -95,13 +95,13 @@ export default function ConcentratorsSidebar({
                   type="button"
                   onClick={() => onChangeSampleView(opt.key)}
                   className={[
-                    "w-full px-3 py-2 text-left text-sm flex items-center justify-between hover:bg-gray-50",
+                    "w-full px-3 py-2 text-left text-sm flex items-center justify-between hover:bg-gray-50 dark:hover:bg-zinc-700",
                     active ? "bg-blue-50/60" : "bg-white",
                   ].join(" ")}
                 >
                   <span
                     className={`font-semibold ${
-                      active ? "text-blue-700" : "text-gray-700"
+                      active ? "text-blue-700" : "text-gray-700 dark:text-zinc-200"
                     }`}
                   >
                     {opt.label}
@@ -122,7 +122,7 @@ export default function ConcentratorsSidebar({
           value={selectedMeterTypeId}
           onChange={(e) => onSelectMeterTypeId(e.target.value)}
           disabled={loadingMeterTypes}
-          className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed"
+          className="w-full rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed"
         >
           <option value="">Todos los tipos de toma</option>
           {meterTypes.map((type) => (
@@ -136,9 +136,9 @@ export default function ConcentratorsSidebar({
       {/* List */}
       <div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
         {loadingProjects ? (
-          <div className="text-sm text-gray-500">Loading projects...</div>
+          <div className="text-sm text-gray-500 dark:text-zinc-400">Loading projects...</div>
         ) : projects.length === 0 ? (
-          <div className="text-sm text-gray-500">
+          <div className="text-sm text-gray-500 dark:text-zinc-400">
             {selectedMeterTypeId 
               ? `No hay proyectos con el tipo de toma seleccionado.`
               : "No hay proyectos disponibles."
@@ -155,16 +155,16 @@ export default function ConcentratorsSidebar({
                 className={[
                   "rounded-xl border p-4 transition cursor-pointer",
                   active
-                    ? "border-blue-600 bg-blue-50/40"
-                    : "border-gray-200 bg-white hover:bg-gray-50",
+                    ? "border-blue-600 bg-blue-50/40 dark:bg-blue-900/30"
+                    : "border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700",
                 ].join(" ")}
               >
                 <div className="flex items-start justify-between gap-3">
                   <div>
-                    <p className="text-sm font-semibold text-gray-800">
+                    <p className="text-sm font-semibold text-gray-800 dark:text-zinc-100">
                       {p.name}
                     </p>
-                    <p className="text-xs text-gray-500">{p.region}</p>
+                    <p className="text-xs text-gray-500 dark:text-zinc-400">{p.region}</p>
                   </div>
 
                   <span
@@ -172,7 +172,7 @@ export default function ConcentratorsSidebar({
                       "text-xs font-semibold px-2 py-1 rounded-full",
                       p.status === "ACTIVO"
                         ? "bg-green-100 text-green-700"
-                        : "bg-gray-200 text-gray-700",
+                        : "bg-gray-200 text-gray-700 dark:text-zinc-200",
                     ].join(" ")}
                   >
                     {p.status}
@@ -181,34 +181,34 @@ export default function ConcentratorsSidebar({
 
                 <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
                   <div className="flex justify-between gap-2">
-                    <span className="text-gray-500">Subproyectos</span>
-                    <span className="font-medium text-gray-800">
+                    <span className="text-gray-500 dark:text-zinc-400">Subproyectos</span>
+                    <span className="font-medium text-gray-800 dark:text-zinc-100">
                       {p.projects}
                     </span>
                   </div>
 
                   <div className="flex justify-between gap-2">
-                    <span className="text-gray-500">Concentradores</span>
-                    <span className="font-medium text-gray-800">
+                    <span className="text-gray-500 dark:text-zinc-400">Concentradores</span>
+                    <span className="font-medium text-gray-800 dark:text-zinc-100">
                       {p.concentrators}
                     </span>
                   </div>
 
                   <div className="flex justify-between gap-2">
-                    <span className="text-gray-500">Alertas activas</span>
-                    <span className="font-medium text-gray-800">
+                    <span className="text-gray-500 dark:text-zinc-400">Alertas activas</span>
+                    <span className="font-medium text-gray-800 dark:text-zinc-100">
                       {p.activeAlerts}
                     </span>
                   </div>
 
                   <div className="flex justify-between gap-2">
-                    <span className="text-gray-500">Última sync</span>
-                    <span className="font-medium text-gray-800">{p.lastSync}</span>
+                    <span className="text-gray-500 dark:text-zinc-400">Última sync</span>
+                    <span className="font-medium text-gray-800 dark:text-zinc-100">{p.lastSync}</span>
                   </div>
 
                   <div className="col-span-2 flex justify-between gap-2">
-                    <span className="text-gray-500">Responsable</span>
-                    <span className="font-medium text-gray-800">
+                    <span className="text-gray-500 dark:text-zinc-400">Responsable</span>
+                    <span className="font-medium text-gray-800 dark:text-zinc-100">
                       {p.contact}
                     </span>
                   </div>
@@ -237,7 +237,7 @@ export default function ConcentratorsSidebar({
         )}
       </div>
 
-      <div className="pt-3 border-t text-xs text-gray-500">
+      <div className="pt-3 border-t text-xs text-gray-500 dark:text-zinc-400">
         Nota: region/alertas/última sync están en modo demostración hasta integrar
         backend.
       </div>
diff --git a/src/pages/consumption/ConsumptionPage.tsx b/src/pages/consumption/ConsumptionPage.tsx
index 715ad75..ee2c43d 100644
--- a/src/pages/consumption/ConsumptionPage.tsx
+++ b/src/pages/consumption/ConsumptionPage.tsx
@@ -211,13 +211,13 @@ export default function ConsumptionPage() {
   const activeFiltersCount = [selectedProject, startDate, endDate].filter(Boolean).length;
 
   return (
-    <div className="min-h-full bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 p-6">
+    <div className="min-h-full bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 dark:from-zinc-950 dark:via-zinc-950 dark:to-zinc-950 p-6">
       <div className="max-w-[1600px] mx-auto space-y-6">
         {/* Header */}
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-slate-800">Consumo de Agua</h1>
-            <p className="text-slate-500 text-sm mt-0.5">
+            <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Consumo de Agua</h1>
+            <p className="text-slate-500 dark:text-zinc-400 text-sm mt-0.5">
               Monitoreo en tiempo real de lecturas
             </p>
           </div>
@@ -231,7 +231,7 @@ export default function ConsumptionPage() {
             </button>
             <button
               onClick={() => loadData(pagination.page)}
-              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 hover:border-slate-300 transition-all shadow-sm"
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 dark:text-zinc-300 bg-white dark:bg-zinc-800 border border-slate-200 dark:border-zinc-700 rounded-xl hover:bg-slate-50 dark:hover:bg-zinc-700 hover:border-slate-300 dark:hover:border-zinc-600 transition-all shadow-sm"
             >
               <RefreshCcw size={16} />
               Actualizar
@@ -288,9 +288,9 @@ export default function ConsumptionPage() {
         </div>
 
         {/* Table Card */}
-        <div className="bg-white rounded-2xl shadow-sm shadow-slate-200/50 border border-slate-200/60 overflow-hidden">
+        <div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm shadow-slate-200/50 dark:shadow-none border border-slate-200/60 dark:border-zinc-800 overflow-hidden">
           {/* Table Header */}
-          <div className="px-5 py-4 border-b border-slate-100 flex flex-wrap items-center justify-between gap-4">
+          <div className="px-5 py-4 border-b border-slate-100 dark:border-zinc-800 flex flex-wrap items-center justify-between gap-4">
             <div className="flex items-center gap-3">
               <div className="relative">
                 <Search
@@ -302,7 +302,7 @@ export default function ConsumptionPage() {
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   placeholder="Buscar lecturas..."
-                  className="w-64 pl-10 pr-4 py-2 text-sm bg-slate-50 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:bg-white transition-all"
+                  className="w-64 pl-10 pr-4 py-2 text-sm bg-slate-50 dark:bg-zinc-800 dark:text-zinc-100 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:bg-white transition-all"
                 />
               </div>
 
@@ -334,9 +334,9 @@ export default function ConsumptionPage() {
               )}
             </div>
 
-            <div className="flex items-center gap-4 text-sm text-slate-500">
+            <div className="flex items-center gap-4 text-sm text-slate-500 dark:text-zinc-400">
               <span>
-                <span className="font-semibold text-slate-700">{filteredReadings.length}</span>{" "}
+                <span className="font-semibold text-slate-700 dark:text-zinc-200">{filteredReadings.length}</span>{" "}
                 {pagination.total > filteredReadings.length && `de ${pagination.total} `}
                 lecturas
               </span>
@@ -367,7 +367,7 @@ export default function ConsumptionPage() {
 
           {/* Filters Panel */}
           {showFilters && (
-            <div className="px-5 py-4 bg-slate-50/50 border-b border-slate-100 flex flex-wrap items-center gap-4">
+            <div className="px-5 py-4 bg-slate-50/50 border-b border-slate-100 dark:border-zinc-800 flex flex-wrap items-center gap-4">
               <div className="flex items-center gap-2">
                 <label className="text-xs font-medium text-slate-500 uppercase tracking-wide">
                   Proyecto
@@ -634,7 +634,7 @@ function StatCard({
           {loading ? (
             <div className="h-8 w-24 bg-slate-100 rounded-lg animate-pulse" />
           ) : (
-            <p className="text-2xl font-bold text-slate-800">{value}</p>
+            <p className="text-2xl font-bold text-slate-800 dark:text-white">{value}</p>
           )}
           {trend && !loading && (
             <div className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">
diff --git a/src/pages/meters/MeterPage.tsx b/src/pages/meters/MeterPage.tsx
index 2583818..b6757a2 100644
--- a/src/pages/meters/MeterPage.tsx
+++ b/src/pages/meters/MeterPage.tsx
@@ -207,7 +207,7 @@ export default function MetersPage({
   };
 
   return (
-    <div className="flex gap-6 p-6 w-full bg-gray-100">
+    <div className="flex gap-6 p-6 w-full bg-gray-100 dark:bg-zinc-950">
       {/* SIDEBAR */}
       <MetersSidebar
         loadingProjects={m.loadingProjects}
@@ -289,7 +289,7 @@ export default function MetersPage({
         </div>
 
         <input
-          className="bg-white rounded-lg shadow px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:text-zinc-100 rounded-lg shadow px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:placeholder-zinc-500"
           placeholder="Buscar por nombre, serial, ubicación o concentrador..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
diff --git a/src/pages/meters/MetersSidebar.tsx b/src/pages/meters/MetersSidebar.tsx
index 8d0b363..a44a556 100644
--- a/src/pages/meters/MetersSidebar.tsx
+++ b/src/pages/meters/MetersSidebar.tsx
@@ -78,12 +78,12 @@ export default function MetersSidebar({
 
   return (
     <aside className="w-[420px] shrink-0">
-      <div className="bg-white rounded-xl shadow p-4 flex flex-col h-[calc(100vh-48px)]">
+      <div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-4 flex flex-col h-[calc(100vh-48px)]">
         {/* Header */}
         <div className="flex items-start justify-between gap-3">
           <div>
-            <p className="text-sm text-gray-500">Proyectos</p>
-            <p className="text-xs text-gray-400">
+            <p className="text-sm text-gray-500 dark:text-zinc-400">Proyectos</p>
+            <p className="text-xs text-gray-400 dark:text-zinc-500">
               Seleccionado:{" "}
               <span className="font-semibold">
                 {selectedProject || "—"}
@@ -106,7 +106,7 @@ export default function MetersSidebar({
         <div className="mt-4 relative" ref={menuRef}>
 
           {typesMenuOpen && (
-            <div className="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden">
+            <div className="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 shadow-lg overflow-hidden">
               {TAKE_TYPE_OPTIONS.map((opt) => {
                 const active = takeType === opt.key;
 
@@ -125,13 +125,13 @@ export default function MetersSidebar({
                       }
                     }}
                     className={[
-                      "w-full px-3 py-2 text-left text-sm flex items-center justify-between hover:bg-gray-50",
+                      "w-full px-3 py-2 text-left text-sm flex items-center justify-between hover:bg-gray-50 dark:hover:bg-zinc-700",
                       active ? "bg-blue-50/60" : "bg-white",
                     ].join(" ")}
                   >
                     <span
                       className={`font-semibold ${
-                        active ? "text-blue-700" : "text-gray-700"
+                        active ? "text-blue-700" : "text-gray-700 dark:text-zinc-200"
                       }`}
                     >
                       {opt.label}
@@ -153,7 +153,7 @@ export default function MetersSidebar({
             value={selectedMeterTypeId}
             onChange={(e) => onSelectMeterTypeId(e.target.value)}
             disabled={loadingMeterTypes}
-            className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed"
+            className="w-full rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed"
           >
             <option value="">Todos los tipos de toma</option>
             {meterTypes.map((type) => (
@@ -167,7 +167,7 @@ export default function MetersSidebar({
         {/* List */}
         <div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
           {loadingProjects ? (
-            <div className="text-sm text-gray-500">Cargando proyectos...</div>
+            <div className="text-sm text-gray-500 dark:text-zinc-400">Cargando proyectos...</div>
           ) : projects.length === 0 ? (
             <div className="text-sm text-gray-500 text-center py-10">
               {selectedMeterTypeId 
@@ -190,8 +190,8 @@ export default function MetersSidebar({
                   className={[
                     "rounded-xl border p-4 transition cursor-pointer",
                     active
-                      ? "border-blue-600 bg-blue-50/40"
-                      : "border-gray-200 bg-white hover:bg-gray-50",
+                      ? "border-blue-600 bg-blue-50/40 dark:bg-blue-900/30"
+                      : "border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700",
                     isMockMode ? "opacity-90" : "",
                   ].join(" ")}
                   title={
@@ -202,10 +202,10 @@ export default function MetersSidebar({
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div>
-                      <p className="text-sm font-semibold text-gray-800">
+                      <p className="text-sm font-semibold text-gray-800 dark:text-zinc-100">
                         {p.name}
                       </p>
-                      <p className="text-xs text-gray-500">{p.region}</p>
+                      <p className="text-xs text-gray-500 dark:text-zinc-400">{p.region}</p>
                     </div>
 
                     <span
@@ -213,7 +213,7 @@ export default function MetersSidebar({
                         "text-xs font-semibold px-2 py-1 rounded-full",
                         p.status === "ACTIVO"
                           ? "bg-green-100 text-green-700"
-                          : "bg-gray-200 text-gray-700",
+                          : "bg-gray-200 text-gray-700 dark:text-zinc-200",
                       ].join(" ")}
                     >
                       {p.status}
@@ -222,36 +222,36 @@ export default function MetersSidebar({
 
                   <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
                     <div className="flex justify-between gap-2">
-                      <span className="text-gray-500">Subproyectos</span>
-                      <span className="font-medium text-gray-800">
+                      <span className="text-gray-500 dark:text-zinc-400">Subproyectos</span>
+                      <span className="font-medium text-gray-800 dark:text-zinc-100">
                         {p.projects}
                       </span>
                     </div>
 
                     <div className="flex justify-between gap-2">
-                      <span className="text-gray-500">Medidores</span>
-                      <span className="font-medium text-gray-800">
+                      <span className="text-gray-500 dark:text-zinc-400">Medidores</span>
+                      <span className="font-medium text-gray-800 dark:text-zinc-100">
                         {p.meters}
                       </span>
                     </div>
 
                     <div className="flex justify-between gap-2">
-                      <span className="text-gray-500">Alertas activas</span>
-                      <span className="font-medium text-gray-800">
+                      <span className="text-gray-500 dark:text-zinc-400">Alertas activas</span>
+                      <span className="font-medium text-gray-800 dark:text-zinc-100">
                         {p.activeAlerts}
                       </span>
                     </div>
 
                     <div className="flex justify-between gap-2">
-                      <span className="text-gray-500">Última sync</span>
-                      <span className="font-medium text-gray-800">
+                      <span className="text-gray-500 dark:text-zinc-400">Última sync</span>
+                      <span className="font-medium text-gray-800 dark:text-zinc-100">
                         {p.lastSync}
                       </span>
                     </div>
 
                     <div className="col-span-2 flex justify-between gap-2">
-                      <span className="text-gray-500">Responsable</span>
-                      <span className="font-medium text-gray-800">
+                      <span className="text-gray-500 dark:text-zinc-400">Responsable</span>
+                      <span className="font-medium text-gray-800 dark:text-zinc-100">
                         {p.contact}
                       </span>
                     </div>
@@ -288,7 +288,7 @@ export default function MetersSidebar({
           )}
         </div>
 
-        <div className="pt-3 border-t text-xs text-gray-500">
+        <div className="pt-3 border-t text-xs text-gray-500 dark:text-zinc-400">
           Nota: region/alertas/última sync están en modo demostración hasta
           integrar backend.
         </div>
diff --git a/src/pages/projects/ProjectsPage.tsx b/src/pages/projects/ProjectsPage.tsx
index 033ed10..fa000d4 100644
--- a/src/pages/projects/ProjectsPage.tsx
+++ b/src/pages/projects/ProjectsPage.tsx
@@ -159,7 +159,7 @@ export default function ProjectsPage() {
   );
 
   return (
-    <div className="flex gap-6 p-6 w-full bg-gray-100">
+    <div className="flex gap-6 p-6 w-full bg-gray-100 dark:bg-zinc-950">
       <div className="flex-1 flex flex-col gap-6">
         {/* HEADER */}
         <div
@@ -214,7 +214,7 @@ export default function ProjectsPage() {
 
         {/* SEARCH */}
         <input
-          className="bg-white rounded-lg shadow px-4 py-2 text-sm"
+          className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:text-zinc-100 rounded-lg shadow px-4 py-2 text-sm dark:placeholder-zinc-500"
           placeholder="Buscar proyecto..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}