Ageless Dynasty
Published in

Ageless Dynasty

For Dummies: Dark Mode with Gatsbyjs

When it comes to Gatsby, there are several unique hacks you should be aware of in order to successfully create a dark mode for your application.

ChromeDevTools.gif

Prerequisites

Getting started

Add the simple command below to create a new site.

npm init gatsby
// Start by going to the directory with
cd my-gatsby-site

// Start the local development server with
npm run develop

Part 1: Adding CSS Variables

The aim is to use CSS variables and React’s UseState hook. Any alternative state manager will also work, but for the sake of simplicity, we’ll simply employ the standard UseState hook.

/* 1 */
:root {
--color-primary: #CD104D;
--color-text: #2e353f;
--color-text-light: #4f5969;
--color-heading: #1a202c;
--color-heading-black: #000000;
--color-accent: #d1dce5;
--color-background: #FFFFFF;
--dark-mode: #000;
--dark-mode-hf: #CD104D;
}

/* 2 */
body {
color: var(--color-text);
background-color: var(--color-background);
}
/* 3 */
body.dark {
--color-background: #171717;
--color-primary: #CD104D;
--color-text: #ffffff;
--color-text-light: #4f5969;
--color-heading: #DFDFDE;
--color-heading-black: #EDEDED;
--color-accent: #d1dce5;
--image: url("./images/sun.svg");
}

/* 4 */
body.light {
--color-primary: #CD104D;
--color-text: #2e353f;
--color-text-light: #4f5969;
--color-heading: #1a202c;
--color-heading-black: black;
--color-accent: #d1dce5;
--color-background: #FFFFFF;
--image: url("./images/moon.svg");
}

Part 2: Adding a switch button for toggling between dark and light themes

We’ll have a toggle component that appears on all of our pages, hence it seems reasonable to have the switch button there.

import React from "react"
import "../style.scss"
import Sun from "../images/sun.svg"
import Moon from "../images/moon.svg"

export default function DarkMode() {
const [isDark, setIsDark] = React.useState(false)

React.useEffect(() => {
if (isDark) {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
}, [isDark])

return (
<div className="global-toggle-switch">
<span>
{isDark ? (<img onClick={() => setIsDark(!isDark)} src={Sun} alt="sun img" />) : (<img onClick={() => setIsDark(!isDark)} src={Moon} alt="moon img" />)}
</span>
</div>
)
}
Devpost.gif

Part 3: Saving the default theme to the local storage

Now we also need to store the preferred mode to local storage, so that it will remain even if the page or application is reset. To accomplish this, I create a global utility function called getDefaultTheme:

/* 5 */
function getDefaultTheme() {
const savedTheme = window.localStorage.getItem('theme');
return savedTheme ? savedTheme : 'light';
}
/* 6 */
const [isDark, setIsDark] = React.useState(getDefaultTheme())
/* 7 */
React.useEffect(() => {
if (isDark === 'dark') {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
window.localStorage.setItem('theme', isDark);
}, [isDark])
import React from "react"
import "../style.scss"
import Sun from "../images/sun.svg"
import Moon from "../images/moon.svg"

function getDefaultTheme() {
const savedTheme = window.localStorage.getItem("theme")
return savedTheme ? savedTheme : "light"
}

export default function DarkMode() {
const [isDark, setIsDark] = React.useState(getDefaultTheme())

React.useEffect(() => {
if (isDark === "dark") {
document.body.classList.add("dark")
} else {
document.body.classList.remove("dark")
}
window.localStorage.setItem("theme", isDark)
}, [isDark])

return (
<div className="global-toggle-switch">
<span onClick={() => setIsDark(isDark === "dark" ? "light" : "dark")}>
{isDark === "dark" ? (
<img src={Sun} alt="sun img" />
) : (
<img src={Moon} alt="moon img" />
)}
</span>
</div>
)
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
HRブログ

Talks about #realworld, #finance , #economics, #crypto and #technology.