Dark mode app design prompt for Codex

Make dark mode versions of app screens with a tinted dark background, toned-down accents, WCAG AA text contrast and a list of changed colors.

Create dark mode versions of the [home] and [library] screens. Don't just invert colors: use a dark [green-gray] background instead of pure black, lower the saturation of the accent, keep text contrast at WCAG AA or better, and tell me which colors you changed and why.

Works with

Codex, ChatGPT

From the set

Mobile apps

About this prompt

Codex creates dark versions of two screens and explains its color choices. The rules in the prompt head off the usual problems: a tinted dark background instead of pure black, a less saturated accent so it doesn’t glow against the dark, and text contrast that meets WCAG AA at least.

Name the screens to convert in the first two brackets. The home screen plus one content-heavy screen is a good pair, since one tests your key visual element and the other long runs of text. Take the background tint from your brand, a green-gray for a green brand or a blue-gray for a blue one, so the dark theme still feels like the same app.

The list of changed colors is the start of a reusable dark palette. Ask Codex to turn it into a small table of light and dark values per role, and pass that to the production code step so dark mode is built from tokens rather than screen by screen. Comparing each light screen with its dark twin side by side is the quickest way to catch an accent that went too dull.

More prompts from this set

• Android Material 3 adaptation prompt for CodexAdapt an iOS app screen to Android with Material 3: a top app bar, a navigation bar and a FAB, keeping your brand colors and type.
• Mobile app mockups to SwiftUI code prompt for CodexHave Codex build the approved HTML screens in your SwiftUI app, matching layout and spacing, using your theme colors and supporting Dynamic Type.
• Mobile app brief and screen list prompt for CodexDescribe your app’s users, core loop and platform, and have Codex list every screen of version one, grouped, with each screen’s purpose.
• App onboarding flow design prompt for CodexDesign three connected onboarding screens at 390×844, welcome, goal picker and first home, in one shared style with CSS illustrations.
• Mobile app home screen design prompt for CodexDesign an app home screen for a returning user, built around the one element you name as most important, with a tab bar and real stats.
• List and detail screen design prompt for CodexDesign a list screen with search and filter chips and the detail screen it opens, as two files, using realistic titles and numbers.