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 presets :
module.exports = {
content: [
// your own content
"./node_modules/@premieroctet/next-admin/dist/**/*.{js,ts,jsx,tsx}",
],
presets: [require("@premieroctet/next-admin/dist/preset")],
};
Dark mode support
The 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.
Theme override
You can override the default theme by extending the color palette in your Tailwind config.
module.exports = {
content: [
// your own content
"./node_modules/@premieroctet/next-admin/dist/**/*.{js,ts,jsx,tsx}",
],
plugins: [],
theme: {
extend: {
colors: {
nextadmin: {
background: {
default: '#FEFEFE'
}
},
// Dark mode colors
"dark-nextadmin": {
background: {
default: "#2F2F2F"
}
}
}
}
}
presets: [require("@premieroctet/next-admin/dist/preset")],
};
Make sure to respect the same structure as the one provided in the preset.