gatsby-image w/ Support for PWA and Dark Mode

Building responsive web apps involves the cumbersome task of adding media queries in CSS.

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.

Preliminary Steps

See the section Preliminary Steps in part 2 for installation details. Alternatively, clone this branch of the previous project to get all the packages, layout, pages, and UI to get started quickly.

Be sure to copy the files in components and pages directories of the project in part 2.

Addition of Dark Mode With Chakra UI

By default, gatsby-plugin-chakra-ui adds the Chakra UI <CSSReset /> component and wraps the root element with the color mode provider. Subsequently, the Chakra UI plugin makes the default Chakra UI theme available throughout the Gatsby app.

In addition, the useColorMode hook in gatsby-plugin-chakra-ui enables access to the color-mode context set by the plugin by default. After adopting the default Chakra UI theme, you toggle colorMode from light to dark.

Perform these steps:

1. Edit the Header functional component in the src/components/header.js file with the code below to add a button that toggles the color mode of your site.

import {useColorMode} from "@chakra-ui/core";

const Header = ({siteTitle}) => {
    const {colorMode, toggleColorMode} = useColorMode();
    return (
        <Flex
            as="nav"
            align="center"
            justify="space-between"
            wrap="wrap"
            padding="1.5rem"
            bg="blue.900"
            color="white"
        >
            <Flex align="center" mr={5}>
                <Heading as="h1" size="lg">
                    <GatsbyLink to="/">
                        <Box color={'white.800'}>{siteTitle}</Box>
                    </GatsbyLink>
                </Heading>
            </Flex>
            <Button onClick={toggleColorMode} color={colorMode === "light" ? "black" : "white"}>
                Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
            </Button>
        </Flex>
    )
};

useColorMode() fetches the current color mode and conditionally toggles the button style, which switches the color.

For full dark mode, use Chakra UI components only and implement the style you desire by setting the appropriate Chakra UI properties.

Below is how the app looks in dark mode. As described above, applying dark mode is easy as pie.

Enablement of Support for PWAs

GatsbyJS touts numerous plugins that deliver extended capabilities. To enable both online and offline PWA support for GatsbyJS apps, leverage these two plugins:

• gatsby-plugin-manifest, which generates for the app a manifest file, in which you specify the appropriate PWA configuration parameters so that users can add the app to their home screen.

gatsby-plugin-manifest contains seven options:

• name: The name of the PWA

• short_name: The short name of the PWA, which is displayed if you do not specify a value for the name option

• short_url: The entry URL of the app

• background_color: The app’s default background color for the generated splash screen

• theme_color: The app’s color theme, which is applied to places like the browser bar if they are visible

• display: The browser UI of the app: stand-alone, full-screen, minimal-ui, or browser

• icon: The app icon that is shown on the splash screen and in the app list on mobile devices

• gatsby-plugin-offline, which enables GatsbyJS apps to continue to run while offline by caching resources during runtime for subsequent requests. If the network is down, the plugin serves to users those cached resources, including the cached pages.

When you scaffold the app with the default starter, GatsbyJS adds both plugins. Their configurations reside in the gatsby-config.js file.

Do the following:

1. Configure gatsby-plugin-manifest in gatsby-config.js with the code below:

require('dotenv').config();

module.exports = {
    siteMetadata: {
        title: `Ten Brushes Gallery`,
        description: `An art gallery demoing the use of Gatsby-Transformer-Cloudinary`,
        author: `William Imoh`,
    },
    plugins: [
        [...]
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `Ten Brushes Gallery`,
                short_name: `Ten Brushes`,
                start_url: `/`,
                background_color: `#082254`,
                theme_color: `#082254`,
                display: `fullscreen`,
                icon: `src/images/tbg-image.png`, // This path is relative to the root of the site.
            },
        },
        `gatsby-plugin-offline`,
    ],
}

1. Add an icon of your choice to the src/images directory, matching the path you specified in the options object while configuring the plugin.

2. Restart the app for a full-fledged PWA, complete with offline support.

To see a PWA in action,

• Deploy the app to a provider like Netlify
• Open the app on your browser, preferably on an Android device
• Use the browser's Add to Home Screen option to add the app to your device.

Here's what the app looks like on my device:

Feel free to try out the deployed version of the app on Netlify.

Summary

To recap, this post explains how to add dark mode to a GatsbyJS app with the default Chakra UI theme and to turn the site into a PWA with offline support. All you need are a couple of short code snippets.

The three-part series covers two processes:

1. Sourcing images served from a content delivery network (CDN) on Cloudinary.
2. Building an image gallery with the React component gatsby-image and populate the gallery with responsive, optimized images and text according to a page layout.

For the complete code, see its repository on GitHub.

Like this article? Follow @iChuloo on Twitter