CSS + Cookies: A Perfectionist's Approach to Theming
summary
Uses CSS variables and :root for light/dark theming with server-rendered Next.js pages, and pairs that with a cookie-based override so the server can send HTML that matches user preference and avoids the initial dark-mode flash. Shows a useTheme hook, a small middleware to persist preference to a database, per-page class overrides, and an open-source demo (ndafi) that still works when JavaScript is turned off.
AI-written summary · about
chapters (12)
- 0:00Intro
- 0:53Why dark mode?
- 1:24I mean.. it's just dark mode, right?
- 1:58Dark mode in plain CSS
- 3:16More Requirements
- 3:42Dark mode in CSS in JS (styled-components)
- 5:15Things are a little different on the server
- 6:22CSS + Cookies
- 9:45Persisting user's preference
- 10:37Demo
- 11:08Is there a better way?
- 11:52And what about SSG?
related talks
31mThe Lonely and Dark Road to Styling in React
30mDynamic Styling Systems with React
30mJust another ECMAScript Trait Syntax ProposalStop breaking the web and start building server-rendered web apps using next.js
29mThe Lonely and Dark Road to Styling in React
20mThe Dark Side of the Web
39m4½ Methods for Theming in (S)CSS
22mPractical Refactors With Modern CSS Colors
21mStyling your CSS with Reason