MDX Blocks

  • Home
  • GitHub
  • Get Started
  • Getting Started
  • Layouts
  • BlocksProvider
  • Themes
  • Creating Themes
  • Creating Layouts
  • Primitives
  • API

Creating Themes

To completely customize the look and feel of MDX Blocks, you can create custom themes that define colors, typographic styles, base components, and more. See the themes module for examples to get started.

Theme Object

The theme object follows Styled System's Theme Specification. All scale objects within the theme can be extended to include additional values.

// theme shape
theme: {
  colors: {
    text,
    background,
    primary,
    secondary,
    highlight,
    muted,
  },
  space: [],
  fonts: {
    body,
    heading,
    monospace,
  },
  fontSizes: [],
  fontWeights: {
    body,
    bold,
    heading,
  },
  lineHeights: {
    body,
    heading,
  },
  maxWidths: {
    container,
  }
}

Styles Object

The styles object corresponds to MDX components and supports some Styled System props. See the themes docs for more info.

The styles object consists of the following keys:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p
  • img
  • a
  • ul
  • ol
  • li
  • blockquote
  • pre
  • code
  • inlineCode
  • hr

Each CSS style object can be a mix of standard CSS syntax and the following Styled System props, which pick up values from the theme and can accept array values for mobile-first responsive styles:

  • fontFamily
  • fontSize
  • fontWeight
  • lineHeight
  • color
  • bg
  • m
  • mt
  • mr
  • mb
  • ml
  • mx
  • my
  • p
  • pt
  • pr
  • pb
  • pl
  • px
  • py
  • MDX Blocks
  • Docs
  • GitHub