Building responsive web apps involves the cumbersome task of adding media queries in CSS.
Table of Contents
- Dark Mode and PWAs
- Preliminary Steps
- Addition of Dark Mode With Chakra UI
- Enablement of Support for PWAs
- Summary
Thanks to the rapid advancements in CSS and CSS-in-JS libraries, web responsiveness is only a few lines of code away.
This three-part series explains how to use the React component gatsby-image to create a responsive banner-and-grid gallery with remote, optimized images sourced from Cloudinary. Specifically:
- Part 1 explains how to build an optimized webpage by leveraging Cloudinary’s gatsby-transformer-cloudinary plugin and gatsby-image, sourcing and transforming responsive remote images in a GatsbyJS project.
- Part 2 describes how to source images from Cloudinary into gatsby-image by means of the getFluidImageObject and getFixedImageObject APIs—without GraphQL queries.
- This post, part 3, expounds how to add dark mode to the gallery with Chakra UI and convert the site to a progressive web app (PWA).
Here’s what the final build looks like:
Note: You need not read parts 1 and 2 before stepping through the procedures described herein part 3.
Dark Mode and PWAs
Dark mode is popular because it saves energy and also, feels good to look at. With Chakra UI, you can easily add dark mode as a default theme with the flexibility to toggle between light and dark modes.
PWAs are web apps, yet optimized to also run on mobile, just like native mobile apps. To gain that flexibility, you create a manifest file with configuration data for your PWA, enabling users to add the app to mobile devices.
#gatsby #strapicms
