891: Light and Dark Mode

This episode explores the implementation of light and dark modes in web applications, focusing on techniques and best practices for 2025. Against the backdrop of increasing browser support for relevant features, the hosts discuss building light and dark mode functionality from scratch, emphasizing the use of CSS variables for color palettes and the `light-dark` function for streamlined switching. More significantly, they delve into methods for adapting existing websites lacking dark mode, suggesting refactoring CSS with AI assistance to replace hex codes with variables. The discussion pivots to address challenges like color contrast, highlighting the limitations of the `contrast` function and offering workarounds using `ColorMix` and `relative-color`. For instance, they address the need for manual adjustments to ensure accessibility, especially with icons and images, recommending the use of `<picture>` elements and SVGs for flexible image handling. In conclusion, the episode underscores the importance of testing for accessibility using tools like Polypane and emphasizes the evolving landscape of CSS features for creating robust and user-friendly light and dark mode experiences.