Dark mode has become increasingly popular in modern web applications. Not only does it provide a visually appealing interface, but it also reduces eye strain, improves battery life on OLED screens, and enhances user experience, especially in low-light conditions. In this blog post, we’ll explore how to effortlessly implement dark mode in a React application.<\/p>\n
Dark mode, also known as night mode or dark theme, is a color scheme that uses a dark background and light text. It\u2019s designed to be easier on the eyes, particularly in low-light environments. Many users prefer to switch to dark mode for its aesthetic appeal and comfort during extended use of devices.<\/p>\n
Before we dive into dark mode implementation, ensure you have a React environment set up. You can create a new React application using Create React App.<\/p>\n
npx create-react-app dark-mode-example<\/code><\/pre>\nNavigate to the project directory:<\/p>\n
cd dark-mode-example<\/code><\/pre>\nCreating a Theme Context<\/h2>\n
To facilitate dark mode functionality, we’ll create a Theme context. This way, we can provide theme data across the component tree.<\/p>\n
import React, { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext();\n\nexport const useTheme = () => useContext(ThemeContext);\n\nexport const ThemeProvider = ({ children }) => {\n const [darkMode, setDarkMode] = useState(false);\n\n const toggleTheme = () => {\n setDarkMode(prevMode => !prevMode);\n };\n\n return (\n <ThemeContext.Provider value={{ darkMode, toggleTheme }}>\n {children}\n <\/ThemeContext.Provider>\n );\n};<\/code><\/pre>\nIn the above code, we created a ThemeContext that will hold our state for dark mode and a function to toggle this state. We\u2019ll also create a custom hook, useTheme<\/strong>, for easier access to this context within our components.<\/p>\nApplying the Theme Provider<\/h2>\n
Wrap your application with the ThemeProvider in your main file, usually index.js<\/strong>:<\/p>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nimport { ThemeProvider } from '.\/ThemeProvider';\n\nReactDOM.render(\n <ThemeProvider>\n <App \/>\n <\/ThemeProvider>,\n document.getElementById('root')\n);<\/code><\/pre>\nCreating a Toggle Switch<\/h2>\n
Next, we\u2019ll create a simple toggle switch component for users to switch between light and dark modes.<\/p>\n
import React from 'react';\nimport { useTheme } from '.\/ThemeProvider';\n\nconst ThemeToggle = () => {\n const { darkMode, toggleTheme } = useTheme();\n\n return (\n <div>\n <button onClick={toggleTheme}>\n Switch to {darkMode ? 'Light' : 'Dark'} Mode\n <\/button>\n <\/div>\n );\n};\n\nexport default ThemeToggle;<\/code><\/pre>\nStyling for Dark and Light Modes<\/h2>\n
Now that we have our toggle switch, let’s style our application based on the current theme. You can use CSS-in-JS libraries like styled-components, or simply use standard CSS classes. Here, I\u2019ll show you a straightforward approach using CSS classes.<\/p>\n
import React from 'react';\nimport '.\/App.css';\nimport ThemeToggle from '.\/ThemeToggle';\nimport { useTheme } from '.\/ThemeProvider';\n\nconst App = () => {\n const { darkMode } = useTheme();\n\n return (\n <div className={darkMode ? 'App dark' : 'App'}>\n <h1>Dark Mode Example<\/h1>\n <ThemeToggle \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nNow create App.css<\/strong>:<\/p>\n.App {\n text-align: center;\n background-color: white;\n color: black;\n transition: all 0.5s ease;\n}\n\n.App.dark {\n background-color: black;\n color: white;\n}<\/code><\/pre>\nAdding Transitions for a Smooth Experience<\/h2>\n
To enhance the user experience, you might want to add transitions. This can be accomplished using simple CSS as shown above with the transition property in the App.css file.<\/p>\n
Persisting User Preference<\/h2>\n
To ensure that user preferences are retained even after refreshing the page, you can leverage the localStorage<\/strong> API. Modify the Theme context to include this functionality:<\/p>\nimport React, { createContext, useContext, useState, useEffect } from 'react';\n\nconst ThemeContext = createContext();\n\nexport const useTheme = () => useContext(ThemeContext);\n\nexport const ThemeProvider = ({ children }) => {\n const [darkMode, setDarkMode] = useState(() => {\n \/\/ Get the saved theme from localStorage or default to false.\n return JSON.parse(localStorage.getItem('darkMode')) || false;\n });\n\n const toggleTheme = () => {\n setDarkMode(prevMode => !prevMode);\n };\n\n useEffect(() => {\n \/\/ Save the current theme to localStorage\n localStorage.setItem('darkMode', JSON.stringify(darkMode));\n }, [darkMode]);\n\n return (\n \n {children}\n \n );\n};<\/code><\/pre>\nConclusion<\/h2>\n
Implementing dark mode in a React application is a straightforward process that enhances user experience significantly. By utilizing React\u2019s Context API for state management, alongside localStorage for preference persistence, you can create a delightful and user-friendly interface. With user preferences in mind, and easy toggling, your app will meet modern standards and satisfaction among your audience.<\/p>\n
Feel free to expand upon this foundation by adding more styles, animations, or additional features like automatically detecting the user\u2019s system theme. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Implementing Dark Mode in React the Easy Way Dark mode has become increasingly popular in modern web applications. Not only does it provide a visually appealing interface, but it also reduces eye strain, improves battery life on OLED screens, and enhances user experience, especially in low-light conditions. In this blog post, we’ll explore how to<\/p>\n","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":["post-5636","post","type-post","status-publish","format-standard","category-react","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5636"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5636\/revisions"}],"predecessor-version":[{"id":5637,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5636\/revisions\/5637"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}