Choose colors for light and dark mode
Use semantic color styles and check text, images and focus in both themes.
Soidesmax · 2 min read · Updated 2026-10-27
Separate editor appearance from site colors
The editor's light/dark control changes your working view. A website theme needs its own color styles and, when appropriate, a theme toggle. Changing the editor theme alone does not build a visitor-facing switch.
Use semantic styles
In Assets, find your shared color styles. Use roles such as Background, Surface, Text, Muted text, Border and Accent. Define a matching light and dark value instead of hard-coding white on every card. Keep light surfaces slightly separate from the page; use a subtle lighter surface in dark mode.
Check the difficult states
Inspect body text, secondary labels, links, buttons, hover and keyboard focus. A decorative glow should never be the only way to communicate a state. Keep HOT and NEW readable as text as well as color. Review transparent logos and PNGs against both backgrounds.
Verify before publishing
Preview the actual site theme at desktop and phone widths. Confirm that a selected theme does not make any text disappear. Keep screenshots in their original colors; do not invert an editor screenshot to match the article theme.