Dark mode scheduling app: why we built it around your system setting

Cal Clear has a dark mode, and no button for it. The app, every booking page and this blog follow the light or dark setting on the device you're using. Here's why we built it that way and what that means for you and for the people who book with you.

How it works

Your phone and computer already know whether you want light or dark. Browsers pass that preference to web pages through a standard CSS feature called prefers-color-scheme. Cal Clear reads it and shows one of two themes:

• Light: a warm "paper" background with near-black ink text.
• Dark: a deep, slightly green-tinted charcoal with soft off-white text.

Change your system setting and the page follows. There's nothing to configure in Cal Clear.

Why no toggle

The setting already exists. People who want dark mode have usually set it once, for everything, often on a schedule that switches at sunset. A second switch inside one app is a chance for the two to disagree.

On a booking page, the guest's preference is the one that counts. You set up the link, but someone else opens it, maybe on a phone late in the evening with dark mode on. A host-chosen theme would flash them with a white page. Following their device means each guest sees the theme they picked.

There's nothing to remember. A toggle needs somewhere to store your choice. Following the system setting means there's no theme preference to save, and the preference never leaves the visitor's browser: the switch happens in CSS on their device.

One set of colours for everything

The light and dark themes come from one set of design tokens. The app and booking pages use them directly, and a small script copies the same values into the blog's stylesheet, so a colour change lands everywhere at once. That's also why the browser's address bar on phones changes colour with the theme: it's told the right background for each mode.

A dark theme is not an inverted light theme

Flipping white to black and black to white produces a theme that's harsh to read and breaks half the colours. The dark theme is its own set of choices:

• Not pure black. The background is #121410, a charcoal with a little green in it, and text is #ECE9E2 rather than pure white. Pure white on pure black glares, especially on bright phone screens.
• A lighter accent. Cal Clear's deep green (#1F5F4A) reads well on paper but disappears on charcoal, so the dark theme uses the lighter green from the logo's check mark (#5FC39B) for accents and links.
• A brighter warning colour. The amber used for warning icons in light mode falls below the 3:1 contrast that icons need on a dark surface, so dark mode uses a brighter amber.
• Heavier dimming behind dialogs. A dark scrim over a dark page barely shows, so the overlay behind a dialog is stronger in dark mode than in light.
• Native controls follow too. Time pickers and dropdowns are drawn by the browser, not by us, so we tell the browser to draw them dark as well. Otherwise a guest picking a time would get a bright white menu in the middle of a dark page.

Contrast in both themes

Dark mode is easy to get wrong. Grey text that looks elegant on a designer's monitor can be unreadable on a cheap laptop at noon. We hold both themes to the WCAG AA contrast standard: at least 4.5:1 for text against its background, and 3:1 for icons that carry meaning, such as the warning icon on alerts.

That isn't a one-time check. An automated test computes the contrast of every text and background token pair the interface defines, in both themes, and the test suite fails if any of them drops below the line.

How to switch your device

• Mac: System Settings → Appearance.
• Windows 11: Settings → Personalization → Colors → Choose your mode.
• iPhone and iPad: Settings → Display & Brightness.
• Android: Settings → Display → Dark theme (names vary a little by phone maker).

Most browsers follow the system setting by default. If Cal Clear stays light while your system is dark, check whether your browser has its own appearance setting that overrides it.

Where this fits

Following the system setting is the same idea as the rest of Cal Clear: do the useful thing, ask for nothing extra. Booking pages carry zero third-party trackers, calendars are read for free/busy only, never event titles, and booking data auto-deletes. A theme that follows the visitor is part of the same respect. More in privacy-first scheduling.

Frequently Asked Questions