Skip to main content

CSS Theming — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Theming lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Opt into dark UI

    easy10 min

    Tell the browser #wrap renders dark.

  2. 2

    Support both schemes

    easy10 min

    Declare support for light and dark, in that order.

  3. 3

    Define a theme token

    easy10 min

    Define --brand as #ff5733 on #wrap.

  4. 4

    Use a theme token

    easy10 min

    Define --brand and colour #text with it.

  5. 5

    Build a two-token theme

    medium10 min

    A brand colour and a surface colour, both used.

Find the bug(5)

  1. 1

    Fix the invalid value

    easy8 min

    The value is dark.

  2. 2

    Fix the comma

    easy8 min

    The two schemes are separated by a space.

  3. 3

    Fix the single dash

    easy8 min

    A custom property starts with two dashes.

  4. 4

    Fix the missing var()

    easy8 min

    A custom property must be read through var().

  5. 5

    Fix the token defined out of reach

    easy8 min

    A token on a child cannot be used by its parent.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace