Light and Dark Mode

From Dream v3, it uses daisyUI to provide some out-of-box themes (opens in a new tab) 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 tailwind.config.js in the root directory of Dream, specify the themes you want to use:

   module.exports = {
     // ...
     daisyui: {
       themes: ['emerald', 'forest'], // Specify the themes you want to use.
       darkTheme: 'forest', // Specify the dark theme.
     },
   }
   💡

   You must insatll dependencies (pnpm i) before compile the CSS.

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