---
title: "Styling the Dispatch Panel in Dark Mode"
canonical: "https://help.fieldbuddy.com/space/FBDOCS/blog/6764527620/Styling%20the%20Dispatch%20Panel%20in%20Dark%20Mode"
format: markdown
---
With the recent release of the FieldBuddy package ([1.147.39](https://help.fieldbuddy.com/page/release-notes?released=changelog~post~fieldbuddy-1-147-39-package-release)) came a visual overhaul of the Dispatch Panel. A big part of it is an all new Dark Mode that changes the app’s UI to use darker colours for backgrounds.

Dispatch Panel can also be customised in how it looks. We have documentation for [adjusting styling for appointments](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5242650667) and [how to define a custom stylesheet](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6127321094). With the introduction of Dark Mode, we need to make sure that text is legible and appointments are visible in both Light and Dark modes.

When changing the look of the app we recommend using the [Example DPCSS file](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/6127321094) as a base, since it contains all of these best practices already.

## Make sure appointment block backgrounds are opaque

The biggest thing to watch out for is using any form of transparency might cause text to become illegible on dark backgrounds.

What we often see is that appointment blocks are made slightly translucent to mute the colours of the appointment block. While this looks completely fine on a white background, achieving the goal of muting the background colour, it immediately becomes apparent why its a problem in dark mode.

See the two screenshots below, the one on the left looks like we expect it to, but the one on the right shows that the same exact CSS on dark mode suddenly causes appointments to look “greyed out” and the text less legible.

This is part of what the CSS looks like:

```css
.b-sch-event.sch-event.blue {
  border-color: rgb(216, 230, 254);
  background: rgba(170, 203, 255, 0.5);
  color: rgb(1, 68, 134);
}

.b-sch-event.sch-event.sch-event-absence.ziek,
.b-sch-event.sch-event.sch-event-absence.sick {
  color: rgb(112, 3, 14);
  border: 2px solid rgb(112, 3, 14);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(251, 203, 192) 10px,
    rgb(251, 203, 192) 20px
  );
}
```

If we instead make sure to define the appointment block colours with no or little transparency, the colours look good in both light and dark modes.

```css
.b-sch-event.sch-event.blue {
  border-color: rgb(216, 230, 254);
  background: rgb(170, 203, 255);
  color: rgb(1, 68, 134);
}

.b-sch-event.sch-event.sch-event-absence.ziek,
.b-sch-event.sch-event.sch-event-absence.sick {
  color: rgb(186, 5, 23);
  border: 2px solid rgb(186, 5, 23);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgb(254, 241, 238) 10px,
    rgb(254, 241, 238) 20px
  );
}

body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.ziek,
body.b-theme-dark .b-sch-event.sch-event.sch-event-absence.sick {
  color: rgb(112, 3, 14);
  border: 2px solid rgb(112, 3, 14);
  background: repeating-linear-gradient(
    45deg,
    rgba(251, 203, 192, 0.7),
    rgba(251, 203, 192, 0.7) 10px,
    rgb(251, 203, 192) 10px,
    rgb(251, 203, 192) 20px
  );
}
```

## Define rules specific to Dark Mode

Another common use-case is to make appointments that are already closed visually distinct by making them dimmer. This is usually achieved by making these appointments less opaque.

For the same reasons as described above, this becomes more of an issue on darker backgrounds.

The following images use this rule:

```css
.b-sch-event.sch-event.closed {
  opacity: 0.3;
}
```

In this case, you might want to define a new rule that is specific to dark mode. To do this you can create a new rule with the same selector, but with a new `body.b-theme-dark` prefix.

The following images use these CSS rules instead:

```css
.b-sch-event.sch-event.closed {
  opacity: 0.3;
}

body.b-theme-dark .b-sch-event.sch-event.closed {
  opacity: 0.6;
}
```

As you can see the appointment on the right looks more legible than before while still remaining distinct enough to tell the difference.

In the end what matters is choosing the right colours that contrast well with their backgrounds. Try to use opacity sparingly and opt for choosing more muted colours if needed.