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:
-
Specify themes for light and dark mode in the
hugo.toml
:lightTheme = "emerald" darkTheme = "forest"
-
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
orpnpm css
to compile the CSS.