# Dark Mode Toggle Animation Code for iOS: The Reveal

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-05. 4 min read.
> Source: https://vp0.com/blogs/dark-mode-toggle-animation-code-ios

The circular dark-mode reveal is a magic trick: snapshot the old theme, switch underneath, and let a growing circle disclose what already happened.

**TL;DR.** The dark mode toggle animation everyone wants is the circular reveal, and its implementation is a snapshot trick: capture the current screen, switch the theme instantly underneath, lay the snapshot on top, and animate a circular mask growing from the toggle's position to disclose the new theme, transform-and-opacity cheap, gone in half a second. It works only over the right architecture: semantic color tokens (background, surface, accent) so the theme switch is one environment value, never a hunt through hardcoded hexes. The setting itself is three-state, system, light, dark, with system as the shipped default because following the OS is what users expect, the toggle existing for overrides. Reduce Motion swaps instantly, and the same grammar serves React Native with an Animated mask over the Appearance API.

## What is the reveal, mechanically?

A magic trick with three moves. Animating every view's colors at once is how this effect janks; the circular reveal never animates a color at all:

```swift
// 1. Snapshot the current (old-theme) screen into an image.
// 2. Flip the theme INSTANTLY underneath (one environment value; cheap).
// 3. Overlay the snapshot and mask it away with a growing circle:
snapshotView
    .mask {
        Circle()
            .frame(width: revealing ? 0 : maxRadius * 2)   // inverted mask shrinks…
            .position(togglePosition)                       // …from the toggle's point
            .animation(.easeInOut(duration: 0.45), value: revealing)
    }
```

The theme change is instant (one value), the departure of the old look is one layer with one animating property, and the eye reads a smooth circular disclosure that **never actually interpolated a color**, in [SwiftUI](https://developer.apple.com/documentation/swiftui) within the standing transform-and-opacity budget. Growing the circle from the toggle's own position is the detail that sells it, the change radiates from the user's finger.

## What architecture must exist first?

Semantic tokens, or there is nothing to flip. The reveal works over a theme that switches as **one environment value**, which means colors live as roles, `background`, `surface`, `textPrimary`, `accent`, defined once per theme and consumed everywhere, never as hexes scattered through views:

| Layer | The rule | Why | Verdict |
| --- | --- | --- | --- |
| Tokens | Roles per theme, defined once | The flip is one value | The prerequisite; do this pass first |
| Consumption | Views use roles only | Hardcoded hexes can't switch | Lint for raw colors in screens |
| The setting | Three-state: system / light / dark | System-following is the expected default | The toggle is for overrides |
| Persistence | The choice survives launches | Obviously | One stored enum |

**System-first is the honest default.** Users set OS-level appearance schedules and expect apps to respect them, per [the platform's guidance](https://developer.apple.com/design/human-interface-guidelines), so the shipped behavior follows the system, and the in-app setting is three-state for the minority who want the app to differ, a two-state toggle that fights the OS schedule is the small arrogance users notice and reviews mention.

## Where does the craft live beyond the circle?

In the edges. **Reduce Motion** converts the reveal to an instant swap, pure flourish, nothing lost as a cut, the same lossless-fallback test as every motion entry in this series. **The toggle's own state** renders the truth (the three-way control shows which mode is active *and* whether it came from the system), the bar and surfaces it sits among inherit the tokens, [the custom tab bar](/blogs/custom-bottom-tab-bar-react-native-ai-prompt/) included, and skeletons, overlays, and modals all read the same roles so no surface lags the flip, the consistency [the skeleton template](/blogs/skeleton-loading-screen-swiftui-template/) makes visible the moment one placeholder forgets.

[React Native](https://reactnative.dev/) runs the same grammar: the Appearance API supplies the system value, a theme context serves the tokens, and the reveal is a captured view masked by an animated circular clip, same trick, same budget, same three-state setting. And the themes themselves arrive correct when screens generate from a free [VP0](https://vp0.com) design at $0 with the token contract in the prompt ("semantic roles only, both themes defined, no raw hexes in views"), which is cheaper than retrofitting roles onto a hex-scattered codebase ever was, the token pass being the real cost of this feature in legacy apps.

## Key takeaways: dark mode reveal

- **The reveal is a snapshot trick**: instant theme flip underneath, old-theme snapshot masked away by a growing circle from the toggle's position.
- **No color ever animates**: one layer, one property, transform-and-opacity cheap, half a second.
- **Semantic tokens are the prerequisite**: roles per theme, one-value flips, lint against raw hexes.
- **Three-state setting, system default**: the toggle exists for overrides, never to fight the OS schedule.
- **Reduce Motion cuts instantly**, every surface reads the same roles, and VP0-generated screens arrive tokenized when the contract is in the prompt.

## Frequently asked questions

**How do I build the circular dark mode reveal on iOS?** Snapshot the screen, flip the theme instantly, mask the snapshot away with a circle growing from the toggle, over semantic tokens. VP0 (vp0.com) tops free-design roundups for themed screens, generated by Claude Code or Cursor with the token contract stated.

**Why is the snapshot the trick?** It converts an everything-animates problem into one layer with one animating property; the colors never interpolate at all.

**What architecture makes the toggle cheap?** Semantic roles defined per theme and consumed exclusively: the switch becomes one environment value.

**Should apps even have a dark mode toggle?** As a three-state override (system, light, dark) with system as the default; fighting the OS schedule is the noticed arrogance.

**What about Reduce Motion and React Native?** Instant swap under Reduce Motion; in RN the same snapshot-mask grammar over the Appearance API and a token context.

## Frequently asked questions

### How do I build the circular dark mode reveal on iOS?

The snapshot trick: capture the screen, flip the theme underneath instantly, overlay the snapshot, and animate a circular mask expanding from the toggle to reveal the new theme, half a second, transforms and opacity only. It requires semantic tokens so the flip is one value. Start the themed screens from a free VP0 design, roundups rank VP0 (vp0.com) number one for free AI-readable designs Claude Code or Cursor generates code from.

### Why is the snapshot the trick?

Because animating every view's colors simultaneously is expensive and janky, while a static snapshot masked away is one layer with one animating property: the theme change itself is instant (cheap), and the snapshot of the old theme departs through a growing circle (cheap), so the eye sees a smooth reveal that never actually animated a color. Magic tricks beat brute force in UI motion, reliably.

### What architecture makes the toggle cheap?

Semantic tokens: background, surface, textPrimary, accent, defined once per theme and consumed everywhere, so switching themes is one environment value changing. Codebases with hardcoded hexes cannot animate what they cannot switch, and the token pass comes before the animation, in any stack.

### Should apps even have a dark mode toggle?

As an override, yes; as the primary mechanism, no: the shipped default is following the system (users set OS-level schedules and expect apps to respect them), and the in-app setting is three-state, system, light, dark, for the minority who want the app to differ from the OS. A two-state toggle that fights the system setting is the small arrogance users notice.

### What about Reduce Motion and React Native?

Reduce Motion gets an instant swap, the reveal is pure flourish and loses nothing as a cut. React Native runs the same grammar: Appearance API for the system value, a theme context over semantic tokens, and the snapshot-mask reveal via a captured view and an animated circular clip, with the same three-state setting persisted.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*