Dark Mode

Guide: Dark Mode and Themes

Strafer comes with a built-in dark mode. It uses Tailwind CSS and Daisy UI to build beautiful UI components very fast. Daisy UI adds component classes to Tailwind CSS so it's easy to use if youre familiar with Tailwind CSS.

By default daisy UI uses light and dark mode but you can add more themes by adding them to the themes object in the tailwind.config.ts file.

tailwind.config.ts

// ...
daisyui: {
  themes: ["cupcake", "dark", "cmyk"],
},

Activate the theme by setting the data-theme attribute on the html tag. You can check ThemeToggle component to see how to implement a theme toggle.

NextTutorial: Emails