Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
Define semantic color tokens for a card and support a dark theme without repeating component declarations.
Write down the input contract and the failure cases before coding.
Ready to run the file open above.
Semantic tokens separate what a color means from its light or dark value. Components continue to reference surface, text, and border, so a theme switch only changes the token definitions rather than every component selector.
your-solution.css.solution.css only after a real attempt.This advanced CSS exercise focuses on Custom properties, Semantic tokens, Dark mode. Its requirements define the exact behavior to implement before you write code.
Open your-solution.css and select Run code. The CSS is applied to a sandboxed preview, the same way course CSS blocks run.
Attempt Design a theme token system first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.