Dark Mode - Keep React

Dark Mode is a user interface design option that uses a darker color palette, typically black or dark grey, for backgrounds and light-colored text and icons. It reduces eye strain in low-light environments, conserves battery life on OLED and AMOLED screens, and can enhance visual appeal.

Table of Contents#

Vite React#

Setting up dark mode in vite React Project.

  1. Step 1

    Create a new file called `Theme-provider.tsx` in the `components` folder

    Copy and paste the provided theme provider code into Theme-provider.tsx.

    import { createContext, useEffect, useState, useContext } from "react";

const initialState = {
  theme: "system",
  setTheme: () => null,
};

export const ThemeProviderContext = createContext(initialState);

export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }) {
  const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);

  useEffect(() => {
    const root = window.document.documentElement;

    root.classList.remove("light", "dark");

    if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
      root.classList.add(systemTheme);
      return;
    }

    root.classList.add(theme);
  }, [theme]);

  const value = {
    theme,
    setTheme: (theme) => {
      localStorage.setItem(storageKey, theme);
      setTheme(theme);
    },
  };

  return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  );
}


export const useTheme = () => {
  const context = useContext(ThemeProviderContext);

  if (context === undefined) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }

  return context;
};

  2. Step 2

    Open the `main.tsx` file

    Wrap the `App` component with the `ThemeProvider` component.

    import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { ThemeProvider } from "./components/theme-provider.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <StrictMode>
    <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
      <App />
    </ThemeProvider>
  </StrictMode>
);

  3. Step 3

    Create a Theme Switcher component

    Toggle between dark and light modes, use the example code provided to create a simple theme switcher.

Next Js#

Setting up dark mode in NextJs Project.

  1. Step 1

    Start by installing `next-themes`

    npm install next-themes

  2. Step 2

    Create a new file called `theme-provider.tsx` in the `components` folder

    Copy and paste the provided theme provider code into `theme-provider.tsx`.

    "use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({ children, ...props }) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

  3. Step 3

    Wrap your root layout. Add the `ThemeProvider` to your root layout.

    import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

  4. Step 4

    Create a Theme Switcher component

    Toggle between dark and light modes, use the example code provided to create a simple theme switcher.

Edit this pageContainer