# Theming

<Callout type="info">
  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](https://next-admin.js.org/v4/docs/theming)
</Callout>

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 :

<Tabs items={["v4", "<=v3"]}>
<Tabs.Tab>
```css
@import "@premieroctet/next-admin/theme";
@source "./node_modules/@premieroctet/next-admin/dist"
```
</Tabs.Tab>
<Tabs.Tab>
```js
module.exports = {
  content: [
    // your own content
    "./node_modules/@premieroctet/next-admin/dist/**/*.{js,ts,jsx,tsx}",
  ],
  presets: [require("@premieroctet/next-admin/preset")],
};
```
</Tabs.Tab>
</Tabs>

## 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`](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually).

## Theme override

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

<Tabs items={["v4", "<=v3"]}>
<Tabs.Tab>
```css
@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);
}
```
</Tabs.Tab>
<Tabs.Tab>
```typescript
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/preset")],
};
```
</Tabs.Tab>
</Tabs>

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