# Styling

> Style Driver.js popovers with your own CSS class or the onPopoverRender hook, change the overlay color and opacity, and theme checklists to match your product's look.

## Popover

You can either use the default class names and override the styles or you can pass a custom class name to the `popoverClass` option either globally or per step.

Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRender` callback to get the popover DOM element and do whatever you want with it before popover is rendered.

Have a look at the [theming guide](https://driverjs.com/docs/theming.md#styling-popover) for a detailed guide, including the class names to target.

### Using CSS

```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  popoverClass: 'driverjs-theme'
});

driverObj.highlight({
  element: '#demo-theme',
  popover: {
    title: 'Style However You Want',
    description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
  }
});
```

Here is the CSS used for the above example:

```css
.driver-popover.driverjs-theme {
  background-color: #fde047;
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #000;
}

.driver-popover.driverjs-theme button:not(.driver-popover-close-btn) {
  flex: 1;
  text-align: center;
  background-color: #000;
  color: #ffffff;
  border: 2px solid #000;
  text-shadow: none;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

.driver-popover.driverjs-theme button:not(.driver-popover-close-btn):hover {
  background-color: #000;
  color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  justify-content: space-between;
  gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
  color: #9b9b9b;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #fde047;
}
```

### Using Hooks

To change the popover's DOM, for example to add your own buttons, use the `onPopoverRender` hook. See [Custom Buttons](https://driverjs.com/docs/popover.md#custom-buttons) for an example.

## Overlay

You can customize the overlay opacity and color using `overlayOpacity` and `overlayColor` options to change the look of the overlay.

> **Note:** In the examples below we have used `highlight` method to highlight the elements. The same configuration applies to the tour steps as well.

### Overlay Color

Here are some driver.js examples with different overlay colors.

```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  overlayColor: 'red'
});

driverObj.highlight({
  popover: {
    title: 'Pass any RGB Color',
    description: 'Here we have set the overlay color to be red. You can pass any RGB color to overlayColor option.'
  }
});
```

## Checklist

[Checklists](https://driverjs.com/docs/checklists.md) are styled with plain CSS: an accent color for
the quick win, or your own class for a full theme.

### Accent Color

Set the `--driver-checklist-color` variable to recolor the progress bar, the
ticks and the focus rings while keeping the default look:

```css
:root {
  --driver-checklist-color: #16a34a;
}
```

### Custom Theme

Pass `className` to add your own class to the widget, then style its parts. The
example below is the theme used on the driver.js homepage:

```js
checklist({
  id: "onboarding",
  className: "checklist-brutalist",
  items,
});
```

Its CSS, and more themes ready to copy, are on the
[Checklist Themes](https://driverjs.com/docs/checklist-themes.md) page.

### Class Names

These are the classes you can target:

```css
.driver-checklist {}                  /* The widget, positioned in a corner */
.driver-checklist-bottom-right {}     /* or -bottom-left, -top-right, -top-left */
.driver-checklist-complete {}         /* Added once every item is done */

.driver-checklist-launcher {}         /* The button that opens the panel */
.driver-checklist-launcher-text {}
.driver-checklist-launcher-count {}   /* "1/4" */

.driver-checklist-panel {}
.driver-checklist-header {}
.driver-checklist-title {}
.driver-checklist-description {}
.driver-checklist-close-btn {}

.driver-checklist-progress {}
.driver-checklist-progress-bar {}
.driver-checklist-progress-fill {}
.driver-checklist-progress-text {}    /* "1 of 4" */

.driver-checklist-items {}
.driver-checklist-item {}
.driver-checklist-item-done {}        /* Added to an item once it is done */
.driver-checklist-check {}            /* The circle; a button with allowManualComplete */
.driver-checklist-item-trigger {}     /* The item's link, button or plain row */
.driver-checklist-item-title {}
.driver-checklist-item-description {}
```

The widget also sets `--driver-checklist-progress` to the progress as a
percentage, for progress designs drawn in CSS, like the
[progress ring](https://driverjs.com/docs/checklist-themes.md#progress-ring). The font follows the
popover's `--driver-popover-font-family` variable. See the
[Checklists guide](https://driverjs.com/docs/checklists.md#customizing) for position and text options.