Circonus Dark Mode Is Here

Today we want to talk about a welcome change to Circonus’ user interface: the addition of dark mode. Once found only in apps themselves, dark mode is now supported by all major operating systems, including MacOS, Windows 10, Android and iOS. And it’s also well-liked, with some tech sites finding that over 90% of their audience use dark mode some or all of the time.

A Little History

Computers used to be all dark mode, all the time. Back before the GUI, the command-line terminal on a CRT monitor was (and could only be) dark. Then the GUI was added and things could be light or dark, but some people would always prefer to change their color theme to use dark colors. But this was only superficial, changing the colors of the OS chrome but not affecting any of the content. Over the past few decades the situation hasn’t changed much. Some apps added built-in themes (particularly code & text editors), but system-wide solutions haven’t really existed until recently. Finally, a couple years ago, operating systems began adding system-wide dark mode toggles which finally promised a future where theming would be more than surface-deep…it would finally affect content, too.

We’re still not all the way there. App developers have work to do updating their apps to hook into these new toggles. But we’re getting closer than ever before. One new aspect of this new wave of “dark mode” toggles is that web content designers now have a media query so we can determine the user’s preferred theme and change our designs accordingly. This is a powerful new tool to help our web content be even more adaptable and accessible than ever before.

Why Dark Mode?

What’s the big deal about dark mode anyway? There are several reasons to support dark mode, especially nowadays. It’s partially about preference, but it can sometimes help the visually impaired, and on most modern mobile devices it can even help lower battery usage.

The majority of people seem to prefer interacting with their device in dark mode. Because the screen of a device in dark mode emits less light, it seems to be easier on the eyes. Some people say that the traditional light mode makes visual elements “vibrate” against each other, and that using dark mode prevents this phenomenon. Even amongst people who prefer dark mode, reading articles or other long-form content still may be more difficult in dark mode than in light mode. But such tasks are not performed frequently-enough to dissuade most users.

One quality-of-life benefit of these newly-ubiquitous dark modes is for certain visually-impaired users. For some users, the bright light of a typical GUI makes using their phone or computer very difficult. Being able to switch to a low-light, high-contrast mode across their GUI and web content is a boon. It helps them simply be able to use their system and read content on the web.

Another strength of dark modes, especially on modern smartphone screens, is lower battery usage. Older and cheaper devices use LCD screens. When an LCD screen is turned on, battery usage depends on screen brightness, not what is shown on the screen. This is because an LCD works by shining a backlight through a liquid crystal matrix. So even if you’re showing black on-screen, the backlight is still shining the same as if you’re showing white. By contrast, most modern smartphones use OLED screens, which operate differently. OLED screens use organic LED components which actually emit light of the desired colors. So when white is on-screen, the organic LED components are emitting a lot of light, which sucks up your battery’s charge. Conversely, when showing black on-screen, the organic LED components are emitting no light at all, so they require almost no battery usage. Thus, when using dark mode on a modern smartphone with an OLED screen, it will slightly prolong battery life.

How It Works

When we were thinking about implementing dark mode properly, we wanted to do it properly so users can expect the Circonus UI to just “do the right thing,” which is what they would expect it to do. First, by default, the new update to the Circonus UI will follow your OS preference for light or dark mode. When we deployed the new update, many users saw the UI automatically “go dark” since they have their OS preference set to “dark mode.” This may be the mode that most users will stick with, since it means not having to think about yet another individual app dark mode preference. Also, we check your OS preference on each page load, so if you end up changing your OS preference, the Circonus UI will reflect that change fairly immediately. This is done in a way so that the UI only loads your preferred light or dark CSS, but not both.

However, perhaps you prefer to use the Circonus UI in a mode different from your preferred OS mode, for whatever reason? That’s ok, there is a user preference for that. Simply go to the Circonus User Preferences page and look down the left hand column near the bottom. You’ll see a preference called “interface theme.” You can change it to be explicitly “Light” or “Dark” or you can always change it back to “OS Preference” if you want to revert to the default at any point in the future. After you change it, be sure to click the “Save” button at the upper right corner of the page to save your preferences.

What About Dashboards?

One area where we have supported a dark theme for many years is on our custom dashboards. The custom dashboard viewing pages used to have controls for activating a dark theme once you were viewing a dashboard in fullscreen mode, but we have removed that UI control. Now when viewing a custom dashboard, it will follow the same preference as the rest of the Circonus UI, regardless of whether you’re viewing the dashboard fullscreen or not.

However, one place we have kept an explicit “dark mode” toggle is when you’re setting up shared versions of a dashboard. When you click “Share Custom View” from the page menu, you will see the dashboard sharing modal. In the middle of the modal you will see a checkbox labeled “Dark Theme” and it will be defaulted to match your current theme (so if the Circonus UI is in dark mode then it will default to being enabled). This setting ensures that when you share a dashboard with a non-Circonus user, the dashboard will render in either dark or light mode, as you wish.

Final Thoughts

As we implemented Dark Mode in Circonus, we wanted to take our time to do it right. It’s a powerful way to make the UI more usable, but we wanted to be sure it was implemented in a way that makes sense to users. We have striven to maintain backwards compatibility where needed but not box ourselves into a corner in anticipating future theming needs that may arise, and we will continue to evolve and refine our Dark Mode theme as we see the need.