Opt into dark UI — practice exercise

What you'll be asked to do

1. 1.Opt into dark UIexercise · easy · 10 min

   Tell the browser #wrap renders dark.

   Passes when: Tell the browser #wrap renders dark.

2. 2.Support both schemesexercise · easy · 10 min · practice plan

   Declare support for light and dark, in that order.

   Passes when: Declare support for light and dark, in that order.

3. 3.Define a theme tokenexercise · easy · 10 min · practice plan

   Define --brand as #ff5733 on #wrap.

   Passes when: Define --brand as #ff5733 on #wrap.

4. 4.Use a theme tokenexercise · easy · 10 min · practice plan

   Define --brand and colour #text with it.

   Passes when: Define --brand and colour #text with it.

5. 5.Build a two-token themeexercise · medium · 10 min · practice plan

   A brand colour and a surface colour, both used.

   Passes when: A brand colour and a surface colour, both used.

6. 6.Fix the invalid valuebug fix · easy · 8 min

   The value is dark.

   Passes when: The value is dark.

7. 7.Fix the commabug fix · easy · 8 min · practice plan

   The two schemes are separated by a space.

   Passes when: The two schemes are separated by a space.

8. 8.Fix the single dashbug fix · easy · 8 min · practice plan

   A custom property starts with two dashes.

   Passes when: A custom property starts with two dashes.

9. 9.Fix the missing var()bug fix · easy · 8 min · practice plan

   A custom property must be read through var().

   Passes when: A custom property must be read through var().

10. 10.Fix the token defined out of reachbug fix · easy · 8 min · practice plan

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

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

Between them these tasks cover color-scheme, Custom properties and Theme tokens.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.