**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Custom Properties (CSS Variables) and Calc() **Topic:** Theming with custom properties: dark mode, light mode, and beyond. Theming is an essential aspect of web development, as it enables us to create visually appealing and consistent designs across our applications. With the introduction of custom properties in CSS, we can now create flexible and reusable themes that can be applied to different components and layouts. In this topic, we will explore how to use custom properties to create multiple themes, including dark mode and light mode, and discuss best practices for implementing theming in our web applications. **Understanding the basics of theming with custom properties** Custom properties, also known as CSS variables, allow us to define reusable values that can be used throughout our CSS code. We can use custom properties to define theme-related values such as colors, typography, and spacing, making it easy to switch between different themes. To define a custom property, we use the `--variable-name` syntax, followed by the value we want to assign to it. For example: ```css :root { --primary-color: #3498db; --secondary-color: #f1c40f; --background-color: #f9f9f9; } ``` We can then use these custom properties in our CSS code by referencing them using the `var()` function. For example: ```css .button { background-color: var(--primary-color); color: var(--secondary-color); } ``` **Creating multiple themes with custom properties** To create multiple themes, we can define separate sets of custom properties for each theme and then use media queries or JavaScript to switch between them. For example, let's create a dark mode theme by defining a new set of custom properties: ```css :root { --primary-color: #3498db; --secondary-color: #f1c40f; --background-color: #f9f9f9; } .dark-mode { --primary-color: #2c3e50; --secondary-color: #ecf0f1; --background-color: #2c3e50; } ``` We can then use a media query to apply the dark mode theme when the user toggles the dark mode switch: ```css @media (prefers-color-scheme: dark) { :root { --primary-color: var(--dark-mode-primary-color); --secondary-color: var(--dark-mode-secondary-color); --background-color: var(--dark-mode-background-color); } } ``` **Implementing a theme switcher** To implement a theme switcher, we can use JavaScript to toggle the `dark-mode` class on the HTML element. We can also use a library like `localStorage` to persist the user's theme preference. For example: ```javascript const themeSwitcher = document.querySelector('.theme-switcher'); const htmlElement = document.querySelector('html'); themeSwitcher.addEventListener('click', () => { htmlElement.classList.toggle('dark-mode'); localStorage.setItem('theme', htmlElement.classList.contains('dark-mode') ? 'dark' : 'light'); }); ``` **Best practices for implementing theming with custom properties** 1. **Use a consistent naming convention**: Use a consistent naming convention for your custom properties to make it easy to identify and reuse them. 2. **Define themes as separate sets of custom properties**: Define each theme as a separate set of custom properties to make it easy to switch between them. 3. **Use media queries or JavaScript to switch between themes**: Use media queries or JavaScript to switch between themes, depending on the user's preference or the device's capabilities. 4. **Test your themes**: Test your themes thoroughly to ensure that they are applied correctly and consistently throughout your application. By following these best practices and using custom properties to create multiple themes, we can create flexible and reusable designs that can be applied to different components and layouts. **Conclusion** In this topic, we explored how to use custom properties to create multiple themes, including dark mode and light mode. We discussed best practices for implementing theming with custom properties and demonstrated how to use media queries and JavaScript to switch between different themes. By applying these techniques, we can create visually appealing and consistent designs that can be easily applied to different components and layouts. **What's next?** In the next topic, we will introduce CSS preprocessors and discuss why they are useful. **Leave a comment or ask for help** If you have any questions or need help with implementing theming with custom properties, please leave a comment below. **External resources** * [CSS Custom Properties (MDN Web Docs)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) * [Theming with Custom Properties (CSS-Tricks)](https://css-tricks.com/theming-with-custom-properties/) **Questions to consider** 1. How can you define multiple themes using custom properties? 2. How can you switch between different themes using media queries or JavaScript? 3. What are some best practices for implementing theming with custom properties?