create-dynamic-app/next-templates/darkMode.ts

CLI tool to generate sample applications using Dynamic's web3 authentication

export const useDarkMode = `"use client";

import { useState, useEffect } from "react";

const checkIsDarkSchemePreferred = (): boolean => {
  if (typeof window !== "undefined") {
    return window.matchMedia?.("(prefers-color-scheme:dark)")?.matches ?? false;
  }
  return false;
};

export function useDarkMode() {
  const [isDarkMode, setIsDarkMode] = useState(checkIsDarkSchemePreferred);

  useEffect(() => {
    const darkModeMediaQuery = window.matchMedia(
      "(prefers-color-scheme: dark)"
    );
    const handleChange = () => setIsDarkMode(checkIsDarkSchemePreferred());

    darkModeMediaQuery.addEventListener("change", handleChange);
    return () => darkModeMediaQuery.removeEventListener("change", handleChange);
  }, []);

  return { isDarkMode, toggleDarkMode: () => setIsDarkMode(!isDarkMode) };
}
`