Theming

This is the documentation for the latest version of Next Admin. If you are using an older version (<5.0.0), please refer to the documentation

Next Admin comes with a preset that is used to theme the different components of the pages.

You can add the preset to your Tailwind config :

@import "@premieroctet/next-admin/theme";
@source "./node_modules/@premieroctet/next-admin/dist"

Dark mode support

The JS preset sets the darkMode option to class by default. However, if you wish to adapt to the system’s preferences, you can set it to media in your own config.

With the Tailwind v4 support, the dark mode option has to be set as a variant with the name dark.

Theme override

You can override the default theme by extending the color palette in your Tailwind config.

@import "tailwindcss";
@import "@premieroctet/next-admin/theme";
@source "./node_modules/@premieroctet/next-admin/dist";
 
@theme {
  --color-nextadmin-background-default: oklch(0.997 0 0);
  --color-dark-nextadmin-background-default: oklch(0.3052 0 0);
}

Make sure to respect the same structure as the one provided in the preset.

I18n Glossary