How to use DaisyUI theme while keeping Nextra layout structure (sidebar, TOC, etc.)

[frst-mg]

I’m working with Nextra v4 and would like to integrate DaisyUI’s theme system for my custom styling (colors, buttons, inputs, etc.), but I want to retain Nextra’s layout structure like the sidebar, top nav, and table of contents.

[JonLoesch]

Just recently I put some DaisyUI components into a Nextra docs app. It sounds like it's maybe not QUITE the same as what you're doing since I really just wanted a few components in a few specific places, not necessarily a whole DaisyUI Theme.

I did some digging and found that Nextra uses a package called 'next-themes' to power it's dark/light mode toggle. It's configured by default to add a dark or light class to the html root element which powers the rest of Nextra's dark mode functionality. DaisyUI on the other hand goes off of a data-theme attribute on the html element which could be the name of any theme (including dark or light but also plenty of others). I wrote this quick component to automatically select a DaisyUI component based on whenever the root HTML class changes. Feel free to use it if it helps (Make sure to install the Daisy theme(s) or else it won't work).

"use client";

import { FC, useEffect, useState } from "react";

// you don't necessarily have to export this hook,
// but I needed the dark mode data in other places in JS so this is a separate hook.
export function useColorMode() {
  const [state, setState] = useState<"dark" | "light" | undefined>();
  useEffect(() => {
    const html = document.getElementsByTagName("html")[0];
    const observer = new MutationObserver((mutationList) => {
      for (const event of mutationList) {
        if (event.type === "attributes" && event.attributeName === "class") {
          if (html.classList.contains("dark")) {
            setState("dark");
          } else if (html.classList.contains("light")) {
            setState("light");
          }
        }
      }
    });
    observer.observe(html, { attributes: true });
    return () => observer.disconnect();
  }, []);
  return state;
}
export const DaisyUiPatchTheme: FC = () => {
  const mode = useColorMode();
  useEffect(() => {
    const html = document.getElementsByTagName("html")[0];
    if (mode === "dark") {
      html.dataset.theme = "night"; // https://daisyui.com/docs/themes/
    } else if (mode === "light") {
      html.dataset.theme = "corporate"; // https://daisyui.com/docs/themes/
    }
  }, [mode]);
  return null;
};