DEV Community

DowarDev
DowarDev

Posted on

Domina el arte de la personalización en Ionic: Crea paletas de colores únicas paso a paso

Ionic nos brinda la oportunidad de conferir un toque distintivo a nuestras aplicaciones mediante la creación de paletas de colores personalizadas. Gracias a una herramienta integrada, podemos adaptar nuestros componentes visuales a nuestros gustos y necesidades específicas.

Crear color

Para comenzar este proceso, dirigiremos nuestra atención a la documentación oficial de Ionic. En ella, encontraremos una utilidad diseñada específicamente para generar colores personalizados. Su uso es sumamente sencillo:

preview ionic tool

  1. Nombre: Asigna un nombre al color que servirá como identificador en nuestro código.
  2. Color: Especifica el tono exacto que deseamos emplear.
  3. Resultado: Reglas CSS

Instalación

Ionic nos proporciona un archivo denominado variables.css con la finalidad de albergar las reglas de estilo que se aplicarán a toda la aplicación. En este archivo, añadiremos las propiedades CSS correspondientes al color que hemos creado.

:root {

    --ion-color-new: `#69bb7b`;

    --ion-color-new-rgb: `105,187,123`;

    --ion-color-new-contrast: `#000000`;

    --ion-color-new-contrast-rgb: `0,0,0`;

    --ion-color-new-shade: `#5ca56c`;

    --ion-color-new-tint: `#78c288`;

}

.ion-color-new {

    --ion-color-base: var(--ion-color-new);

    --ion-color-base-rgb: var(--ion-color-new-rgb);

    --ion-color-contrast: var(--ion-color-new-contrast);

    --ion-color-contrast-rgb: var(--ion-color-new-contrast-rgb);

    --ion-color-shade: var(--ion-color-new-shade);

    --ion-color-tint: var(--ion-color-new-tint);

}
Enter fullscreen mode Exit fullscreen mode

Aplicar color

Una vez que hemos definido nuestros colores personalizados, podemos aplicarlos a los componentes de Ionic de manera intuitiva. El proceso es similar al utilizado para los colores predefinidos del framework.

Por ejemplo, para cambiar el color de un botón, simplemente añadiremos el atributo color con el nombre del color personalizado que hemos creado:

<ion-button color="new">Hola mundo</ion-button>
Enter fullscreen mode Exit fullscreen mode

Conclusión

¡Has llegado al final de este tutorial y ahora eres un experto en personalizar los colores en Ionic! Con esta guía, podrás crear aplicaciones únicas y atractivas que reflejen tu estilo personal. Recuerda que la elección de los colores adecuados es fundamental para transmitir emociones y crear una experiencia de usuario memorable. ¡Anímate a experimentar y comparte tus creaciones con la comunidad Ionic!

Fuente: https://dowar.xyz/blog/post/54

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay