Dashboard
Appearance and dark mode
Make guides look like part of your app, in light and dark mode, by hand or detected from your app.
Guides › Appearance sets how every guide in an app looks: its brand kit. One kit covers both environments, and saving it puts it live in both within a minute. Two previews run the real SDK with your kit as you edit, one on a light page and one on a dark page.
What you can set
| Setting | What it changes | Plan |
|---|---|---|
| Light or dark | Follow your app (the default), always light, or always dark. | Free |
| Accent | Buttons, done steps, progress bars, the launcher button and the guide list's icons. Set it for light mode; dark mode gets a lighter version of it. | Free |
| Card and Text | The card and guide list background, and the main text on it. | Pro |
| Dark mode colours | Worked out from the light ones by default: the same hues, made to read on a dark card. Turn that off to set the dark accent, card and text yourself. | Accent: Free. Card and text: Pro |
| Corners | Sharp, small, medium or round (PlayStep's own: pill buttons, round cards). | Pro |
| Card shadow | None, soft or strong. | Pro |
| Backdrop dim | How dark the page goes behind a spotlight or a card in the middle of the screen. | Pro |
| Font | Your app's font for text and titles, instead of PlayStep's Bricolage Grotesque and Figtree. Name it as in your CSS, like Inter, system-ui, sans-serif. It must already load in your app. On Flutter, the first name is a font family in your pubspec.yaml. | Pro |
The current step and the spotlight ring stay spark yellow, so they stand out on any page.
PlayStep keeps every guide readable: text on cards at 4.5:1 contrast or better, and accents and the focus ring at 3:1 or better, in both modes. If a colour you pick would not make it, PlayStep moves it just enough and says so under the colours ("Dark accent moved from … to …").
A workspace that moves from Pro to Free keeps its whole kit saved. Its guides wear only the accent and the light or dark setting until it is back on Pro.
One guide that looks different
In a guide's settings you can give it its own accent colour or make it always light or always dark. Everything else comes from the app's kit.
Light and dark mode
With Follow your app, guides switch when your app does, even while a guide is showing:
- Web: a
darkorlightclass on<html>or<body>(as Tailwind, shadcn and most apps use), ordark/lightin adata-*attribute there (data-theme,data-bs-theme,data-mantine-color-scheme…), or acolor-schemeofdarkorlight. When your page says none of these, guides follow the device setting. - Flutter: your app's theme, so
MaterialApp(themeMode: …)and aCupertinoApp's brightness both work, then the device setting.
Developers can also choose in code: colorMode: 'dark' in init on the web, or PlayStep.setColorMode(PlayStepColorMode.dark) in Flutter. A guide or kit set to always light or always dark wins over that.
Suggested for you
PlayStep looks for your app's look on its own, at no cost and on every plan, and suggests a kit when it finds one:
- from your app's address, when you add or change it (in the app's settings) and then once a month while you have no kit: PlayStep reads the page and its stylesheets, without AI and without a browser;
- from pages Generate with AI read, and from screens you capture with a capture link (a Flutter app sends its own theme, so that one is exact). These replace a suggestion from the address.
The first time, a note in your inbox says so. Guides › Appearance then shows "PlayStep matched your app's look" with its colours and where each came from: Apply to the form, check the previews, and save. On Free, applying takes the accent and light or dark; the card and text colours, font and corners need Pro. Dismiss hides it until PlayStep finds a different look. Nothing changes in your guides until you save.
Detect from my app
On Pro, PlayStep can suggest a kit from your app instead of you picking colours:
- Choose where to look: Its address for a public page, or A capture link for pages behind a sign-in and for Flutter apps (make one in Generate with AI; each captured page or screen also records its look).
- Press Detect. PlayStep reads your app's colours, font and corner sizes, and its dark mode if it has one. It takes about half a minute and is paid with AI credits (the button says how many at most).
- Check the suggestion and the notes on where each choice came from, then Apply to the form. Nothing changes in your app until you save.
What is read: background, text, button and card colours, colour variables named like --primary or --brand, the page's theme-color, font names and corner sizes. Never text from the page. For a public address PlayStep loads the page in a browser, in light and then dark mode, and takes one screenshot for the model to look at. The screenshot is not stored. A Flutter capture sends your app's theme itself, so nothing is guessed.
With your AI assistant
An AI assistant connected to PlayStep can do this for you: ask it to make your guides match your app. It reads the suggestion (app_theme_get), or runs Detect from my app (app_theme_detect, Pro, AI credits), and proposes the kit with app_theme_update. Like every change that reaches your users, the proposal waits for an owner or admin to approve it in PlayStep. The playstep-match-app-look skill walks it through this.