Limit the backend width in Contao 5

Custom CSS for the back end

Add the following code in your config/config.yml (if the directory or file does not exist in your system, you can create it manually):

contao:
  backend:
    custom_css:
      - files/layout/backend.css

Then create a public directory layout via the Contao file management and place a file backend.css with the following code in it:

:root {
    --body-bg: #cfcfd3;
    --main-bg: #eaeaec;
}

html[data-color-scheme="dark"] {
    --main-bg: #32363e;
}

body.be_main  {
    background: var(--body-bg);
}

.be_main #main {
    background: var(--main-bg);
}

.be_main #container,
.be_main #header {
    max-width: 1440px;
    margin: 0 auto;
}

You write about limiting the width in Contao, so why are there colors in the CSS? So that, among other things, the background of the workspace does not merge into the background color. In addition, we also need to specify the color for the dark mode.

Now you have to renew the "prod" cache in the Contao Manager in the system maintenance section.

Install an extension

Install the "contao-backend-limited-width" extension by 1up and activate "Limited width" in your user profile in your personal account settings.