Dark mode toggle UI: how 28 SaaS apps let users pick a theme

By Screenrove editorial · 22 October 2026

Dark mode toggle UI in 28 SaaS apps: 16 of 25 offer just System, Light and Dark, others up to 16 themes. Previews, live re-theming and Pro-gated Dark.

Of the 25 SaaS theme pickers in our library where we could see every option, 16 offer exactly three: a system-following option, Light and Dark. The rest range from Clockify's bare Light/Dark pair to Workflowy's 16 named themes, and the interesting differences in dark mode toggle UI are not the count but where the control lives, what it previews and what it costs.

We pulled every appearance screen on the Settings pages wall: 59 screenshots from 40 products. Twelve of those products theme something you publish (a form, a storefront, a docs site, an app you build). The other 28 theme the product's own interface, and they are the subject here.

How many themes do SaaS apps offer?

Three of the 28 don't show the full list in our captures (Amplitude's select is closed, Netlify shows a summary card, Fibery's capture is cut off below its Warm and Neutral thumbnails). For the other 25:

The long lists split into two camps. Developer tools borrow editor palettes: Postman offers 12 including Ayu, Dracula, Monokai, Night Owl and Solarized, and Workflowy's select runs from Light, Dark and System through Catppuccin, Hacker, Matcha and Moon to One Dark. Consumer to-do apps go for mood instead: Superlist lists 13 themes from Blackout and Ocean to "Red & White", and TickTick has a "Color Series" of 12 named swatches (Sky, Matcha, Peach, Lilac…) above a "City Series" of illustrated skylines (Cairo, London, Los Angeles, Moscow).

Only two products treat contrast as a theme. Plane's six options are System Preference, Light, Dark, "Light high contrast", "Dark high contrast" and "Custom theme", and Postman has High Contrast Light and High Contrast Dark cards. If you are adding themes beyond Dark, those two are a better use of the slot than a third accent colour.

The dark mode toggle UI: four shapes

Across the 28, the control takes one of a few forms:

• Preview thumbnails or cards: 12. Eraser, Krea, Postman, Checkly, Superthread, Twenty, Evernote, Jira, Todoist, Raindrop, TickTick and Fibery.
• Dropdown select or popover: 8. Plane, Superlist, Workflowy, Adobe Express, Canny, Recraft, Amplitude and PostHog.
• A flyout in the avatar or main menu: 4. Coolors, Neon, Render and tldraw.
• Plain radio list: 3. Medium, Any.do and Clockify. Netlify shows only a summary card reading "Dark" with an Edit settings button.

Krea uses small screenshots of its own UI for System, Light and Dark, and repeats the trick for its "Sidebar icons" setting (Colored, Simple, Minimal). Twenty goes the other way, with tiles that hold nothing but "Aa" on light, dark and a half-and-half "System settings" tile. Five products draw the system option as a split tile (Krea, Checkly, Superthread, Twenty and Jira's "Match browser") that explains itself without copy.

Eraser goes furthest. Below three radio cards (Light, Dark, Auto) it renders a full sample file, "Technical Design Doc" with a goal, links, decision makers and an entity diagram, so you judge the theme on the kind of content you will actually read. The intro line also teaches the shortcut: "Toggle between Light & Dark mode at any time with ⇧ Alt D." It is the only picker in the set that teaches a shortcut.

Twelve names for "follow my system"

23 of the 25 full lists include an option that follows the operating system. Clockify offers only Light and Dark, and Raindrop's four unlabelled thumbnails don't show one. Those 23 products use 12 different labels for that option:

• "System": Krea, Neon, Render, tldraw, Coolors, Workflowy
• "Auto": Eraser, Checkly, Recraft, Any.do
• "System preference": Canny, Superlist, Plane
• "Sync with system": PostHog, Postman
• One product each: "Auto (follow system settings)" (Medium), "System settings" (Twenty), "Use system settings" (Evernote), "Match system settings" (Superthread), "Match browser" (Jira), "Default (Browser Theme)" (Adobe Express), "Follow System Dark Mode" (TickTick) and an "Auto Dark Mode" toggle (Todoist)

"Auto" alone is the vaguest: auto based on what? Medium's "Auto (follow system settings)" and Eraser's subline "Use system preferences" answer the question. Postman does the most with it: pick "Sync with system" and the grid becomes two cards, Day Theme and Night Theme, each with its own preview and select and an "Active" tag on the live one.

Live re-theme or preview first?

For 15 of the 28 products we captured the theme control after switching to dark. In all 15 the settings surface itself had already repainted, with the control still on screen: Adobe Express's modal, Any.do's corner sheet, Medium's dialog (where Done flips from a black pill to a white one) and Jira's whole personal settings page, with no save button in sight. Krea repaints the modal and the app behind it in one step.

The exception is when the setting is not personal. Grafana's interface theme on the organisation's Default preferences page goes through a dialog: "This will update the preferences for the whole organization. Are you sure you want to update the preferences?" A confirm step is justified there, and nowhere else in the set.

That raises the scope question, and the best pickers answer it in a sentence. Eraser: "Your personal settings do not affect what others see." Amplitude: "These settings affect your experience in the application, but will not affect others in your org." Checkly: "This setting is stored per device." Fibery: "Manage display settings for your current browser or app". Medium adds an honest caveat to its Beta badge: you "might run into an occasional area on Medium that is still under dark mode construction."

Builders that theme your output differ. Glide's Environment tiles (Auto, Light, Dark) and Gumroad's Colors row flip only the preview of the app or storefront to dark while the editor stays light. That is correct: the dark mode belongs to your end users, not to you.

Dark mode as a paid feature

Only one of the 28 charges for dark mode itself. Coolors tucks Theme into the avatar menu, and in the flyout (System, Light, Dark) Dark carries a pink "PRO" tag.

The more common move is to give away Dark and charge for variety. Todoist shows four free themes (Todoist, Dark, Moonstone, Tangerine) and four locked Pro themes (Kale, Blueberry, Lavender, Raspberry) under an "Unlock more themes" banner with an Upgrade button. TickTick's illustrated City Series tiles carry a small crown badge, the same icon as the Premium item in its settings nav.

How hard is it to find?

Four products keep the toggle in a menu rather than a settings page. Coolors, Neon and Render put it in the account menu, which is quick. tldraw puts it three menus deep: main menu, then Preferences (nine options plus three submenus), then Theme, which ends at Light, Dark and System. Eraser's shortcut and the account-menu flyouts show the shorter path.

Bonus: show the value, not the format code

Theme often sits beside date and time formats, and the best pages preview those too. Workflowy's pills read "Thu, Oct 22" and "4:15pm"; in our dark capture minutes later the same pill reads "4:20pm", because it renders the live clock. TickTick shows fixed examples ("24 Hour (13:00)", "12/31/2026"), and Twenty uses a sample date, "System settings · Mar 12, 2024".

What to steal

• Ship three options first. System, Light, Dark is what 16 of 25 products offer. Add high-contrast variants (Plane, Postman) before novelty palettes.
• Name the system option plainly. "Auto" needs a qualifier; "Sync with system" or "Auto (follow system settings)" doesn't.
• Preview with your own UI. Postman's mini mocks and Krea's screenshots beat a list of names; draw the system option as a split tile.
• Apply instantly, confirm only shared changes. Every personal picker we caught repainted in place; Grafana confirms because it changes the whole organisation.
• Say who it affects. One line, like Eraser's or Checkly's.
• Charge for extra themes, not for Dark. Coolors is alone in gating dark mode; Todoist and TickTick sell variety instead.
• Keep it one step away. An account-menu flyout or a shortcut, not three nested menus.

How we counted

We captured these screens in desktop browsers with research accounts in September and October 2026, and a vision model recorded each screen's attributes, which you can check on each screen's page. Option counts come from what was visible in our captures; a closed select or a cropped list was left out rather than guessed. We record what we saw, not A/B test results, so nothing here says which picker gets more people to switch. Because we deliberately switched themes to capture them, the share of dark screens on this wall says nothing about how many users choose dark.

To compare these yourself, browse the dark appearance screens or the full Settings pages wall. Building one now? Connect the Screenrove MCP server and ask your agent for theme pickers with previews before it writes the component.