Appearance

ColorScheme ​

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

TIP

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

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

Add the component to your email template.

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

const Email = () => {
  return (
    <Html>
      <Head>
        <ColorScheme mode="light only" />
      </Head>
      <Body></Body>
    </Html>
  );
};
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
<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>
<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 ​

ts
export interface ColorSchemeProps {
  mode?: Mode;
}
export interface ColorSchemeProps {
  mode?: Mode;
}

Individual Props ​

ts
mode?: ColorSchemeMode;
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.