Users expect websites to respect their system dark mode preference. But building and maintaining two entirely separate palettes is expensive and error-prone. The practical approach is one core palette with mode-aware application: the same brand colors applied differently in each mode.
What Stays the Same
Your brand colors (primary, supporting, accents) stay the same across modes. Blue is still blue. Your brand identity should not change when the user toggles dark mode. What changes is how those colors are applied and which variants are used.
What Changes
Backgrounds: Light base becomes dark base and vice versa. Text: Dark base text becomes light base text. Surfaces: White cards become dark gray cards. Brand colors: May need lightness adjustment. A primary that has 5:1 contrast against white might only have 2:1 against a dark background. The dark mode variant needs to be lighter.
The Lightness Flip
The fundamental pattern: every lightness relationship inverts. What was light becomes dark. What was dark becomes light. But the inversion is not mechanical (you do not simply invert hex values). It requires careful adjustment because human perception of light-on-dark is different from dark-on-light.
Dark Mode Specific Issues
Text rendering is thinner on dark backgrounds (subpixel antialiasing differences). Colors appear more saturated on dark backgrounds (simultaneous contrast effect). Pure white text on pure dark creates halation. Address these by using slightly heavier font weights, reducing color saturation slightly, and using off-white rather than pure white for body text.
Building in PaletteRx
Build your palette for light mode first (this is the more common default). Then in Step 3, verify that your brand colors also pass contrast against your dark base. If a color fails on dark, note that you will need a lighter variant for dark mode. Export the base palette, then define the dark mode overrides in your CSS.