Cloudflare Dashboard Beta Adds a Dark Theme

Cloudflare has released a beta version of dark mode for its dashboard. Users can now choose between light, dark, or system-matched themes from the Appearance card in their user profile. For OLED displays, dark mode can reduce power consumption, and in low-light settings it may help with eye strain—though for most it is simply a preference.

  1. Log into Cloudflare.
  2. Go to your user profile.
  3. Under Appearance, select Light, Dark, or Use system setting. Your choice is stored in local storage.
Side by side comparing the Cloudflare dashboard in dark mode and in light mode

The speed of delivery was possible because of the Cloudflare Design System, which standardizes interface primitives such as typography, color, layout, and icons across all products. A shared component library built on those primitives means every button, table, or chart in the dashboard is the same underlying code. Changing a few variables therefore propagates consistently across the entire application.

Flipping the Color Scale

Cloudflare's color system is built on a set of scales: ten hues, each with ten luminosity steps. That structure gives designers a simple way to reason about contrast—the first five steps work with light text, the last five with dark text. The dashboard's React codebase allowed the team to call reverse() on those luminosity arrays. The effect was immediate: every product built on the design system inherited a dark theme without additional per-team work, and the color contrast principles carried over with it.

Our blue color scale after calling reverse on it. High luminosity colors are now at the start of the scale, making them contrast accessible with darker backgrounds (and vice-versa).

Reversing luminosity, rather than performing a full color inversion, preserves the hue and saturation of each color. A vibrant blue stays a vibrant blue, keeping the brand's look and the meaning attached to specific colors—blue still means a call to action.

Refining the Details

The prototype was not a finished product. Data visualization libraries, icons, text, and component states all required a detailed audit. One of the first changes was the background: pure black (#000000) came across as too intense, so the team switched to an off-black gray, specifically "gray.0" at #1D1D1D. At full application scale, that softer background is far less distracting.

lorem ipsum sample text on black background and on gray background

Both black and gray backgrounds pass the WCAG minimum contrast requirement of 4.5:1 for text, but the gray is more comfortable for extended use. In light mode, dark text on pure white remains the standard.

The team also built a tool that could replace any color in a scale arbitrarily. This helped in checking the aesthetic and accessibility of components like buttons, which have default, focus, hover, and active states. Each state was reviewed to meet AA accessibility standards under the WCAG.

  • Default
  • Focus
  • Hover
  • Active
Example showing the various colors for states of buttons in light and dark mode

Subtle Navigation

The navbar received a special treatment. In light mode, application icons are solid blue with a distinct outline. For dark mode, that look was considered too bright and distracting. The decision was to use outlines for all icons, with a filled state reserved for the selected application. This change provides contrast between active and inactive apps and gives a clear fill-based feedback for hover states.

Side by side comparison of the navbar in light and dark modes

The same audit was applied to charts, icons, and links, resulting in a tailored dark experience without restructuring the codebase. For future UI work at Cloudflare, dark mode support comes as part of the design system by default, offering the full experience with no impact on how new features are built.

Dark mode is available now from the Appearance card in your profile, with a feedback form included for refining the theme further.