Tematizando aplicaciones Gatsby con Theme UI

[♪ comienza la música instrumental suave ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave termina ♪ Hola a todos. Bienvenidos a la personalización de aplicaciones Gatsby con Theme UI. Soy Paris Chandler. Soy parte del equipo de Éxito del Desarrollador en G2I. Soy un desarrollador front-end, creador de BlackTech Twitter, y fundador de BlackTech Pipeline. Entonces, para empezar, lo primero, ¿qué es Gatsby? Gatsby es un marco basado en React que permite a los desarrolladores construir rápidamente sitios web y aplicaciones estáticas. Y su instalación es muy sencilla, solo toma tres comandos. Instalas la CLI de Gatsby, creas un proyecto de Gatsby, inicias tu sitio con Gatsby develop, y luego puedes acceder a tu nuevo sitio en localhost 8000. Es tan sencillo como eso. Lo primero que verás es esta página de inicio. Y lo genial de esto es que estas páginas están optimizadas para un rendimiento y accesibilidad ideales. Viene con muchas configuraciones bajo el capó que no necesitarás configurar tú mismo. Ahora, entrando en materia, ¿qué es Theme UI? Theme UI es una biblioteca de estilos que permite a los desarrolladores configurar diseños para componentes dándoles valores predefinidos en un objeto compartido. Los desarrolladores de Theme UI llaman a esto principios de diseño basados en restricciones. En mis propias palabras, Theme UI es una plantilla para estilos configurables, reutilizables que ayudarán a construir sistemas de estilos para tus proyectos. Estos, una vez más, son muy fáciles de instalar. Solo tienes que instalar el complemento Theme UI de Gatsby, agregarlo a tu matriz de complementos, crear una carpeta src, y dentro de ella, crear la carpeta de tema del complemento Gatsby, y dentro de esa carpeta, crear un archivo index.js. Luego puedes exportar tu objeto Theme UI en ese archivo. Ah, disculpa. Bien, este es un ejemplo de un objeto Theme UI. Tienes tus colores, tus fuentes, tus tamaños de fuente y espaciado, y estos son los estilos que se definen en toda tu aplicación. Y si no quieres construir un objeto Theme UI desde cero, Theme UI tiene una herramienta de tema personalizado que te permite construir tu objeto haciendo clic, arrastrando y soltando. Creará tu objeto de tema por ti, y luego puedes copiarlo y pegarlo desde allí en tu proyecto. Hay dos formas de acceder a los valores en tu objeto de tema. Puedes usar los componentes que vienen con Theme UI y estilizarlos con la propiedad Sx. Y si no quieres usar componentes, necesitarás usar el JSX Pragma para usar la propiedad Sx, y la propiedad Sx es la única forma de acceder a los valores de tu objeto de tema. Aquí, esta es la propiedad Sx y cómo accederías a los estilos dentro de tu objeto. Te darás cuenta de que dentro de la propiedad Sx hay claves de objeto que son cadenas y eso se debe a que se refieren a las claves en tu objeto de tema. Se refieren a las claves en tu objeto de tema. Solo para darte una idea de cómo usar la propiedad Sx a un nivel básico, aquí tengo un objeto de tema con un color primario de Rebecca purple y un color secundario de coral.

A continuación, en mi componente cuadrado, estoy estableciendo el color de fondo como primario y el otro como secundario. Y así de fácil es hacer referencia a tu objeto de tema en todo tu proyecto. Y este es un ejemplo de tus valores primarios y secundarios.

Luego, hay variantes que te permiten definir variaciones de estilos para componentes comunes como botones. Entonces tienes un objeto de botón con dos objetos dentro de ellos. Uno es un objeto primario con un conjunto de estilos y el otro es un objeto secundario con un conjunto de estilos. Puedes aplicar cualquiera de las variantes usando la propiedad de variante y esto funciona muy bien para cosas como botones o enlaces.

Theme UI también tiene puntos de interrupción predefinidos pero puedes anularlos con tus propios valores de puntos de interrupción. Y también hay modos de color. Los modos de color te permiten crear cosas como el modo oscuro en tu objeto de tema. Creas esos modos agregando un objeto de modo anidado a tu objeto de colores y definiendo tus estilos de modo allí. Algo importante a tener en cuenta es que todos los colores definidos en tu objeto de colores son tus colores predeterminados, y todos los colores definidos en tus modos son tus estilos secundarios.

Entonces, aunque eso fue muy rápido, repasemos lo que hemos aprendido. Los objetos de tema son donde residen los valores de estilo para toda tu aplicación. Es una herramienta personalizada que construirá tu, hay una herramienta personalizada que construirá tu objeto de tema para que lo copies y pegues. Y recuerda agregar e importar tu pragma JSX y usar la propiedad SX para acceder a tus estilos. Y Theme UI viene con muchas características geniales como variantes, puntos de interrupción, modos de color y más. Y nuevamente, soy Paris Athena. Trabajo en G2Y y soy fundadora de Blacktech Pipeline. Y espero conocerte pronto. [♪ música reproduciéndose ♪