With the Icinga Rebrand to be rolled out, we wanted the Icinga Web user interface to reflect the new visual language. Since the new branding was mostly light on dark, I prepared drafts for a dark theme for Icinga Web.

Theming was an integral part of how Icinga Web was built. But we also wanted to adapt the UI to the Browser preference and enable an automatic switching, which required some extended functionality.

Defining a color palette

The first step was to define a rough color palette. Sidebar and viewport background were the first, since it was the most prominent color for the theme. We kept the status colors, but went for a new primary accent color.

Refining the palette

After I found a harmonious palette for the start, I implemented the new themes, so I could immediately see, how the colors work. Since the base background color of the viewport wasn’t pure white/black, I started tuning the grays and tinting them with subtile blue-ish shades.

Introducing Theme Modes

In addition to separate themes, we found that there has to be a relation between the flavors of a theme, a.k.a. light and dark mode. So the development team extended the theming engine with theme modes, enabling theme developers to define separate versions of their theme depending on the user’s preferred color-scheme.

I helped them implement the themes for the new engine. In the implementation process we did some further refinements and tidied our whole variable system to reflect a proper palette system and rename the variables accordingly.