3-48. Colores globales reutilizables

  Colores Globales Reutilizables en tus Componentes

¿Alguna vez has tenido que cambiar el color primario de una aplicación y terminar modificando decenas de componentes uno por uno? ¡Hay una mejor manera!

¿Por qué usar variables globales para colores?

  • Consistencia: Mantienes la misma paleta en toda la app.

  • Mantenimiento fácil: Cambias el valor en un solo lugar y se actualiza en todos los componentes.

  • Escalabilidad: Ideal para proyectos grandes o temas personalizables (light/dark mode, branding, etc.).

Cómo implementarlo en 3 pasos

1️⃣ Crea un fichero de variables
Dentro de src/utils/colors.js, define y exporta tus colores:

javascript
export default {
  PRIMARY: "#009683",
  PRIMARY_DARK: "#006691",
  // ¡Añade más colores aquí!
};

2️⃣ Importa en tus componentes

javascript
import colors from "../utils/colors";

// Uso en estilos (ejemplo en React/JSX)
<div style={{ backgroundColor: colors.PRIMARY }}></div>

3️⃣ ¡Beneficios al instante!
Si el cliente pide cambiar el color primario a verde, solo editas PRIMARY en colors.js y ¡todo se actualiza automáticamente!

Ejemplo práctico

Antes:

javascript
// En cada componente...
<button style={{ backgroundColor: "#009683" }}>Botón</button>

Después:

javascript
<button style={{ backgroundColor: colors.PRIMARY }}>Botón</button>

🔹 Pro tip: Usa nombres semánticos (PRIMARY, SECONDARY, ERROR) en lugar de valores hexa para mayor claridad.

¿Ya usas variables globales en tus proyectos? ¡Cuéntame tu experiencia! 👇

#Frontend #DesarrolloWeb #CSS #React #WebDev

Comentarios

Publicar un comentario

Entradas más populares de este blog

2- Creando la estructura de nuestra aplicación

    Creando la estructura de nuestra aplicación ¡Comenzamos con la base de nuestro proyecto! 📱💻 En este primer paso, definimos la estructura de la aplicación, que se compone de  3 partes clave : 1️⃣  Cabecera : Contendrá el formulario con los datos del cotitular. 2️⃣  Resultado : Aquí se mostrará el cálculo generado. 3️⃣  Botón inferior : Permitirá recalcular o realizar nuevas operaciones. 👨💻 Implementación en código Usamos  Fragment  para agrupar múltiples elementos sin renderizar contenedores extra. Aplicamos estilos con  StyleSheet  (ejemplo: bordes redondeados, colores, centrado de texto). javascript // Ejemplo de estructura básica < > < View style = { styles . header } > < Text > Formulario de cabecera < / Text > < / View > < View style = { styles . result } > < Text > Resultado < / Text > < / View > < View style = { styles . button } ...
Leer más

1- Creando mi primera app en React Native

  Creando mi primera app en React Native (Guía paso a paso) ⚡ ¡Hola devs! 👋 Hoy empezamos a crear nuestra app en  React Native  desde cero. ¡Les comparto el proceso! 🔧 Pasos iniciales 1️⃣ Abrimos la terminal y nos ubicamos en la carpeta deseada (ej:  cd Desktop ). 2️⃣ Ejecutamos: bash npx react-native init NombreDelProyecto 3️⃣ Accedemos al proyecto: bash cd NombreDelProyecto 4️⃣ Instalamos dependencias con  yarn  (o  npm install ). 👨‍💻 Abrimos el editor Usando  VS Code : bash code . (Si no funciona, abre VS Code manualmente y selecciona la carpeta del proyecto) . 📱 Ejecutamos la app Para iOS : bash npx react-native run-ios (Necesitas Xcode y un simulador instalado) . Para Android : bash npx react-native run-android (Asegúrate de tener Android Studio y un emulador configurado) . ✅ ¡App funcionando en ambos dispositivos! 🎉 ✍️ Primer componente Modificamos  App.js  para un saludo personalizado: javascript import React from 'react'...
Leer más

4-49. Modificando el StatusBar

  Modificando el StatusBar en React Native ¿Alguna vez has notado que el  StatusBar  (la barra superior del móvil con la hora, batería, etc.) puede chocar visualmente con tu app? ¡Vamos a solucionarlo! 🔍 Problema común Por defecto, el StatusBar en iOS/Android tiene un estilo oscuro. Si tu app tiene un fondo oscuro, el texto negro del StatusBar ¡no se verá! ✨ Solución: Cambiar a modo claro Usando el componente  StatusBar  de React Native, podemos ajustar su estilo en segundos: Importar el componente : javascript import { StatusBar } from 'react-native' ; Añadirlo en tu app : javascript < StatusBar barStyle = "light-content" / > (Usa  "dark-content"  si tu fondo es claro) 📱 Resultado Antes : Texto negro sobre fondo oscuro (invisible). Después : Texto blanco ¡contraste perfecto! 👉  Demo rápida : Si usas Expo, prueba este  ejemplo de la documentación . 💡 Pro tip Personaliza también el color de fondo con  backgroundColor  ...
Leer más