Sign in to confirm you’re not a bot
This helps protect our community. Learn more

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

Syntax
392K subscribers
<__slot-el>
<__slot-el>
11K views 3 weeks ago #webdeveloper #syntax #css
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-t... 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-th... CSS Color Mix | https://developer.mozilla.org/en-US/b... CSS Relative Colors | https://developer.mozilla.org/en-US/d... 🔥 Be the ~14,700th person to join our super tasty newsletter https://bit.l …...more
...more
Modern CSS Theming | Light Mode / Dark Mode and More!
459Likes
11,142Views
Apr 82025
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-t... 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-th... CSS Color Mix | https://developer.mozilla.org/en-US/b... CSS Relative Colors | https://developer.mozilla.org/en-US/d... 🔥 Be the ~14,700th person to join our super tasty newsletter https://bit.ly/syntax_snackpack ------------------------------------------------------------------------------ Hit us up on Socials! Syntax: https://x.com/syntaxfm Scott: https://x.com/stolinski Wes: https://x.com/wesbos CJ: https://x.com/CodingGarden Randy:    / @randyrektor   http://www.syntax.fm Brought to you by Sentry.io #css #webdevelopment #webdeveloper #javascript #react #reactjs #syntax #syntaxfm #webdev

Follow along using the transcript.

Syntax

392K subscribers