Selector de color
Agrega un widget de selector de color para una configuración visual amigable para editores dentro de EmDash CMS.
Extensión
Selector de color
Agrega un widget de selector de color para una configuración visual amigable para editores dentro de EmDash CMS.
Detalles del producto
- Categoría
- Experiencia del editor
- Estado
- Disponible
- Versión
- Incluido en beta
Color Picker es un plugin centrado en la experiencia editorial: agrega un widget de selector de color para que administradores configuren colores de marca visualmente, en lugar de escribir códigos hex en campos de texto plano. Demuestra que los plugins de EmDash no son solo para integraciones pesadas; también mejoran la UX diaria de edición. Consulta packages/plugins/color en el repositorio de EmDash.
Instalación
- Habilita el plugin Color Picker desde el admin de EmDash.
- En tu modelo de contenido o esquema, conecta el widget de color a los campos donde diseño deba elegir colores (acentos del tema, colores de botones, insignias de categoría).
- Previsualiza la interfaz de admin para confirmar que el selector se renderiza y persiste valores al guardar.
Configuración
Normalmente definirás:
- Colores por defecto — puntos de partida seguros de marca para nuevas entradas.
- Formatos permitidos — hex, RGB o variables CSS, según lo que consuma tu tema.
- Pistas de contraste o accesibilidad — algunos equipos agregan notas en descripciones de campo cuando ciertos colores deben cumplir contraste WCAG sobre fondos conocidos.
Ejemplo (conceptual): una plantilla de marketing podría almacenar primaryColor y secondaryColor como #2563eb y #64748b, referenciados en componentes Astro mediante variables CSS definidas en build.
Escenarios de uso
- Personalización de tema — sitios de marketing donde cada campaña necesita un acento ligeramente distinto sin nuevos despliegues.
- Sistemas de diseño — mantiene elecciones de paleta dentro de campos estructurados en lugar de estilos inline dispersos.
- Productos white-label — socios eligen colores dentro de límites que tú defines.
Consejos operativos
- Documenta cómo se mapean colores a tokens del frontend para que ingeniería no hardcodee duplicados.
- Valida valores al guardar si necesitas bloquear verdes neón en un sitio de marca sanitaria.
- Al exportar contenido, incluye campos de color en tu checklist de migración para que las reimportaciones no pierdan estilos.