In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useDarkMode" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.
Github: https://github.com/sergeyleschev/react-custom-hooks
import { useEffect } from "react"
import useMediaQuery from "../useMediaQuery/useMediaQuery"
import { useLocalStorage } from "../useStorage/useStorage"
export default function useDarkMode() {
const [darkMode, setDarkMode] = useLocalStorage("useDarkMode")
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)")
const enabled = darkMode ?? prefersDarkMode
useEffect(() => {
document.body.classList.toggle("dark-mode", enabled)
}, [enabled])
return [enabled, setDarkMode]
}
This custom hook combines two other handy hooks useMediaQuery and useStorage, to provide a seamless dark mode experience. It automatically detects the user's preferred color scheme and persists the dark mode state in the browser's local storage.
One of the main advantages of "useDarkMode" is its simplicity. With just a few lines of code, you can enable dark mode in your React application. By invoking this hook, you'll receive the current dark mode state and a function to toggle it.
The "useDarkMode" hook dynamically updates the HTML body class to apply the "dark-mode" styling whenever dark mode is enabled. This approach ensures consistency across all components without the need for manual class manipulation.
body.dark-mode {
background-color: #333;
}
You can use the "useDarkMode" hook in various scenarios. Whether you're building a blog, e-commerce platform, or a content-heavy application, dark mode can enhance the user experience, reduce eye strain, and conserve device battery life. The possibilities are endless, and this custom hook makes it a breeze to implement.
To make it even easier, I've included a simple example component, "DarkModeComponent," that showcases how to use the "useDarkMode" hook. By clicking the "Toggle Dark Mode" button, you can instantly switch between light and dark themes. The button's appearance changes dynamically, reflecting the current mode.
import useDarkMode from "./useDarkMode"
import "./body.css"
export default function DarkModeComponent() {
const [darkMode, setDarkMode] = useDarkMode()
return (
<button
onClick={() => setDarkMode(prevDarkMode => !prevDarkMode)}
style={{
border: `1px solid ${darkMode ? "white" : "black"}`,
background: "none",
color: darkMode ? "white" : "black",
}}
>
Toggle Dark Mode
</button>
)
}
Throughout this article series, we focused on one of the gems from the collection of React custom hooks – "useDarkMode". This hook, sourced from the "react-custom-hooks" repository, revolutionizes how we work in our React applications.
Full Version | React Custom Hooks:
https://dev.to/sergeyleschev/supercharge-your-react-projects-with-custom-hooks-pl4
Top comments (4)
Note that browsers have native support for dark mode. To opt in:
Most browsers will trigger a light-on-dark color scheme just by doing this. In CSS you can use media queries, e.g.:
This way your site will automatically adapt to the dark mode setting of the browser or OS.
Absolutely, Sijmen! You're absolutely right that browsers have integrated support for dark mode. This approach leverages the browser's built-in functionality, and your suggestion provides an excellent alternative for implementing dark mode without relying solely on custom React hooks. But..
Benefits of "useDarkMode" Custom Hook:
Drawbacks of Browser's Built-in Dark Mode:
"useDarkMode" custom hook offers greater control, customization, consistency, and accessibility over relying solely on the browser's built-in dark mode variant. It empowers you to create a tailored dark mode experience that aligns with your design goals while overcoming the limitations and potential drawbacks associated with browser-native dark mode.
This reads like LLM-generated content but I will address some of the points:
"Full control" / "Limited customization" - it's just CSS, you can do the same things.
"Limited accessiblity control" - FUD
"Dependency on user settings" / "compatibility issues" - all common browsers support this, but even if not, using media queries gracefully falls back to the defaults. And it's not either/or - you can still provide a setting on your site: e.g. "default/dark/light".
Absolutely, CSS customization indeed offers great control, but the value of the "useDarkMode" hook lies in its simplicity and seamless integration. It's more about convenience and providing an easy way to implement dark mode with just a few lines of code. Also, while browser support is strong and fallbacks are available, the hook offers a standardized approach that enhances user experience. It's all about striking a balance between customization and accessibility.