How to Use One Palette for Light and Dark Pages

Reversing dark text and a light background preserves their contrast ratio. It does not settle the rest of a dark theme. With Monochrome Newsroom, we will define the two reading pairs and check what happens to a gray caption.

Keep the app theme separate

The app’s light or dark setting changes the workbench around your palette. It leaves the saved colors untouched, so you can design a light article while working in a dark interface. Assign the product’s theme roles in its own stylesheet.

Set the main reading pairs

For the light page, use #171717 text on #FFFFFF. Reverse those values for the dark page. Both pairs have 17.93:1 contrast, but keep separate rows in your notes because the text and background roles have changed.

Preview a paragraph and a heading at the intended width. Check the font, line spacing and nearby panels in both themes. The ratio cannot tell you whether a long paragraph feels crowded.

Check captions on both backgrounds

Do not carry the same gray caption into both layouts without checking it. The palette’s #595959 has a different ratio on white than on #171717. The word secondary says what the text does, not which color it needs.

The last row assigns the existing #D8D8D8 swatch to the dark-page caption. Check links and button labels in the same way, particularly if their fills stay unchanged between themes.

Assign theme roles in CSS

:root {
  --color-1: #171717;
  --color-2: #FFFFFF;
  --color-3: #595959;
  --color-4: #D8D8D8;
  --page-surface: var(--color-2);
  --body-text: var(--color-1);
  --secondary-text: var(--color-3);
}
[data-product-theme="dark"] {
  --page-surface: var(--color-1);
  --body-text: var(--color-2);
  --secondary-text: var(--color-4);
}

The palette export supplies the four numbered variables. Keep the semantic assignments above in the consuming project. You can then distinguish a changed color value from a change to the role that uses it.

Review both layouts

• Read a paragraph and a heading in both themes at their final sizes.
• Check every text color against the actual panel behind it, including nested cards.
• Review selected, disabled, hover and focus treatments independently.
• Save the role record with the same revision as the exported palette.

Confirm that the four exported hex values stay the same after switching the app theme. If the product needs genuinely different color sets, save them as separate palettes with recognizable names.