Keyboard shortcuts and a command palette
N runs New document, but only when you're not typing: inside the palette's search box the same key just types. Ctrl+K (or ⌘K) opens the palette with focus in the search; the arrows and Enter run a command, and the dialog closes and returns focus. Click inside the preview first, then try the keys.
Themes are sets of CSS variables switched by one attribute on <html>; the app follows the system setting (prefers-color-scheme) unless the user picks light or dark, remembers that choice, applies it before the first paint so the page never flashes the wrong colours, respects reduced motion, and offers keyboard shortcuts and a command palette for power users.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a useTheme() hook that returns { choice, theme, setChoice } and can be used from any component (hint: context or an external store).
Add Escape and a click outside to close the command palette, and make Ctrl+K toggle it.
Explain it without notes
How would you implement light, dark and system themes in a React app?
What causes a flash of the wrong theme and how do you prevent it?
How do you read and react to prefers-color-scheme and prefers-reduced-motion in React?
What are the rules for good keyboard shortcuts?
Preview
Console
Nothing logged yet.Expected console output
ran: New document
palette open: true, focus in search: true
matches for 'o': 3
ran: Toggle dark mode
palette open: false