Multi-Mode UI Theme The Design Graph Template

Elevate Your UI, emphasize benefits like accessibility, scalability, and ease of customization

Use the template

This project is a Gatsby starter configured with Theme UI to showcase customizable color modes, reusable components, styled UI elements, and syntax highlighting. It includes a modular theme structure with reusable configurations for colors, typography, spacing, and more.

Features Overview

Discover the powerful features of our design system, crafted to empower designers and developers alike. From dynamic components to unified typography, our tools ensure scalability, consistency, and creative flexibility in your projects.

Multi-Mode Color Themes

Light, Dark, Purple, Pink, and Forest—pick the mode that suits your content’s personality. This starter lets you experiment with vibrant palettes or subtle hues. With just a few lines of configuration, create a look that resonates with your brand and audience.

Unified Typography & Design Tokens

Manage font families, sizes, weights, and line heights from a single source. Update the theme to instantly refresh your entire site’s typography. No more hunting down hardcoded font sizes— change it once, and it updates everywhere.

MDX Integration & Syntax Highlighting

Combine content and presentation elegantly with MDX. Write Markdown and JSX together, creating rich, interactive pages. Enjoy built-in syntax highlighting powered by Theme UI and easily swap out presets for a coding theme that best matches your brand.

Dynamic Components & Variants

Buttons, forms, cards, badges, and more are defined as variants within the theme. Need a new button style or a unique card layout? Add it to the theme variants, and use it across your site with minimal effort. Consistency and scalability have never been easier.

Highlighted Section

This section uses the "highlight" variant with custom background and text colors.

Dynamic Headings out of box

Scenario 1: Using Global Styles Custom styles object configured for headings and other elements

Theme Variant Heading

Hero Heading

Custom Heading

H1 Heading - Responsive

H2 Heading - Responsive

H3 Heading - Responsive

H4 Heading - Responsive

H5 Heading - Responsive

H6 Heading - Responsive


const Heading = ({
  as: Tag = "h2", // Dynamic HTML tag (e.g., h1, h2)
  variant = "heading", // Default variant from theme.text
  align = "left", // Default alignment
  useGlobal = false, // Switch between text variants and global styles
  children,
  sx = {}, // Custom inline styles
  ...props
}) => (
  <Tag
    sx={{
      // Use global styles when useGlobal is true, else apply text variants
      variant: useGlobal ? `styles.${Tag}` : `text.${variant}`,
      textAlign: align, // Alignment: left, center, right
      ...sx, // Inline custom styles
    }}
    {...props}
  >
    {children}
  </Tag>
)

Key Mappings

Dynamic Variant Mapping Heading Components

Scenario 2: Using Custom Typography Variants Dynamic Variant Mapping

Dynamic headings
Custom typography variants
Responsive styles

Reusable Components

Simplify Your Layout

Reusable components like this make it easy to maintain consistency across your project while adding flexibility.

Dynamic headings
Custom typography variants
Responsive styles

This is a default paragraph with the "paragraph" variant styles.

This is a small, italic paragraph styled using the "small" variant.

This paragraph overrides the default styling with custom styles.

"This is a blockquote styled as a paragraph."

Highlight Section

This section uses the highlight variant for a unique look.

Muted Section

This section uses the muted variant but overrides the background and text colors.

Welcome to the Multi-Mode Theme

Toggle through various modes to explore Theme UI's flexibility.

Resize your browser to see the color change!

Theme UI Showcase

Section Variants

Default Section

Highlight Section

Muted Section

Primary Section

Spacer Variants

Text Variants

Heading VariantDisplay VariantCAPS VariantParagraph VariantBlock Variant (Justified text with margins)Small Variant (Italic and Muted)Callout Variant (Bold and Primary Color)

This is a body text example styled with fontFamily and lineHeight from the theme.

Bold text example

Buttons

Forms

Colors

Primary

Secondary

Muted

Highlight

Accent

Tables

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4

Component Variants Showcase

Buttons

Cards

This is a primary card with default styling.

This is an accent card with a secondary background.

Text

This text is uppercase with letter spacing.

This text uses the heading variant.

Boxes

This box stands out with bold text.

Badges

Primary BadgeAccent Badge

Grid Pattern