Add a Light / Dark / System Theme Switcher — Airo AI Builder Prompt Library

Design Changes

Add a Light / Dark / System Theme Switcher

Add a theme switcher with Light, Dark, and System options. Choose where the toggle appears, the switcher style, and specify your dark mode color palette — or let Airo AI Builder pick one based on your brand colors.

Fill in your details

Prompt completeness

Tip: Lead with who you are

Before you paste this prompt into Airo AI Builder, add a sentence about your business at the top — who you are, who you serve, and what makes you different. This helps Airo AI Builder write copy that sounds like you instead of something generic. Use the Describe Your Business template on the homepage if you need help writing one.

Dark Mode Colors

Built something? Show it off in the Airo Builder Lab

Join Discord →

Your Prompt

0/3 filled
Add a theme switcher to my site with three options: Light, Dark, and System (matches the visitor's device setting). Put the switcher in the Header. Use Icons for the three options. Light mode: keep the current design as-is. Dark mode colors: Background: [#1A1A2E or describe it], Text: [#E8E8E8 or describe it], Accent: [keep same as light mode, or specify]. System mode: automatically use light or dark based on the visitor's device preference, and switch in real time if they change it. Save the visitor's choice so it persists when they come back. Make sure all pages, components, images, and text remain readable in both modes. Don't change any content or layout — just add the theme switcher.

Paste this at the top of any prompt from the library — always first, before the build instructions. Unfilled fields show as [brackets] — fill them in or leave as-is. Click the prompt to select all text. See prompt writing tips →

Did this prompt help you?