9 artículos con la etiqueta #theming en hackpile.dev.
- CSS Custom Properties
Domina los --style-props de Svelte 5 para pasar variables CSS a componentes — la forma más limpia de construir UIs personalizables y con temas sin romper la encapsulación.
- class
Domina el atributo class de Svelte 5 para gestión dinámica de clases CSS, desde condicionales básicos hasta patrones avanzados con objetos y arrays.
- Personalización Dinámica de Temas en Tiempo de Ejecución
Cuándo JavaScript debe establecer propiedades personalizadas de CSS en tiempo de ejecución: selectores de color para usuarios, temas controlados por API, paletas calculadas.
- Cambio de Tema Simple con el Patrón de Hook useTheme
Construye un sistema de temas ligero y sin parpadeos usando estado reactivo a nivel de módulo y un hook useTheme. El enfoque más simple para el modo oscuro que funciona en todas partes.
- Sistemas de Temas con Context
Domina la gestión de temas en Svelte 5 con modos claro/oscuro, detección del sistema, anulaciones locales, soporte SSR y variables CSS.
- Cómo Funcionan los Estilos con Alcance
Comprende cómo Svelte aplica alcance automático al CSS para prevenir conflictos de estilos entre componentes.
- Clases Dinámicas
Aplica clases CSS de forma condicional según el estado del componente.
- Agregar Estados de Hover
Crea efectos de hover responsivos e interactivos que proporcionan retroalimentación y mejoran la experiencia del usuario.
- Estilos Globales
Configura tipografía, colores y estilos base para toda la aplicación que se aplican en todos los componentes.