Lesson 11 — Theme toggle

State that changes the look

State can control styles, not just text. A boolean dark decides the background and text colours. In JSX, style takes an object: style={{ background: "#111" }} — the outer braces mean "JavaScript here", the inner ones are the object.

<div style={{ background: dark ? "#111" : "#fff" }}>

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: dark mode, highlighted rows and error states are all "state → style".