#Product 01-04 Testing Ambient Light Detection for an Automatic Backlight Mode

For Clock App Lab #001, I wanted to test whether the clock could react to the brightness around the device. The idea is simple: when the room is bright, the clock stays in light mode; when the room becomes dark, the display changes into a warm backlight mode. This is only an experiment for now, but it helps explore how a small PWA clock could feel more like a real object on a desk.

In this fourth note for Clock App Lab #001, I want to write about ambient light detection.

After adding light mode and dark mode, the next question was simple: should the clock switch modes by itself?

At first, I designed the clock with two small dots under the time display. The left dot switches to light mode, and the right dot switches to dark mode. That manual switch still feels important because it gives the user control. A clock should not change its appearance too often without the user understanding why.

But since this project is also a PWA experiment, I wanted to test one more idea.

What if the clock could sense the brightness of the room?

A real desk clock does not always look the same during the day and at night. In a bright room, the display looks like a normal LCD panel. In a dark room, the backlight becomes more important. That feeling is something I wanted to bring into the web app version.

The concept is not to make the app feel futuristic. It is actually the opposite. I want it to feel more natural. If the room is bright, the clock should stay quiet and readable. If the room is dark, the clock should gently move into a warmer backlight mode.

This is why ambient light detection became an interesting experiment.

Before adding the idea into the main clock, I made a small reference implementation. The purpose of this demo is not to finish the whole feature. It is just to test the behavior: read a brightness value if the device allows it, then switch the visual mode based on that value.

This kind of test is useful because browser features are not always available everywhere.

A PWA can feel close to a native app, but it still runs inside a browser environment. Some APIs may work on one device and not work on another. Some features may require permissions. Some may be unavailable depending on the browser.

So I do not want to make ambient light detection the only way to use the clock.

For Clock App Lab #001, the safer structure is this:

manual mode comes firstautomatic mode is optionalfallback behavior is always needed

That means the two-dot switch remains the basic control. If the user taps light mode or dark mode, that choice should be respected. The clock should remember the selected state with local Storage and open in the same mode next time.

Ambient light detection should only assist when manual mode has not been clearly selected, or when an automatic mode is intentionally enabled later.

This is an important design decision. Automatic behavior can be helpful, but it can also become annoying. If a clock changes color while the user is looking at it, the user may feel that something is unstable. A clock should feel calm. It should not behave like a constantly moving interface.

Because of that, the automatic backlight idea needs to be quiet.

The threshold also matters. If the value changes too easily, the clock may switch back and forth between modes. That would feel broken. A better approach is to use a small gap between the light threshold and the dark threshold. For example, the clock could enter dark mode when the brightness becomes very low, but it should not return to light mode until the room is clearly brighter.

This kind of gap is useful because real environments are not perfectly stable. A desk lamp, a shadow, or a hand passing over the device could change the brightness for a moment. The UI should not react too nervously.

So the goal is not maximum sensitivity. The goal is a calm reaction.

There is also a visual reason to test this feature. In light mode, the display panel uses a deep gray-green color, close to the feeling of a classic LCD clock. In dark mode, the panel changes into a warm neo-orange backlight. This difference is meaningful because it matches how the clock might be used during the day and at night.

During the day, the gray-green display feels more natural. At night, the orange display feels more comfortable.

This makes the mode switch feel less like a theme setting and more like a real environmental response.

Another important point is that the whole screen should not become bright. The backlight should mainly belong to the display panels. If the entire page glows, it starts to feel like a website again. I want the clock to feel like a small object placed on the desk, not a full-screen design shouting for attention.

That is why the dark mode in this prototype uses a dark body with warm display panels. The clock becomes visible, but it does not become too loud.

In a future version, this ambient light idea could be expanded in several ways. The simplest version would only switch between light mode and dark mode. A more subtle version could adjust the strength of the glow. For example, in a very dark room, the clock could reduce contrast slightly and use a softer orange. In a dim but not fully dark room, it could keep the orange display but reduce the glow.

However, I do not want to overbuild this too early.

The first version only needs a small experiment. Can the app read the environment? Can the UI respond without feeling strange? Can the feature be explained clearly in the development notes?

That is enough for now.

This is also a good topic for Clock App Lab because it connects design and code. The feature is not just technical. It changes the feeling of the product. A brightness sensor is not interesting by itself. It becomes interesting when it helps the clock behave more like a real object.

That is the kind of small detail I want to collect in this project.

Clock App Lab #001 started as a simple retro desk clock, but each step adds a small layer of product thinking. The two-dot switch made the UI quieter. The two-panel flip animation made the display feel more physical. Ambient light detection adds the idea that the clock can respond to the room around it.

Still, the main rule remains the same: keep the clock simple.

If a feature makes the clock feel smarter but also more distracting, it should be removed or delayed. If a feature makes the clock feel more natural, it is worth testing.

For now, ambient light detection is an experiment, not a final promise. The clock must still work without it. The manual light and dark mode switch remains the stable base. But this small test is useful because it gives the project another direction to grow.

The next step is to connect these visual experiments to the actual PWA structure. That means preparing files such as manifest.json, icons, and a service worker, then checking how the clock behaves when it is installed to a phone home screen.

The visual prototype is becoming stable enough.Now the project can slowly move from “a clock on a web page” toward “a small installable clock app.”