Skip to content

## 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

pnpmbunnpmyarn
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.