#Product 01-02 Switching Light Mode and Dark Mode with Two Small Dots

For Clock App Lab #001, I decided to switch between light mode and dark mode using two small dots placed under the time display, rather than using a large toggle switch. The left dot is for light mode, and the right dot is for dark mode. By removing labels and long explanations from the clock itself, the UI stays quiet, simple, and closer to the feeling of a real desk clock.

In this second note for Clock App Lab #001, I want to write about the light mode and dark mode switch.

At first, I used a very common toggle layout.There was a “Light” label on one side, a “Dark” label on the other side, and a switch between them. It worked, and it was easy to understand. But once I placed it inside the clock design, it started to feel too explanatory.

This project is not a settings app.It is a small clock that should be able to sit on a desk or stay open on a phone screen. The main purpose is simply to show the time. When I looked at it that way, a large switch and extra labels started to feel like visual noise.

A clock should be quiet.It should not ask the user to read too much. It should not feel like a control panel. It should just be there, showing the time when needed.

So I decided to replace the large toggle with two small dots under the time display.

The left dot is for light mode.The right dot is for dark mode.

That is all.

Removing the explanatory UI made the screen feel calmer. At first, two dots may look a little too simple, but after tapping them once, the meaning becomes clear. For a small clock app, this kind of “touch it and understand it” interaction feels more natural than putting text labels everywhere.

In light mode, the clock is designed to look like a small retro desk clock in a bright room. The background is warm and off-white, the body is red and cream, and the display panels use a deep gray-green color. The digits are close to black, giving the display a calm LCD-like feeling.

In dark mode, I did not want to simply make the whole screen black. Instead, I wanted the display panels to feel like a warm backlight in a dark room. When a phone is placed on a desk at night, a bright white screen can feel uncomfortable. So the dark mode uses a warm neo-orange display color, as if the clock itself is softly glowing.

This is not just a theme switch.It feels more like switching between a daytime clock and a nighttime clock.

During the day, light mode feels natural.At night, especially when the phone is placed horizontally on a desk, dark mode feels more comfortable.

The two-dot UI was designed to make that switch as small as possible.

I also considered adding a short explanation under the clock, something like “Tap the left dot for light mode and the right dot for dark mode.” But as soon as I added that kind of text, the screen started to feel less like an app and more like an instruction page.

That was not the direction I wanted.

If this clock becomes a PWA and is launched from the home screen, the first thing the user should see is the clock itself. Not a manual. Not a paragraph. Just the time.

So I removed the explanation text.

This was a small decision, but it changed the feeling of the prototype. On a normal web page, explanation text is useful. But inside a small app, too much explanation can make the interface feel heavy. For this project, I decided to explain the design choices in the blog, not inside the clock screen.

The two dots also work as a small visual detail. Placed under the display, they look a little like status indicators on old digital devices. In light mode, the active dot becomes red. In dark mode, the active dot changes to a warm orange tone. It is not a large button, but it still shows which mode is currently selected.

The selected mode is intended to be saved with localStorage.If the user chooses dark mode, the clock should open in dark mode again the next time. That feels natural for a clock. If someone uses it mainly at night, it would be annoying if the app returned to light mode every time.

Small apps often become better through these small memories.

Later, I also want to test automatic switching. For example, the clock could follow the operating system’s dark mode setting. It could also switch based on the time of day. Another possible experiment is using the Ambient Light Sensor API to detect the brightness around the device and change the display automatically.

But I do not want to add too much automatic behavior too early.

A clock is something the user may keep open for a long time. If the display changes unexpectedly, it can become distracting. So for the first version, manual switching with two dots feels safer and clearer. Automatic mode can be tested later as an experiment.

What I learned from this part is that making a UI bigger does not always make it better.

A large switch and clear labels are easy to understand, but they can also make the product feel less like a clock. In this prototype, I wanted to prioritize the feeling of a real object rather than the feeling of a settings screen.

Clock App Lab #001 is still a very small app.But even this light and dark mode switch involved several design decisions: color, size, placement, explanation, saved state, and how the clock should feel in a dark room.

Before adding this to the final clock design, I tested the interaction as a small standalone demo.

These small decisions are what slowly turn a simple HTML clock into something closer to a usable tool.

The next topic will be the flip animation for the numbers. At first, I tried making each digit flip separately, but the result looked a little unnatural. That mistake led to the current two-panel structure: one panel for the hour, and one panel for the minutes.

That was another thing I only noticed after actually building it.