Dark Mode for Developer Tools: Our Design Decisions
Dark Mode for Developer Tools: Our Design Decisions
Dark mode is table stakes for developer tools. If your terminal is dark, your editor is dark, and your browser is dark, a safety dashboard that blasts white light at you is not just annoying — it breaks your flow and your night vision.
SafeClaw has supported dark mode since our first dashboard release. But dark mode for a safety tool presents unique design challenges that go beyond swapping background colors. Here's how we approached them.
The Problem with Naive Dark Mode
A naive dark mode implementation inverts the color scheme: white becomes dark gray, black becomes white, and everything else stays roughly the same. For a content site or a social app, this works fine. For a safety dashboard, it creates problems.
Safety information relies heavily on color semantics. Green means allowed. Red means denied. Yellow means escalated. Orange means warning. These colors carry meaning that users learn to recognize instantly. In dark mode, these colors need to work against a dark background while maintaining their semantic clarity — and that's harder than it sounds.
Red on white has a contrast ratio of 4.3:1. Red on dark gray has a contrast ratio of 3.1:1 — below the WCAG AA minimum of 4.5:1 for normal text. A straightforward color swap would make SafeClaw's most critical information — deny decisions — harder to read.
Our Approach
We designed SafeClaw's dark mode as a separate color system, not a mechanical inversion of the light theme.
Adjusted Status Colors — Our dark mode status colors are lighter and more saturated than their light mode equivalents. Dark mode green is#4ADE80 (vs. #16A34A in light mode). Dark mode red is #F87171 (vs. #DC2626). These adjusted values maintain contrast ratios above 5:1 against our dark background (#1A1A2E), exceeding WCAG AA requirements.
Reduced Surface Contrast — In light mode, we use white cards on a light gray background for clear visual hierarchy. In dark mode, we reduce the contrast between surfaces to avoid a "patchwork" effect. Cards are #232340 on a #1A1A2E background — distinguishable but not jarring. The information hierarchy comes from typography and spacing rather than surface contrast.
Syntax Highlighting — The session replay feature shows command strings and file paths with syntax highlighting. Our dark mode highlighting palette was designed independently, optimized for readability against the dark surface. We didn't just reuse the light mode palette.
Chart Colors — Analytics charts need distinct, differentiable colors for data series. We tested our dark mode chart palette with color vision deficiency simulators to ensure the charts are readable for users with protanopia, deuteranopia, and tritanopia.
System Theme Respect
SafeClaw follows the operating system's theme preference by default. On macOS, it reads the system appearance setting. On Linux, it checks the prefers-color-scheme media query. On Windows, it follows the app mode setting.
Users can also override to always-light or always-dark in SafeClaw's settings. The preference is stored per-device, so your desktop and mobile installations can use different modes.
Theme switching is instant — no page reload, no flash of unstyled content. We use CSS custom properties for all theme-dependent values, and the switch is a single class toggle on the root element.
Notification Contrast
Push notifications appear in the OS notification center, which has its own theme. SafeClaw's notification content is designed to be readable in both light and dark OS notification styles, which means we avoid relying on background colors in notification text. Status is communicated through text labels and emoji indicators rather than color swatches.
Testing
We test both themes in our CI pipeline. Visual regression tests run against both light and dark screenshots, catching unintended changes to either theme. We also run automated contrast ratio checks on all text-on-background combinations to ensure WCAG compliance is maintained as the dashboard evolves.
The full theme implementation is on GitHub, and design tokens are documented in our docs.
Dark mode isn't a feature you check off a list. For developer tools — especially safety tools where color carries meaning — it's a design challenge that deserves careful attention. We think we got it right.