Aprender a usar estilos en Bubble te permite cambiar el color, fondo y comportamiento de varios elementos a la vez sin editarlos uno por uno. Esta guía te muestra cómo crear, aplicar y modificar un estilo para los iconos de la cabecera, ideal si estás construyendo una aplicación tipo Todoist y quieres mantener una apariencia coherente.

Qué son los estilos en Bubble y por qué importan

Los estilos en Bubble funcionan como plantillas visuales reutilizables. Defines una vez el color, fondo, bordes o tipografía, y luego aplicas ese mismo estilo a todos los elementos que necesites. Si más adelante quieres cambiar el color de los iconos de tu cabecera, modificas el estilo y los cambios se propagan automáticamente.

¿Qué es un estilo en Bubble? Es una configuración visual reutilizable que defines una vez y aplicas a varios elementos. Si lo modificas, todos los elementos que lo usan se actualizan al mismo tiempo.

Ya habías tocado los estilos cuando trabajaste con grupos en el motor responsivo. Ahora vas a darle un uso editorial: unificar la apariencia de los iconos de la cabecera.

Cómo crear un estilo nuevo para tus iconos

Selecciona el icono de hamburguesa y haz doble clic para abrir el editor de propiedades. En la zona central encontrarás el campo Style, que por defecto trae un estilo estándar.

Despliega el selector y elige la última opción: crear un nuevo estilo. Bubble te pedirá un nombre, y aquí viene un consejo que te va a ahorrar muchos dolores de cabeza: usa nombres relacionados con la aplicación o la página donde lo aplicas. En este caso, el nombre apropiado es tareas_iconoCabecera.

• Abre el editor de propiedades del icono con doble clic.
• Despliega el selector de Style y elige crear nuevo.
• Asigna un nombre descriptivo como tareas_iconoCabecera.

Después de crearlo, Bubble te muestra que el estilo ya está activo, pero el icono sigue viéndose igual. Eso es porque aún no has editado sus propiedades visuales.

Cómo editar el color del icono dentro del estilo

Pulsa en Edit style y entrarás a la página de edición de estilos. A la derecha verás la pestaña de apariencia, idéntica a la del editor de propiedades. La primera opción es el color, justo lo que querías cambiar.

Abre el selector de color y elige blanco. Puedes ajustar tonos con el croma deslizante o modificar la transparencia, pero en este caso basta con seleccionar blanco directamente. Vuelves a Design y verás que el icono ya luce blanco sobre la cabecera.

Cómo reutilizar el estilo en otros iconos

Aquí está la magia de los estilos. Selecciona el icono de la casa, abre el selector de Style y elige el estilo que acabas de crear. Bubble aplica todas las propiedades automáticamente y el icono se vuelve blanco sin que tengas que tocar nada más.

¿Cómo aplico un estilo existente a otro elemento? Selecciona el elemento, abre el selector de Style en sus propiedades y elige el estilo guardado. Bubble copia toda la configuración visual al instante.

Esta es la razón por la que conviene usar estilos en todos los elementos posibles desde el inicio. Cuando llegue el momento de hacer un rediseño o ajustar la paleta de colores, cambiarás un solo estilo y la aplicación entera se actualizará.

Cómo crear un efecto hover con estilos condicionales

Fíjate en Todoist: cuando pasas el cursor sobre un icono, el fondo cambia al mismo color que la barra de búsqueda. Para replicar ese comportamiento en Bubble, vas a usar la opción Conditional dentro del estilo.

Vuelve al estilo tareas_iconoCabecera y entra a la pestaña Conditional. Ahí defines la condición con When: selecciona This icon is hovered, es decir, cuando el cursor sobrevuela el icono.

• Define la condición: This icon is hovered.
• Elige la propiedad a cambiar: Background style.
• Selecciona Flat color y asigna el color de fondo.

De dónde sacar el color exacto del fondo

Para que el hover coincida con la barra de búsqueda, copia el código de color que ya tienes ahí. Vuelve a Design, abre las propiedades de la barra de búsqueda en su pestaña de apariencia, copia el código hexadecimal y pégalo en el campo Background color de la condición.

¿Qué hace la opción Conditional en un estilo? Aplica cambios visuales solo cuando se cumple una condición, como cuando pasas el cursor sobre un elemento. Es la base para crear interacciones tipo hover.

Dale a Preview y comprueba el resultado. Al sobrevolar los iconos, el fondo cambia al mismo tono que la barra de búsqueda, exactamente como en Todoist.

Buenas prácticas al nombrar y organizar estilos

Un nombre genérico como iconoBlanco funciona al principio, pero se vuelve confuso cuando tu app crece. Nombrar con la convención aplicación_elementoUbicación te ayuda a encontrar el estilo correcto en segundos.

• Usa prefijos por aplicación o módulo, como tareas_.
• Indica el tipo de elemento, como icono, boton, grupo.
• Añade la ubicación o función, como Cabecera, Footer, Modal.

Cuéntame en los comentarios qué estilos estás creando para tu aplicación y cómo los estás organizando.