Styling

Prose UI styles MDX content using CSS classes and variables defined in the prose-ui.css file.

To customize Prose UI styles, identify the CSS variable responsible for the style you want to modify. You can do this by inspecting the CSS in your browser or reviewing the variables defined in the prose-ui.css file.

Styling is organized around a design system, with its CSS variables (design tokens) grouped into three categories:

• Core variables
• Color variables for light and dark modes
• Component-specific variables

Core Variables

Core variables are reused in component-specific variables to ensure a consistent look and feel. For example, you can override the fonts to make Prose UI use Vercel's Geist font family:

:root {
  --p-font-family: var(--font-geist-sans);
  --p-font-family-heading: var(--font-geist-sans);
  --p-font-family-mono: var(--font-geist-mono);
}

Color Variables

Color variables are divided into light and dark mode categories. Here's how you can override colors for both modes:

:root {
  --p-color-accent-high: 0, 0%, 0%;
  --p-color-accent: 0, 0%, 10%;
  --p-color-accent-low: 0, 0%, 70%;
}
:root:is(.dark) {
  --p-color-accent-high: 180, 0%, 100%;
  --p-color-accent: 180, 0%, 90%;
  --p-color-accent-low: 180, 0%, 30%;
}

Prose UI uses HSL color values for its color variables.

Component Variables

Component variables are specific to individual components. For example, you can override the colors for the callout component as follows:

:root {
  --p-callout-color-text: hsl(var(--p-color-text-low));
  --p-callout-font-size: '1rem';
  --p-callout-font-weight: 400;
  --p-callout-font-height: '1.5rem';
}