Teams usually add dark mode late, and it usually hurts. The reason is almost always the same: colour values were written directly into components instead of being named.
**Name your colours by role, not by value**
A component should ask for the surface colour or the muted text colour, never for a specific hex code. Once every component references a role, switching themes becomes a matter of redefining a handful of custom properties at the root.
**Dark mode is not simply inverted**
Pure black backgrounds with pure white text produce uncomfortable contrast and visible halation. Slightly lifted dark surfaces with softened text colours read far better. Shadows also stop working in the dark, so elevation has to come from subtle borders and background steps instead.
**Check contrast in both themes**
A brand colour that passes contrast requirements on white frequently fails on a dark surface. Each theme needs its own accessible variant of the accent colour, and both need to be verified rather than assumed.
**Respect the user preference, then remember the choice**
Read the system preference for the first visit, let the user override it, and persist that override. Apply the stored theme before first paint so nobody sees a flash of the wrong colours.
Dark mode is not an inverted stylesheet. Treating colour as tokens from the start makes supporting both themes almost free.
