Skip to content
hono-email

Styling Helpers

View as Markdown

These components provide utilities for styling, dark mode, and conditional comments. They are imported from hono-email:

import { Font, ColorScheme, Conditional } from 'hono-email'

<Font>

Section titled “<Font>”

Renders @font-face and fallback font-family CSS inside <Head>. See Font.

<Head>
  <Font
    fontFamily="Inter"
    fallbackFontFamily={['Arial', 'sans-serif']}
    webFont={{ url: 'https://fonts.gstatic.com/s/inter/...', format: 'woff2' }}
  />
</Head>

<ColorScheme>

Section titled “<ColorScheme>”

Declares light and dark color scheme support inside <Head>.

<Head>
  <ColorScheme colorScheme="light dark" />
</Head>

colorScheme Optional

Section titled “colorScheme ”

Type: 'light' | 'dark' | 'light dark' · Default: 'light dark'

supportedColorSchemes Optional

Section titled “supportedColorSchemes ”

Type: 'light' | 'dark' | 'light dark' · Default: value of colorScheme

<Conditional>

Section titled “<Conditional>”

Renders Outlook conditional comment branches.

<Conditional mso>
  <Text>This appears only in Outlook for Windows.</Text>
</Conditional>

mso Optional

Section titled “mso ”

Type: boolean · Default: true

Wrap children in <!--[if mso]>...<![endif]-->.

notMso Optional

Section titled “notMso ”

Type: boolean

Wrap children in <!--[if !mso]><!--> ... <!--<![endif]-->.