fix(dark-mode): dark mode completo + gráficas adaptadas

Dark mode fixes:
- Cards secundarias: Mis capturas, Mis clientes, Actividades, Apartados por vencer, Equipo
- Botones: Exportar, Descartar, Afluencia, Agendo, Forzar reconexión, Subir archivo
- Config: ModoTrabajo, Usuarios, Sistema, RolesPermisos, ConfigPage
- Cotizador: inputs, tabs, placeholder, botón compartir
- Alta clientes: BotonOcrIne, FileUploader
- Cobranza: toggle dashboard, modal abono
- Dashboards: tabs

Gráficas Recharts:
- CSS variables para colores chart (grid, text, tooltip)
- Helper isDark() + axisTextColor() + gridStroke() + tooltipProps()
- DashboardVendedor: grid, axes, tooltips adaptados
- TableroGeneral: grid, axes, tooltips (BarChart, Funnel, PieChart)
- MiTablero: tooltip adaptado
- Perfilamiento: grid, axes, tooltip

7 apps construidas limpias.
This commit is contained in:
2026-09-07 06:44:08 +00:00
parent c77b4c0628
commit 8b65f903d3
20 changed files with 184 additions and 105 deletions

View File

@@ -0,0 +1,24 @@
/**
* Helpers de tema para gráficas Recharts.
*
* Recharts renderiza SVG puro y no resuelve CSS custom properties en
* atributos como `fill` / `stroke`, así que necesitamos funciones que
* lean el estado dark-mode del documento y devuelvan los colores
* apropiados como strings literales.
*/
/** `true` cuando el `<html>` lleva la clase `dark` (Tailwind convention). */
export const isDark = (): boolean =>
typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
/** Color de texto para los ejes (XAxis / YAxis tick fill). */
export const axisTextColor = (): string => (isDark() ? '#94A3B8' : '#64748B')
/** Color de la cuadrícula (CartesianGrid stroke). */
export const gridStroke = (): string => (isDark() ? '#334155' : '#E5E7EB')
/** Props comunes de Tooltip para aplicar estilo dark/light. */
export const tooltipProps = (): Record<string, unknown> =>
isDark()
? { contentStyle: { backgroundColor: '#1E293B', borderColor: '#334155', color: '#E2E8F0', borderRadius: 8, fontSize: 12 } }
: { contentStyle: { borderRadius: 8, fontSize: 12 } }