Theme


A theme defines basic style invariants that apply to all components and all non-components. If you want to introduce Warhol to an existing project, a theme is the perfect place to start, but you don't have to define a theme if you don't need one. You can define a color palette and typography rules that all elements in your page must follow. You can also configure icons, which at the moment only whitelists icon fonts from typography checks.

Example configuration #

Full example:

{
  "patternLibUrl": "https://warhol.io/patterns",
  "breakpoints": [800, 1000],
  "theme": {
    "themeUrl": "https://warhol.io/patterns/theme",
    "colors": {
      "colorsUrl": "https://warhol.io/patterns/theme/colors",
      "sources": ".color-swatch",
      "properties": [ "background-color" ]
    },
    "typography": {
      "typographyUrl": "https://warhol.io/patterns/theme/typography",
      "sources": ".typography",
      "properties": [ "font-family", "font-size", "font-weight", "font-style" ]
    },
    "icons": {
      "iconsUrl": "https://warhol.io/patterns/theme/icons",
      "sources": ".icon",
      "type": "font"
    }
  }
}

Minimal example:

{
  "patternLibUrl": "https://warhol.io/patterns",
  "breakpoints": [800, 1000],
  "theme": {
    "colors": {
      "sources": ".color-swatch"
    },
    "typography": {
      "sources": ".typography"
    },
    "icons": {
      "sources": ".icons > *"
    }
  }
}

All parts of the theme configuration are optional. If for example you do not configure theme.typography, Warhol will simply not perform typography checks on non-components. If you have a "kitchen sink" page for your theme, you can provide the page's URL in theme.themeUrl and skip configuring individual URLs for colors, typography and icons. If you provide neither individual URLs nor theme.themeUrl, Warhol will use the pattern lib main URL.

See the documentation on colors ,typography rules and icons for more information on the intricacies of theme configuration.

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.