Product design and design systems
Disney Parks – Dark Mode
Exploring a dark theme for Disney's parks app, built into the Vista design system so every screen and component can switch with its tokens.
The problem
Guests use the parks app all day, often where a bright white screen gets in the way: at nighttime shows, in dark ride queues and late in the day on a low battery. The app had no dark theme.
Why dark mode
- Saves battery
- Easier viewing at night
- Less glare in dark rides and indoor queues
The approach
I built dark mode into the Vista design system so every component switches with tokens. Each component was reviewed side by side in light and dark, then the theme was tested on real parks app screens.
Roadblocks
- One "inverse" token was doing two jobs. I split it so text on brand colors stays white while true inverse surfaces flip in dark mode.
- Brand colors could only get so light before white text lost contrast. I set a lightness limit so every brand fill still passes.
- Toasts, disabled states, map pins and menus fell short on contrast in dark mode. Each was tuned until it read clearly.
Every component, in both themes
Dark mode had to work on every single component, not just whole screens. We ran each one through both themes side by side: calendars, date pickers, dropdowns, buttons, search, toggles, checkboxes and segmented controls. For each, we checked that it still read clearly, kept its contrast and behaved the same way, so a selected date or an active toggle is just as obvious at night as it is in daylight.
Finding the right background
A straight dark theme gets very dark, very fast, and loses the lightness and brightness people expect from Disney. To bring the whimsy and magic back, we tried a range of backgrounds on the same Trip Plans screen, from flat navy to soft gradients with hints of blue and purple. The gradients kept the screen easy on the eyes at night while still feeling like a Disney sky.
Trip checklist
A dense, task-heavy screen. In dark mode, cards separate from the background with lighter surfaces instead of shadows, which disappear on dark backgrounds.
Alert components
Toasts and badges, light against dark. Status colors become deep tinted fills, so success, warning, error and info stay easy to tell apart without glowing in a dark room, and every badge style keeps its meaning in both themes.