Overwriting CSS styles

Admin comes with default look. As of version 6.4 there is an easy way to change default styles. We added special data-css attributes to essential html tags. Their values are build dynamically and depend on resource, action and container.

Simple example

If we have the resource user we can style entire form as well as individual fields in this form. In this specific case form has data-css="users-edit-form" (edit is an action name). Field password is tagged by users-edit-password

This naming convention give you ability to style every resource, every action and every container separately. You can also use more general attribute selector: for instance [data-css$="edit-form"] to style every form in AdminJS

Configuration

First, you must assure that AdminJS has access to static files. For express based app you should add line similar to this:

import * as url from 'url'
// other imports

const __dirname = url.fileURLToPath(new URL('.', import.meta.url))

app.use(express.static(path.join(__dirname, "../public")));

Next, you should tell AdminJS where your CSS style sheet file is located, placing following code in your config file (where sidebar.css is name your CSS file and its location is in public ):

assets: {
    styles: ["/sidebar.css"],
}

Ready to use example

Below you find simple example changing colors in AdminJS sidebar

:root {
  --topbar-color: white;
  --sidebar-bg-color: darkgray;
  --sidebar-color: white;
  --sidebar-link-color: orange;
}

section[data-css="sidebar"] {
  background-color: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color);
  border: none;
}

section[data-css="sidebar"] svg {
  fill: var(--sidebar-color) !important;
}

a[data-css="sidebar-logo"] {
  background-color: var(--sidebar-bg-color) !important;
}

section[data-css="sidebar-resources"] {
  background: var(--sidebar-bg-color) !important;
}

[data-css="sidebar"] section a {
  background: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color);
}

[data-css="sidebar"] a:hover {
  color: var(--sidebar-link-color);
}