Theme Specification

The theme object is made up of the following data types:

• Scales: plain objects or arrays of values for related CSS properties
• Styles: global styles that are injected via the GlobalStyles component.
• Variants: composable variants for your components.
• Icons: The svg icon library used by the Icon component.

You can read more about the Theme UI theme specification here.

Example theme#

theme.js
export default {
  breakpoints: ["640px", "768px", "1024px", "1280px"],
  colors: {
    text: "#111",
    background: "#fff",
    primary: "#06f",
    modes: {
      dark: {
        text: "#ededee",
        background: "#1a202c",
        primary: "#fb3640",
      },
    },
  },
  fonts: {
    body: "system-ui, sans-serif",
    heading: "system-ui, sans-serif",
    monospace: "Menlo, monospace",
  },
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  // Global styles.
  styles: {
    global: {
      "*": {
        m: 0,
        p: 0,
      },
    },
  },
  // Variants
  // <p variant="text.lead" />
  text: {
    color: "text",
    fontFamily: "body",
    lead: {
      fontSize: "2xl",
      lineHeight: "normal",
      fontWeight: "normal",
    },
  },
  // Icons.
  // <Icon name="arrow-right" />
  icons: {
    "arrow-right": `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" ...></path></svg>`,
  },
}
 
Copy