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:
24
apps/mi-dia/src/lib/chart-theme.ts
Normal file
24
apps/mi-dia/src/lib/chart-theme.ts
Normal 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 } }
|
||||
Reference in New Issue
Block a user