ColorScheme

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

Install

Install the component from your command line

pnpm add jsx-email

bun add jsx-email

npm add jsx-email

yarn add jsx-email

Usage

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

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

Props

TypeScript Interface

export interface ColorSchemeProps {
  mode?: Mode;
}

Optional Props

mode

mode?: ColorSchemeMode;

Selects the color scheme mode. Defaults to 'normal'.

Available modes:

'dark' - Dark mode
'dark only' - Forces dark mode only
'light' - Light mode
'light dark' - Adapts to user preference
'light dark only' - Forces adaptation to user preference
'light only' - Forces light mode only
'normal' - Uses page defaults or no specific scheme