Why Clockflux turns light when you check in
Themes: App feature3 min readBy David Lawrence
If you use Clockflux every day, you've probably seen it already. You tap check in and the whole screen fades from dark to a warm cream. Tap check out at the end of the day and it fades back. There's no setting for it, and it doesn't follow your phone's dark mode. It follows your working day.
What changes, and when
The rule is short. While you're checked in, Clockflux is light. When you're not, it's dark. The switch takes about a third of a second, so it reads as a fade and not as a flash.
The colour of the check-in button goes the same way: green while you're working, red while you're resting. Put the two together and you can tell from across the room, or from the corner of your eye while another window has your attention, which state you're in.
That's the point of it. A time tracker only works if the record is right, and forgetting to check in or out is an easy mistake to make. A screen that looks different in each state gives you a second chance to notice. If it's light at nine in the evening, you're still on the clock.
It looks at your records, not at your system settings
Most apps with a dark mode follow the light or dark setting of your phone or computer. Clockflux ignores it, because the question it's answering is a different one: are you working right now?
It also gets this right on the first frame. When you open the app, a small script reads today's sessions from your device and sets the theme before anything is drawn. If your last session today has no check-out, the page opens light. Otherwise it opens dark. Without that you'd see a dark flash and then a correction, which is annoying if you open the app a dozen times a day.
Your records live on your device first, as the offline and backup guide explains, so this works with no connection too.
In the browser and when installed
In a browser, the colour of the toolbar around the page follows the theme where the browser lets a page set it, so the whole window can change along with the page.
If you've installed Clockflux on an Android phone, the status bar at the top keeps the dark colour whichever state you're in. Android takes that colour from the app's manifest and doesn't repaint it while the app runs, and a light status bar with the wrong icon colours would make the clock and battery unreadable. The page itself still switches.
Choosing your own colours (Pro)
The default light is a cream (#fffbf5) and the default dark a deep navy. With Clockflux Pro you can swap either one under Settings → Language & appearance → Personalization. The list is short on purpose:
- Light: Cream, Soft White, Warm Sand, Blush, Mint and Sky.
- Dark: Midnight, Charcoal, Slate, Espresso, Forest and Plum.
You can't type your own hex code. Every swatch on the list has been checked against the text and card colours the rest of the app uses, so no choice leaves you with grey text on a grey background. A free-form picker would make that impossible to promise.
Hover over an option and the app previews it straight away, even if it's the mode you aren't in at the moment. You can look at Plum at your desk during the day without checking out. The same two pickers show up in the quick setup if you run it.
What it doesn't do
The theme says nothing about how much you've worked. It doesn't turn a different colour at eight hours, or when you're into overtime. For that, there's the confetti at your target and the Health tab, which look at your hours and tell you what they add up to. The tracking docs cover the rest of the Track screen.
It isn't a sunset timer either. If you check in at 22:00 for a late shift, the screen goes light at 22:00. That can feel odd, but you are working.