# Checklist Themes

> Ready-made themes for Spotlight.js checklists: dark mode, gradient header, GIF banner, numbered steps, progress ring, cards, compact and a completion celebration. Copy the CSS and go.

Each theme below is plain CSS on top of the default
[checklist](https://driverjs.com/docs/checklists.md) styles. To use one, copy its CSS into your
stylesheet, then pass its class name to the checklist:

```js
import { checklist } from "spotlight.js/checklist";
import "spotlight.js/dist/spotlight.css";
import "Spotlight.js/dist/checklist.css";
import "./checklist-theme.css"; // The CSS you copied

checklist({
  id: "onboarding",
  className: "checklist-gradient",
  items,
}).show();
```

The themes only change how the checklist looks, so you can mix their rules or
use one as a starting point for your own. See [Styling](https://driverjs.com/docs/styling.md#class-names)
for every class name you can target.

## Gradient Header

A bold, colored header that carries your brand. The launcher turns into a
gradient pill.

```css
.spotlight-checklist.checklist-gradient {
  --spotlight-checklist-color: #7c3aed;
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-launcher {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-launcher-count {
  padding: 2px 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-panel {
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(76, 29, 149, 0.2);
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-header {
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-title {
  font-weight: 700;
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-description,
.spotlight-checklist.checklist-gradient .spotlight-checklist-progress-text {
  color: rgba(255, 255, 255, 0.85);
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-close-btn {
  color: rgba(255, 255, 255, 0.7);
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-close-btn:hover {
  color: #fff;
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-progress-bar {
  background-color: rgba(255, 255, 255, 0.3);
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-progress-fill {
  background-color: #fff;
}

.spotlight-checklist.checklist-gradient .spotlight-checklist-items {
  padding-top: 8px;
}
```

## Cards

Each item in its own card, with a chevron on the ones that do something. Done
items turn green.

```css
.spotlight-checklist.checklist-cards {
  --spotlight-checklist-color: #16a34a;
}

.spotlight-checklist.checklist-cards .spotlight-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 14px;
}

.spotlight-checklist.checklist-cards .spotlight-checklist-item {
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

/* A chevron on items that do something when clicked. */
.spotlight-checklist.checklist-cards
  .spotlight-checklist-item:has(button.spotlight-checklist-item-trigger, a.spotlight-checklist-item-trigger)::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border: solid #a3a3a3;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}

.spotlight-checklist.checklist-cards
  .spotlight-checklist-item:has(
    button.spotlight-checklist-item-trigger:hover,
    a.spotlight-checklist-item-trigger:hover,
    button.spotlight-checklist-check + div.spotlight-checklist-item-trigger:hover,
    .spotlight-checklist-item-trigger:focus-visible
  ) {
  border-color: #d4d4d4;
  background-color: #fafafa;
}

.spotlight-checklist.checklist-cards .spotlight-checklist-item-done {
  border-color: #bbf7d0;
  background-color: #f0fdf4;
}

.spotlight-checklist.checklist-cards .spotlight-checklist-item-done .spotlight-checklist-item-title {
  text-decoration: none;
}
```

## Numbered Steps

Numbers instead of empty circles, for checklists meant to be done in order.
CSS counters number the items, so there is nothing to add to the items
themselves.

```css
.spotlight-checklist.checklist-numbered .spotlight-checklist-items {
  counter-reset: checklist-step;
}

/* The number sits on the title's baseline, whatever the font. */
.spotlight-checklist.checklist-numbered .spotlight-checklist-item {
  counter-increment: checklist-step;
  align-items: baseline;
}

/* The circle shows the step number until the item is done. */
.spotlight-checklist.checklist-numbered .spotlight-checklist-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-color: #d4d4d4;
  font-size: 12px;
  font-weight: 600;
  color: #525252;
}

.spotlight-checklist.checklist-numbered .spotlight-checklist-check::after {
  content: counter(checklist-step);
}

/* Kept but hidden once done, so the circle still has a baseline to align by. */
.spotlight-checklist.checklist-numbered .spotlight-checklist-item-done .spotlight-checklist-check::after {
  color: transparent;
}

.spotlight-checklist.checklist-numbered .spotlight-checklist-item-done .spotlight-checklist-check {
  border-color: var(--spotlight-checklist-color, #2d2d2d);
}
```

## Progress Ring

A ring around the launcher that fills up as items are done, with the number of
items left inside it. The checklist sets `--spotlight-checklist-progress` to the
progress as a percentage for the ring, `{{remaining}}` puts the count inside it,
and `{{percent}}` shows the percentage in the panel:

```js
checklist({
  id: "onboarding",
  className: "checklist-ring",
  progressText: "{{percent}}% complete",
  launcherProgressText: "{{remaining}}",
  items,
});
```

```css
/* --spotlight-checklist-progress holds the progress as a percentage, so a
   conic gradient can draw it as a ring around the launcher's count. */
.spotlight-checklist.checklist-ring {
  --spotlight-checklist-color: #22c55e;
}

.spotlight-checklist.checklist-ring .spotlight-checklist-launcher {
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
}

.spotlight-checklist.checklist-ring .spotlight-checklist-launcher-count {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #2d2d2d 78%, transparent 80% 100%),
    conic-gradient(#22c55e var(--spotlight-checklist-progress), rgba(255, 255, 255, 0.2) 0);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.spotlight-checklist.checklist-ring .spotlight-checklist-progress-bar {
  height: 8px;
  border-radius: 4px;
}

.spotlight-checklist.checklist-ring .spotlight-checklist-progress-text {
  order: -1;
  font-weight: 600;
  color: #16a34a;
}
```

## Compact

A small checklist that stays out of the way, for items that don't need a
description. The launcher counts what is left with `{{remaining}}`:

```js
checklist({
  id: "onboarding",
  className: "checklist-compact",
  title: "Setup",
  launcherProgressText: "{{remaining}} left",
  items, // Titles only
});
```

```css
.spotlight-checklist.checklist-compact .spotlight-checklist-launcher {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
}

@media (min-width: 481px) {
  .spotlight-checklist.checklist-compact .spotlight-checklist-panel {
    width: 260px;
  }
}

.spotlight-checklist.checklist-compact .spotlight-checklist-header {
  padding: 12px 14px 8px;
}

.spotlight-checklist.checklist-compact .spotlight-checklist-title {
  font-size: 15px;
}

.spotlight-checklist.checklist-compact .spotlight-checklist-progress {
  margin-top: 8px;
}

.spotlight-checklist.checklist-compact .spotlight-checklist-items {
  padding: 0 6px 6px;
}

.spotlight-checklist.checklist-compact .spotlight-checklist-item {
  gap: 8px;
  padding: 6px 8px;
}

.spotlight-checklist.checklist-compact .spotlight-checklist-item-title {
  font-size: 13px;
  font-weight: 500;
}

.spotlight-checklist.checklist-compact .spotlight-checklist-check {
  width: 14px;
  height: 14px;
}
```

## GIF Banner

An image, GIF or animated illustration above the title, to make the welcome
feel friendly. The description accepts HTML, so the image goes there, and the
CSS moves it above the title:

```js
checklist({
  id: "onboarding",
  className: "checklist-media",
  title: "Welcome to Foxbase",
  description: '<img src="/welcome.gif" alt="" /><p>Four quick steps to get you going.</p>',
  items,
});
```

```css
/* The image goes in the description, as HTML. These rules lift it above the
   title as a banner, with the description text below. */
.spotlight-checklist.checklist-media .spotlight-checklist-header {
  display: flex;
  flex-direction: column;
}

.spotlight-checklist.checklist-media .spotlight-checklist-description {
  display: contents;
}

.spotlight-checklist.checklist-media .spotlight-checklist-description img {
  order: -1;
  display: block;
  width: 100%;
  height: 140px;
  margin-bottom: 12px;
  border: 1px solid #ececec;
  border-radius: 8px;
  object-fit: cover;
}

.spotlight-checklist.checklist-media .spotlight-checklist-description p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.spotlight-checklist.checklist-media .spotlight-checklist-close-btn {
  top: 22px;
  right: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 26px;
  color: #2d2d2d;
}
```

## Midnight

A dark theme for dark apps, with a violet accent.

```css
.spotlight-checklist.checklist-midnight {
  --spotlight-checklist-color: #a78bfa;
  color: #f3f4f6;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-launcher {
  border-color: #374151;
  background-color: #111827;
  color: #f9fafb;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-launcher:hover {
  background-color: #1f2937;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-launcher-count {
  color: #a78bfa;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-panel {
  border-color: #1f2937;
  background-color: #111827;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-description,
.spotlight-checklist.checklist-midnight .spotlight-checklist-progress-text,
.spotlight-checklist.checklist-midnight .spotlight-checklist-item-description {
  color: #9ca3af;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-close-btn {
  color: #6b7280;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-close-btn:hover {
  color: #f9fafb;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-progress-bar {
  background-color: #1f2937;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-check {
  border-color: #4b5563;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-item-done .spotlight-checklist-check {
  border-color: #a78bfa;
}

.spotlight-checklist.checklist-midnight .spotlight-checklist-item-done .spotlight-checklist-item-title {
  color: #6b7280;
}

.spotlight-checklist.checklist-midnight
  .spotlight-checklist-item:has(
    button.spotlight-checklist-item-trigger:hover,
    a.spotlight-checklist-item-trigger:hover,
    button.spotlight-checklist-check + div.spotlight-checklist-item-trigger:hover,
    .spotlight-checklist-item-trigger:focus-visible
  ) {
  background-color: #1f2937;
}
```

## Celebration

A finished state that rewards the user. Once every item is done, the checklist
shows `completeTitle` and `completeDescription`, the launcher shows
`completeLauncherText`, and the CSS turns it green. This demo starts with three
of four items done, so click the last one to see it.

```js
checklist({
  id: "onboarding",
  className: "checklist-celebration",
  completeTitle: "You're all set! 🎉",
  completeDescription: "Nice work. You're ready to go.",
  completeLauncherText: "All done",
  items,
});
```

```css
/* The widget gets .spotlight-checklist-complete once every item is done. */
.spotlight-checklist.checklist-celebration.spotlight-checklist-complete {
  --spotlight-checklist-color: #16a34a;
}

.spotlight-checklist.checklist-celebration.spotlight-checklist-complete .spotlight-checklist-launcher {
  border-color: #16a34a;
  background-color: #16a34a;
}

.spotlight-checklist.checklist-celebration.spotlight-checklist-complete .spotlight-checklist-header {
  background-color: #f0fdf4;
}

.spotlight-checklist.checklist-celebration.spotlight-checklist-complete .spotlight-checklist-title {
  font-weight: 600;
  color: #15803d;
  animation: checklist-celebration-pop 400ms ease-out;
}

@keyframes checklist-celebration-pop {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
```

For confetti or a "You did it" modal, use the `onComplete` hook. It fires once
when the last item is done:

```js
checklist({
  id: "onboarding",
  items,
  onComplete: () => confetti(),
});
```

## Brutalist

The theme of the Spotlight.js homepage: thick borders, hard shadows and a yellow
header.

```css
/* The theme of the Spotlight.js homepage. */
.spotlight-checklist.checklist-brutalist {
  --spotlight-checklist-color: #000;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-launcher {
  padding: 10px 16px;
  border: 2px solid #000;
  border-radius: 12px;
  background-color: #fde047;
  color: #000;
  box-shadow: 3px 3px 0 0 #000;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-launcher:hover {
  background-color: #facc15;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-launcher:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 #000;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-launcher-count {
  padding: 2px 7px;
  border-radius: 999px;
  background-color: #000;
  color: #fde047;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-panel {
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 4px 4px 0 0 #000;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-header {
  border-bottom: 2px solid #000;
  background-color: #fde047;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-title {
  font-weight: 700;
  color: #000;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-items {
  padding-top: 7px;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-description,
.spotlight-checklist.checklist-brutalist .spotlight-checklist-progress-text,
.spotlight-checklist.checklist-brutalist .spotlight-checklist-close-btn {
  color: rgba(0, 0, 0, 0.7);
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-progress-bar {
  height: 10px;
  border: 2px solid #000;
  background-color: #fff;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-progress-fill {
  border-radius: 0;
}

.spotlight-checklist.checklist-brutalist .spotlight-checklist-check {
  border-color: #000;
}

.spotlight-checklist.checklist-brutalist
  .spotlight-checklist-item:has(
    button.spotlight-checklist-item-trigger:hover,
    a.spotlight-checklist-item-trigger:hover,
    button.spotlight-checklist-check + div.spotlight-checklist-item-trigger:hover,
    .spotlight-checklist-item-trigger:focus-visible
  ) {
  background-color: #fef9c3;
}
```