Implementando Dark Mode en Gatsby con Sass (1/2)

Implementando Dark Mode en Gatsby con Sass
1) Integrando Sass en Gatsby
2) Implementando dark mode con un custom hook y Sass

Este artículo será el primero de una serie donde iremos viendo cómo crear diferentes cosas con React y algunos de sus frameworks. Serán de un tamaño pequeño, pero útil, orientado a aquellos que buscan una funcionalidad específica para sus sitios, blogs o portfolio.

Antes de empezar recomiendo tener algo de conocimiento en React, Sass y en lo posible Gatsby, teniendo en cuenta que esto no es una guía introductoria a esas tecnologías.

Iniciando el proyecto en Gatsby

Puedes saltear esta parte si ya tienes un proyecto en Gatsby

En caso de no tener iniciado un proyecto en Gatsby, lo harémos abriendo una terminal y tipeando gatsby new gatsby-sass. En mi caso de ejemplo le puse gatsby-sass, pero ponle el nombre que más te guste.

Lo siguiente es entrar a la carpeta donde se creó el proyecto haciendo cd gatsby-sass y luego gatsby develop para inicializar el modo desarrollo.
Protip: En la consola también puedes hacer cd gatsby-sass && gatsby develop e inicializará de igual forma. Al final de cuentas debes la consola debe marcarte algo así:

Eso lo que nos dice es que debemos entrar a localhost:8000 y podremos ver nuestro proyecto en modo desarrollo:

Primeros pasos con nuestra aplicación

Puedes saltear esta parte si ya tienes un proyecto avanzado en Gatsby

Abrimos nuestro proyecto con VSCode o el Editor de tu preferencia y lo primero que haremos es limpiar nuestros archivos.

De la carpeta components sólo nos quedaremos con el archivo layout.js y en la carpeta pages vamos a requerir los tres que vienen por default, pero les haremos unas modificaciones incluyendo a layout.js

De esta forma no debemos tener problemas y veremos que nuestra aplicación -aún sin estilos- está funcionando.

Integrando Sass

Puedes saltear esta parte si ya tienes integrado Sass

Aquí viene un paso importante: para hacer funcionar a Sass tenemos dos opciones muy comunes: Live Sass Compiler que es una extensión de VSCode o instalar el modulo node-sass. Para este ejemplo utilizaré la primera opción.

Una vez tengamos la extensión instalada, lo siguiente que haremos es ir a nuestra carpeta de components y dentro de ésta, agregar otra que en mi caso la llamaré sass y la misma tendrá un archivo de nombre layout.scss.

Ahora sólo queda importar nuestro layout.scss en layout.js. Vamos al componente y escribimos import './sass/layout.css';.

Aquí te estarás preguntando "¿por qué .css?". Bueno, esto pasa porque cuando generamos nuestros archivos de Sass, todo lo que hayamos escrito en ese lenguaje termina se mapeando dentro de un .css. Lo terminaremos de entender en el siguiente paso.

No olvidar: los navegadores sólo entienden HTML, CSS y Javascript. Sass compila a CSS y React/Gatsby, a JS.

Sólo nos queda hacer click en Watch Sass, que en la imagen está ubicado abajo a la derecha, donde -en mi caso ya compiló- dice Watching... y una vez compile generará dos nuevos archivos dentro de la carpeta (layout.css y layout.css.map).

Genial! Ahora podemos entrar a nuestro layout.**scss** y testear que todo funcione correctamente tipeando body { background: green; }. Vamos a localhost:8000 y si tenemos un fondo color verde, significa que ya estamos aptes para integrar el dark mode.