# 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:

```typescript
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` ):

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

#### Ready to use example

Below you find simple example changing colors in AdminJS sidebar

```css
: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);
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adminjs.co/ui-customization/overwriting-css-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.