OG Image Dark Mode: Should You Use Light or Dark Backgrounds for Social Cards?

The core problem: one image, many UIs

Your og:image is a single static PNG or JPG. There is no prefers-color-scheme for OG images — no way to serve one image for dark mode and another for light mode. The same image appears in link previews across Twitter/X, LinkedIn, Discord, Slack, iMessage, and dozens of other platforms — each with its own UI theme.

Choosing the right background for your OG image means deciding which platforms matter most to your audience, then designing for those contexts.

Platform-by-platform breakdown

Twitter / X (dark UI by default)

Twitter/X defaults to a dark theme for most users, with a card background of approximately #15202b (dark blue-gray) or #000000 in the Lights Out theme. A pure white OG image background will have a sharp border against the dark card container — which can look jarring. However, both light and dark images render correctly.

• Dark background (#000, #111, #1a1a2e): Blends into the Twitter card UI, feels native
• Light background (#fff, #f8f8f8): Creates a visible card border, still works fine
• Recommendation: Dark or brand-colored backgrounds look more polished on Twitter/X

LinkedIn (light UI)

LinkedIn uses a predominantly light UI with a white/light gray card container. Dark OG images with white text look great here because the card border creates clear separation from the white background. Light images can wash out on LinkedIn's white feed.

• Dark background: Creates strong visual contrast against LinkedIn's white feed
• Light background: Can blend in and lose visual presence in the feed
• Recommendation: Dark or high-contrast images perform better on LinkedIn

Discord (dark UI)

Discord is almost exclusively dark — users almost never switch to light mode. The embed background is #2b2d31 (Discord's "Charcoal" color). OG images are shown in an embed card with a 4px colored left border. Both light and dark images work, but dark images blend more naturally.

• Dark background: Integrates naturally with Discord's dark UI
• Light background: Stands out clearly as a content card — fine for product images
• Recommendation: Either works; dark is more consistent with Discord aesthetics

Slack (light UI by default)

Slack's default theme is light, though many users switch to dark. Link unfurls appear in message threads with a light card background. OG images in Slack show at a smaller size (typically 360×180 px display, scaled from 1200×630). High-contrast images with bold text read better at small sizes.

• Dark background: Works in both light and dark Slack themes
• Light background: Can blend into Slack's default light card
• Recommendation: Use a colored border or brand color accent to ensure visibility

iMessage / Apple platforms

iMessage respects the user's iOS dark/light mode. The link preview card adapts its background, but the OG image itself is always displayed as-is. White images look fine in light mode; dark images look fine in dark mode. For iOS, a neutral brand image (avoiding pure white or pure black) works best.

WhatsApp

WhatsApp shows OG images at small sizes (approximately 300×160 px display). High-contrast text on a solid background reads best. WhatsApp has both light and dark themes — neutral backgrounds with high contrast text perform best across both.

Design recommendations by use case

Developer tools and SaaS products

Developer audiences skew heavily toward dark mode and primarily share on Discord, Twitter, and Slack. Use a dark background with light text and a brand accent color. This is why most developer-focused products (Vercel, Linear, Planetscale) use dark OG images.

// Dark background OG image template (Satori/JSX)
const template = (
  <div style={{
    background: '#0a0a0a',   // Near-black
    color: '#ffffff',
    width: 1200, height: 630,
    display: 'flex',
    flexDirection: 'column',
    padding: '64px',
    justifyContent: 'flex-end',
    fontFamily: 'Inter',
  }}>
    <p style={{ color: '#a855f7', fontSize: 18, margin: '0 0 12px' }}>
      YOUR BRAND
    </p>
    <h1 style={{ fontSize: 52, margin: 0, lineHeight: 1.2 }}>
      {title}
    </h1>
  </div>
);

eCommerce and consumer products

Consumer audiences are mixed across platforms. LinkedIn and Facebook skew light. Instagram and Pinterest expect high-quality photography. Use a white or very light gray background for product photos — this matches professional product photography conventions and renders cleanly across platforms.

// Light/product background OG image
const template = (
  <div style={{
    background: '#ffffff',
    color: '#111111',
    width: 1200, height: 630,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '48px',
  }}>
    <img src={productImageUrl} style={{ maxWidth: 600, maxHeight: 500, objectFit: 'contain' }} />
    <div style={{ display: 'flex', flexDirection: 'column', marginLeft: 48 }}>
      <h1 style={{ fontSize: 40, margin: 0 }}>{productName}</h1>
      <p style={{ fontSize: 32, color: '#16a34a', margin: '16px 0 0' }}>${price}</p>
    </div>
  </div>
);

News and editorial content

News publishers typically use a branded gradient or solid color background with the article headline overlaid. High contrast is essential — use white text on dark, or very dark text on light. Avoid mid-tones where text contrast degrades.

The universal safe choice

If you need one OG image design that renders well on all platforms, use:

• A dark background (not pure black — use #111 or #1a1a1a for more depth)
• White or near-white headline text for maximum readability
• A brand accent color for category labels or decorative elements
• No white border/frame — pure white edges can disappear in light UIs
• A subtle gradient can add visual interest without hurting readability

This design works because: dark backgrounds create contrast against both light and dark platform UIs, white text is legible at all scales, and the absence of a pure-white border prevents the "invisible frame" effect on light-background platforms.

Testing before you ship

Before finalizing your OG image design, preview it across all major platforms. The most common issues are:

• Text too small at Slack/WhatsApp thumbnail size (display ~300px wide)
• Important content too close to edges (platforms apply rounded corners or shadows)
• White image with white platform background making the card invisible
• Low contrast text that's illegible on mobile screens

Related Guides

• OG Image Size Guide
• OG Image Templates
• Satori: Generate Dynamic OG Images with JSX and CSS
• Dynamic OG Images: Complete Guide