Light and Dark Mode

Light and Dark Mode

From Dream v3, it uses daisyUI to provide some out-of-box themes to use in light and dark mode.

There are two steps to customize the light and dark mode:

  1. Specify themes for light and dark mode in the hugo.toml:

    lightTheme = "emerald"
    darkTheme = "forest"
  2. And then, open src/input.css in the root directory of Dream, specify the themes you want to use:

    @plugin "daisyui" {
      themes: emerald --default, forest --prefersdark;
    }
    💡
    You must install dependencies (pnpm i) before compiling the CSS.

    Then run npm run css or pnpm css to compile the CSS.