How Do You Change Colors Between Light Mode and Dark Mode? | Color Scheme Design Basics

A website may look clear in light mode but become harder to use if only its background is darkened. Light mode uses predominantly bright surfaces, while dark mode uses predominantly dark ones. Supporting both requires more than reversing colors: backgrounds, text, and interactive controls need to keep the same roles in each theme while their actual combinations change.

Keep color roles consistent and design each mode as a complete palette

First, identify the roles of page background, card surface, body text, supporting text, primary button, and input boundaries. For example, if a button represents the main enrollment action in light mode, it should remain the primary action in dark mode. Its color can change without altering what the control means or where users find it.

Dark mode does not have to use pure black backgrounds and pure white text. A very dark blue-gray can work with softer off-white letters, and a brand color that disappears against a dark surface may need a lighter variation. Conversely, automatically converting every pale surface from light mode into a dark-mode text or button color can change the interface hierarchy unintentionally.

Judge adjacent colors together rather than evaluating one swatch in isolation. Text needs sufficient contrast with the surface immediately behind it. Button labels need contrast against their fills, while the buttons also need to be recognizable against nearby cards. Because the impact of a color also depends on area and photography, compare both modes using the same page layout.

Compare light and dark palettes for an enrollment page

Consider a fictional online-course enrollment page. HEX codes are hexadecimal ways to specify colors. In light mode, use pale blue-gray ■#F6F8FA for the page, white ■#FFFFFF for the enrollment card, and dark blue-gray ■#263445 for headings and body copy. The text has a contrast ratio of about 11.89:1 against the page background and 12.65:1 against the white card.

Supporting text in light mode can use gray ■#526476 on white ■#FFFFFF, giving about 6.10:1. For the ‘Enroll’ button, use deep blue ■#1C5D82 with white ■#FFFFFF lettering, a contrast ratio of about 7.15:1. Because the white card and pale page surface are similar, also use spacing and headings to distinguish areas instead of depending on their background-color difference alone.

In dark mode, change the page background to dark blue-gray ■#151E29 and the card to a slightly lighter ■#233141. Use soft white ■#F1F5F7 for the heading and body text. The calculated text contrast is about 15.32:1 against the page background and 12.06:1 on the card. The two surfaces still form a hierarchy, rather than merely swapping black and white.

Use light gray ■#CBD6DE supporting text on the dark card ■#233141, giving about 8.96:1 contrast. Make the primary button light blue ■#83C9EB with dark blue-gray ■#132535 lettering for about 8.57:1 text contrast. The bright button surface also contrasts about 7.26:1 with the dark card ■#233141.

If you kept the light-mode button fill ■#1C5D82 unchanged on the dark card ■#233141, the two surfaces would contrast by only about 1.85:1. Even making the label white would not necessarily make the button itself easy to locate against its surroundings. Give the main action a considered dark-mode color.

Test switching behavior and every interaction state

CSS (Cascading Style Sheets, the rules used to control a web page’s appearance) makes theme changes easier to manage when colors are organized by their roles, such as ‘page background’ or ‘text.’ To respond to the user’s device or browser preference, @media (prefers-color-scheme: dark) can apply the dark values. The color-scheme property tells the browser which schemes an element supports for built-in interface parts such as form controls; it does not automatically redesign all custom content.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, an accessibility conformance level, requires at least 4.5:1 contrast for ordinary text and 3:1 for qualifying large text. Boundaries and state indicators necessary to identify or operate controls may also need at least 3:1 against adjacent colors. The ratios above are calculated for the specified opaque pairs; they are not a guarantee of conformance for the entire page.

Review input borders, errors, selected navigation, links, and keyboard focus indicators in both modes. Use labels, outlines, or underlining so that color is not the only way to convey a state. Check whether pale areas in logos or photographs lose their boundaries after the background changes. If a manual theme switch is provided, consider allowing the user’s explicit choice to take precedence over automatic device preferences.

HueRoll allows you to enter HEX codes, inspect lighter and darker variations or palette suggestions, and compare the selected color against white or black. It does not automatically calculate contrast between arbitrary colors or judge Level AA compliance. Verify the actual adjacent pairs separately in each mode, and check that the enrollment path remains clear on mobile screens as well.