Dark Mode and Theming in Tailwind Quiz Quiz

Explore how dark mode and custom theming are implemented using Tailwind CSS utilities and strategies. This quiz helps you understand configuration, class usage, and best practices for accessible and flexible theming solutions.

1. Activating Dark Mode

   Which configuration key must be set in the Tailwind CSS configuration file to enable dark mode classes using a class-based strategy?

   1. mode: 'dark'
   2. darkMode: 'class'
   3. enableDark: true
   4. themeDark: 'enable'

   Explanation: The correct way to activate dark mode with a class-based strategy is by using the darkMode: 'class' configuration option. Setting enableDark: true, mode: 'dark', or themeDark: 'enable' are not valid options and will not activate dark mode functionality. Only the first option matches Tailwind syntax for enabling dark mode via a class.

2. Applying Dark Styles

   How do you apply a background color that changes to gray-800 only when dark mode is active, using Tailwind utility classes?

   1. dark:bg-800 bg-white
   2. bg-white bg-dark-gray-800
   3. bg-dark-gray-800
   4. bg-white dark:bg-gray-800

   Explanation: The correct answer is bg-white dark:bg-gray-800, as the dark: prefix indicates the utility should only apply when dark mode is active. Options like bg-dark-gray-800 and bg-white bg-dark-gray-800 are not valid utility classes. The order and prefix usage in the third and fourth options do not follow Tailwind's convention.

3. Customizing Theme Colors

   Which section in the Tailwind CSS configuration file should you modify to define custom color palettes for your theme?

   1. options: { themeColors: { ... } }
   2. settings: { colorThemes: { ... } }
   3. custom: { palette: { ... } }
   4. theme: { colors: { ... } }

   Explanation: To create custom color palettes, you should modify the colors object under the theme key in the configuration file. The distractors (custom, options, or settings) do not correspond to valid keys in Tailwind's config. Only the first option matches the expected structure, allowing for proper theming.

4. Dark Mode and Accessibility

   Why is it important to consider contrast ratios when defining dark mode color schemes for text and backgrounds?

   1. To reduce the file size of generated CSS
   2. To automatically sync colors with device settings
   3. To create more visually complex gradients
   4. To ensure sufficient legibility and meet accessibility guidelines

   Explanation: Contrast ratios are essential in dark mode to make sure text remains readable and accessible, ensuring compliance with accessibility standards. Creating gradients, syncing device settings, or reducing file size are not directly related to contrast ratio considerations. These other options address visual style, user preferences, or performance, not accessibility.

5. Switching Themes Dynamically

   Which method allows you to toggle between light and dark themes on a website when darkMode is set to 'class' in the configuration?

   1. Use only prefers-color-scheme media queries
   2. Add or remove a 'dark' class from the root HTML element
   3. Declare theme: 'dark' in the body's style attribute
   4. Set darkMode: true directly in each utility class

   Explanation: With darkMode set to 'class', toggling between themes is achieved by adding or removing the 'dark' class from a containing element, usually HTML or body. The second option is not a valid Tailwind utility. Using media queries works for 'media' mode, not 'class' mode. The fourth option does not have an effect in this context.