A Good Switch Has a Sound

One small sound can make a switch feel physical.

This site uses two versions of the same click: light mode is brighter, dark mode is lower. There is no autoplay, music, or sound on every button. The sound happens only when the theme actually changes.

one interaction, two cues

This is the sound from this site's theme switch.

It is a physical click, not a musical note. Choose either mode, then use the same small cue for a switch in your own interface.

playLight switchBright contact, light bodyplayDark switchDarker contact, lower body

Choose a switch to hear the real theme sound.

Use it for a physical change

This cue fits a theme switch, view toggle, or preference that saves immediately. Keep it away from errors, payment success, destructive actions, and unrelated buttons. One sound should keep one meaning.

const nextTheme = isDark ? "light" : "dark";
audioContextRef.current = playThemeChangeSound(nextTheme, audioContextRef.current);
setTheme(nextTheme);

The full, reusable helper is in the source code.

How light and dark differ

It is one short click with two moods:

• Light mode: a brighter contact at 2600 Hz, followed by a 320 Hz body.
• Dark mode: a softer contact at 1800 Hz, followed by a 220 Hz body.

Noise gives the fingertip contact. A triangle wave gives the tiny body. A low-pass filter and a fast gain fade keep both versions gentle.

const isDark = nextTheme === "dark";

bandpass.frequency.value = isDark ? 1800 : 2600;
body.type = "triangle";
body.frequency.setValueAtTime(isDark ? 220 : 320, bodyStart);

noise.stop(now + 0.026);
body.stop(bodyStart + 0.07);

Three rules

1. Play sound after a click or key press, never on page load.
2. Keep the visual state clear without audio.
3. Make the sound quiet and short enough to be missed rather than noticed.

Jakub Krehel’s “Details That Make Interfaces Feel Better” is a useful model here: show one small detail, let people try it, and explain only what changes the result. MDN also recommends user-started audio and clear controls. MDN