Colores y modo oscuro
Elige el color de marca, cambia las paletas clara y oscura y decide cómo arranca el panel.
El color de marca
El color de marca pinta los botones, el elemento activo de la barra lateral, los destacados de los gráficos y las tarjetas de pago. Se incluyen cuatro temas:
| Tema | Color principal |
|---|---|
orange, el predeterminado | #fe4e00 |
blue | #3b82f6 |
golden | #d4a017 |
silver | #6b7280 |
El tema en uso es DEFAULT_THEME_COLOR en src/Demo/ThemeColorSwitcher/themes.ts. Asígnale el id de otro tema:
export const DEFAULT_THEME_COLOR = "blue";Para usar tu propio color, edita un tema en el mismo archivo, como brandPrimary para el color principal y brandPrimaryLight para su tono más claro, y mantén su id en DEFAULT_THEME_COLOR.
Con el modo demo activado, un selector flotante te permite probar los temas, y el navegador recuerda lo que eliges ahí. Esa elección prevalece sobre DEFAULT_THEME_COLOR hasta que borres los datos del sitio. Con el modo demo desactivado, el selector está oculto y la app siempre usa DEFAULT_THEME_COLOR.
Modo claro y oscuro
El botón de sol y luna del encabezado, y Dark Mode en Settings, Preferences, alternan entre oscuro y claro. El panel empieza en modo oscuro y el navegador recuerda el modo que elige cada usuario.
Los fondos, bordes y colores de texto de ambos modos son variables en src/styles/theme.css: las claras en :root, las oscuras en .dark. Por ejemplo, el fondo de la página:
:root {
--color-bg-primary: #f8fafc;
}
.dark {
--color-bg-primary: #030303;
}Estas se mantienen igual en todos los temas de marca; solo cambian los colores de marca con el tema.
Cómo se aplican los colores
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Cómo se fijan el color de marca y el modo antes de que se pinte la página, y qué variables define un tema.
Añade un tema o quita el selector
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Cómo añadir un quinto tema de color, empezar en modo claro y quitar del código el selector de la demo.