State

useDarkMode

Dark-mode boolean with toggle.

Demo

live · imported from hookli

Light mode

This panel is scoped to the demo — the docs stay dark either way.

isDarkMode: false
localStorage("theme"): light

The choice persists — reload and the panel keeps its mode. The hook also toggles a dark class on <body> for CSS-driven themes.

import { useDarkMode } from "hookli";

export function Demo() {
  const { isDarkMode, toggleDarkMode } = useDarkMode();

  return (
    <div className={isDarkMode ? "panel-dark" : "panel-light"}>
      <button onClick={toggleDarkMode}>
        {isDarkMode ? "Switch to light" : "Switch to dark"}
      </button>
    </div>
  );
}

Usage

use-dark-mode.tsxtsx

import { useDarkMode } from "hookli";

export function Demo() {
  const { isDarkMode, toggleDarkMode } = useDarkMode();

  return (
    <div className={isDarkMode ? "panel-dark" : "panel-light"}>
      <button onClick={toggleDarkMode}>
        {isDarkMode ? "Switch to light" : "Switch to dark"}
      </button>
    </div>
  );
}

API

useDarkMode.d.tsts

useDarkMode(): { isDarkMode: boolean; toggleDarkMode: () => void }

Parameters

This hook takes no parameters.

Returns

Name	Type	Description
isDarkMode	boolean	Current mode. Initialized from localStorage("theme") on the client; false during SSR.
toggleDarkMode	() => void	Flips the mode. An effect persists it to localStorage("theme") and toggles a "dark" class on <body>.

Hook

The implementation, straight from hookli. Copy it, or install the package.

src/hooks/useDarkMode.hook.tstsx

import { useEffect, useState } from "react";

interface UseDarkModeState {
  isDarkMode: boolean;
  toggleDarkMode: () => void;
}

export const useDarkMode = (): UseDarkModeState => {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    if (typeof window === "undefined") return false;
    return window.localStorage.getItem("theme") === "dark";
  });

  const toggleDarkMode = () => setIsDarkMode((prevMode) => !prevMode);

  useEffect(() => {
    if (typeof document === "undefined") return;

    const bodyElement = document.body;
    const darkClass = "dark";

    bodyElement.classList.toggle(darkClass, isDarkMode);
    window.localStorage.setItem("theme", isDarkMode ? "dark" : "light");

    return () => {
      bodyElement.classList.remove(darkClass);
    };
  }, [isDarkMode]);

  return { isDarkMode, toggleDarkMode };
};

View source on GitHub