Admin panel customization options

Many aspects of Strapi's admin panel can be customized through the code using the admin panel's /src/admin/app.[tsx|js] entry point file (see project structure).

Prerequisites

Before trying to update code to configure any admin panel customization option:

Rename the default app.example.[tsx|js] file into app.[ts|js].
Create a new extensions folder in /src/admin/.
If you want to see your changes applied live while developing, ensure the admin panel server is running (it's usually done with the yarn develop or npm run develop command if you have not changed the default host, port, and path of the admin panel).

Note: Admin panel extensions vs. plugins extensions

By default, Strapi projects already contain another extensions folder in /src but it is for plugins extensions only (see Plugins extension).

The config object found in /src/admin/app.[ts|js] stores the admin panel configuration.

Any file used by the config object (e.g., a custom logo) should be placed in a /src/admin/extensions/ folder and imported inside /src/admin/app.js.

Tip: Hot reloading while developing

In Strapi 5, the server runs in watch-admin mode by default, so the admin panel auto-reloads whenever you change its code. This simplifies admin panel and front-end plugins development. To disable this, run yarn develop --no-watch-admin (see CLI reference).

Available configuration options

The config object of /src/admin/app.[tsx|js] accepts the following parameters:

Parameter	Type	Description
`auth`	Object	Accepts a `logo` key to replace the default Strapi logo on login screen
`head`	Object	Accepts a `favicon` key to replace the default Strapi favicon
`locales`	Array of Strings	Defines availables locales (see updating locales)
`translations`	Object	Extends the translations
`menu`	Object	Accepts the `logo` key to change the logo in the main navigation
`theme.light` and `theme.dark`	Object	Overwrite theme properties for Light and Dark modes
`tutorials`	Boolean	Toggles displaying the video tutorials
`notifications`	Object	Accepts the `releases` key (Boolean) to toggle displaying notifications about new releases

Example of a custom configuration for the admin panel:

JavaScript
TypeScript

/src/admin/app.js
import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    // Replace the favicon
    head: {
      favicon: favicon,
    },
    // Add a new locale, other than 'en'
    locales: ["fr", "de"],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
      // overwrite light theme properties
      light: {
        colors: {
          primary100: "#f6ecfc",
          primary200: "#e0c1f4",
          primary500: "#ac73e6",
          primary600: "#9736e8",
          primary700: "#8312d1",
          danger700: "#b72b1a",
        },
      },

      // overwrite dark theme properties
      dark: {
        // ...
      },
    },
    // Extend the translations
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
    // Disable video tutorials
    tutorials: false,
    // Disable notifications about new Strapi releases
    notifications: { releases: false },
  },

  bootstrap() {},
};

/src/admin/app.ts
// Note: you may see some ts errors, don't worry about them
import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    // Replace the favicon
    head: {
      // Try to change the origin favicon.png file in the
      // root of strapi project if this config don't work.
      favicon: favicon, 
    },
    // Add a new locale, other than 'en'
    locales: ["fr", "de"],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
	    dark:{
	      colors: {
			  alternative100: '#f6ecfc',
			  alternative200: '#e0c1f4',
			  alternative500: '#ac73e6',
			  alternative600: '#9736e8',
			  alternative700: '#8312d1',
			  buttonNeutral0: '#ffffff',
			  buttonPrimary500: '#7b79ff',
			  // you can see other colors in the link below
			  },
		},
		light:{
			// you can see the light color here just like dark colors https://github.com/strapi/design-system/blob/main/packages/design-system/src/themes/lightTheme/light-colors.ts
		},
  },
    },
    // Extend the translations
    // you can see the traslations keys here https://github.com/strapi/strapi/blob/develop/packages/core/admin/admin/src/translations
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
    // Disable video tutorials
    tutorials: false,
    // Disable notifications about new Strapi releases
    notifications: { releases: false },
  },

  bootstrap() {},
};

Note

You can see the full translation keys, for instance to change the welcome message, on GitHub. Light and dark colors are also found on GitHub.

Available configuration options​

Available configuration options