Modern CSS Theming | Light Mode / Dark Mode and More!

In this video CJ shows some modern CSS features you can use to create a dark / light theme. He shows how to create a CSS only theme switcher and also shows how to save a users theme preference to localStorage.

View the code here: https://github.com/w3cj/react-theme-toggle

00:00 intro
00:27 color-scheme
01:57 picture source media
03:22 light-dark
05:07 css only theme switcher
08:32 save user theme preference to localStorage
12:13 set picture source with selected theme
14:55 matchMedia prefers-color-scheme
19:08 next-themes package
19:44 set the data-theme attribute on page load
22:54 avoid prefers-color-scheme dark
24:39 syntax 891
24:56 color-mix color palettes
26:15 relative colors
27:49 thanks!

Next Themes | https://www.npmjs.com/package/next-themes CSS Color Mix | https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/ CSS Relative Colors | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

🔥 Be the ~14,700th person to join our super tasty newsletter https://bit.ly/syntax_snackpack