How to add dark mode in a Next.js site | Sreetam Das

The Perfect Dark ModeTable of Contents The ProblemThe SolutionStoring (and retrieving) user preferenceSystem-wide preferenceBack to BasicsNext.js' DocumentDangerously set whaa?IIFEsCSS Variables There's more! Recap The Problem So what's the big deal? What really is the perfect dark mode? If you take a look at a website which has support for dark mode like mdxjs.com, you'll notice something if you

[sh19e]

Next.js のダークモード実装例。ロード時のチラツキ防止や `matchMedia` によるOS設定の取得、localStorage で状態を永続化、CSS Variables で色を管理・切り替えする方法など。