🌙 Building Dark & Light Theme in React with Chakra UI v2 (Step-by-Step Guide)

🌙 Build a Dark & Light Theme Switcher in React with Chakra UI v2

Dark mode has become a standard feature in modern web applications. It not only improves accessibility but also provides a better user experience for users who prefer darker interfaces.

The good news is that Chakra UI v2 comes with built-in support for color modes, making it incredibly easy to implement dark and light themes without writing complex CSS.

In this tutorial, we'll build a fully functional theme switcher in React using Chakra UI v2.

---

Prerequisites

Before starting, make sure you already have:

• A React project (Vite or CRA)
• Chakra UI v2 installed
• Basic understanding of React components

If you haven't installed Chakra UI yet, check out my previous guide on setting it up.

---

Step 1: Install Chakra UI

Install Chakra UI and its required dependencies.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

---

Step 2: Wrap Your Application

Wrap your application with ChakraProvider.

import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);

Now every component inside your app can access Chakra UI features.

---

Step 3: Enable Color Mode

Create a file named theme.js.

import { extendTheme } from "@chakra-ui/react";

const config = {
  initialColorMode: "light",
  useSystemColorMode: true,
};

const theme = extendTheme({ config });

export default theme;

Now update your main.jsx.

import theme from "./theme";

<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>;

Configuration Options

Option	Description
initialColorMode	Default theme when the app loads
useSystemColorMode	Automatically use the user's operating system preference

---

Step 4: Add ColorModeScript

This prevents the screen from flashing the wrong theme during page refresh.

import { ColorModeScript } from "@chakra-ui/react";
import theme from "./theme";

<ColorModeScript initialColorMode={theme.config.initialColorMode} />

Place it before rendering your application.

---

Step 5: Create a Theme Toggle Button

Chakra UI provides the useColorMode() hook.

import { Button, useColorMode } from "@chakra-ui/react";

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Button onClick={toggleColorMode}>
      {colorMode === "light"
        ? "🌙 Dark Mode"
        : "☀️ Light Mode"}
    </Button>
  );
}

export default ThemeToggle;

That's all you need to switch between themes.

---

Step 6: Use Theme-Aware Colors

Instead of hardcoding colors, use useColorModeValue().

import {
  Box,
  Text,
  useColorModeValue,
} from "@chakra-ui/react";

function Card() {
  const bg = useColorModeValue("gray.100", "gray.700");
  const color = useColorModeValue("black", "white");

  return (
    <Box bg={bg} p={6} rounded="lg">
      <Text color={color}>
        Chakra UI automatically changes these colors.
      </Text>
    </Box>
  );
}

This is one of Chakra UI's most powerful features.

---

Step 7: Build a Complete Layout

Now combine everything together.

import {
  Box,
  Heading,
  Text,
  Button,
  useColorMode,
  useColorModeValue,
} from "@chakra-ui/react";

export default function App() {
  const { colorMode, toggleColorMode } = useColorMode();

  const bg = useColorModeValue("gray.100", "gray.900");
  const card = useColorModeValue("white", "gray.800");

  return (
    <Box bg={bg} minH="100vh" p={10}>
      <Button mb={6} onClick={toggleColorMode}>
        {colorMode === "light"
          ? "🌙 Dark"
          : "☀️ Light"}
      </Button>

      <Box bg={card} p={8} rounded="xl" shadow="lg">
        <Heading mb={4}>
          Chakra UI Dark Mode
        </Heading>

        <Text>
          This layout automatically updates based on the selected color mode.
        </Text>
      </Box>
    </Box>
  );
}

Now your application supports both dark and light themes with very little code.

---

Why Use useColorModeValue()?

Instead of writing CSS like this:

.dark .card {
  background: #222;
}

.light .card {
  background: white;
}

You simply write:

const bg = useColorModeValue("white", "gray.800");

It's much cleaner, easier to maintain, and fully integrated with Chakra UI.

---

Best Practices

• ✅ Always use useColorModeValue() instead of hardcoded colors.
• ✅ Keep your theme configuration in a separate theme.js file.
• ✅ Use semantic color tokens for better scalability.
• ✅ Enable useSystemColorMode to respect user preferences.
• ✅ Add ColorModeScript to avoid flashing the wrong theme on page load.

---

Final Thoughts

Implementing dark and light themes in React becomes incredibly simple with Chakra UI v2. With just a few hooks and configuration options, you can provide users with a modern, accessible, and polished experience.

Whether you're building dashboards, admin panels, e-commerce platforms, or portfolio websites, Chakra UI's built-in color mode system helps you create responsive and beautiful interfaces with minimal effort.

---

🎥 Prefer Learning by Watching?

If you enjoy learning through hands-on coding videos, check out my complete React + Chakra UI v2 playlist on YouTube.

In the playlist, you'll learn:

• Chakra UI Setup
• Dark & Light Theme
• Building Complete Projects with Chakra UI

Whether you're a beginner or an experienced React developer, the series walks through every concept step by step with practical examples.

📺 Complete Playlist

https://www.youtube.com/playlist?list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4

---

If you found this article helpful, consider following Codeek for more tutorials on React, Next.js, TypeScript, Chakra UI, and modern full-stack web development. 🚀