ColorScheme

A JSX email component which provides meta and style foundations for color scheme support

Tips

Please be sure to read our FAQ about Dark Mode in the context of email templates: https://jsx.email/docs/faq#dark-and-light-mode

pnpm

aube

bun

npm

yarn

pnpm add jsx-email

Usage

Add the component to your email template.

import { Body, ColorScheme, Head, Html } from 'jsx-email';

const Email = () => {
  return (
    <Html>
      <Head>
        <ColorScheme mode="light only" />
      </Head>
      <Body></Body>
    </Html>
  );
};

Which will produce the following HTML:

<html>
  <head>
    <meta name="color-scheme" content="light only" />
    <meta name="supported-color-schemes" content="light only" />
    <style>
      :root {
        color-scheme: light only;
        supported-color-schemes: light only;
      }
    </style>
  </head>
  <body></body>
</html>

Component Props

export interface ColorSchemeProps {
  mode?: Mode;
}

Individual Props

mode?: ColorSchemeMode;

Default: 'normal'

Selects the color scheme mode that informs the email client which mode to render.

Supported Values:

'dark'
'dark only' The email client will only ever render the content in the dark color scheme and forbids the email client from overriding the color scheme.
'light'
'light dark' The email client will choose the light or dark theme to match the user’s preference. If the user’s preference does not match something in the list, the email client will choose which mode to display.
'light dark only' The email client will choose the first of the listed schemes that it supports taking user preference into account and forbids the email client from overriding the color scheme.
'light only' The email client will only ever render the content in the light color scheme and forbids the email client from overriding the color scheme.
'normal' Indicates that the email supports the page’s supported color schemes, if they are set, or that it supports no color schemes at all otherwise.