Themes

Element Themes are based on standard Tailwind config files. They can be built using the Theme Studio in Elements.

Themes are a set of pre-configured values based on the available settings inside of the Theme Studio. The gif below shows how a site can look radically different depending on the theme chosen.

Changing Themes in Elements Beta (October 2024)

Theme Structure

A theme contains three files, they should be stored in a folder using a reverse domain name. They can be distributed in the same pack alongisde components.

• youraddon.elementsdevpack

  • themes

    • com.yourdomain.themes.exampletheme

      • icon.png (440 × 280 pixels)

      • info.json

      • theme.json

Example layout for an Elements Dev Pack

Icon

The icon for your theme should be a PNG, and sized at 440x280px. Ideally it will use the font and colour from the theme to give the user as idea of what to expect.

Included Themes in the beta version of Elements (October 2024)

Info. json file

The info file store basic information about your theme.

{
  "author": "Your Awesome Company Name",
  "title": "Example Theme",
  "subTitle": "clean, bold, and classy.",
  "tags": [
    "clean",
    "bold",
    "classy"
  ],
  "helpURL": "https://forums.realmacsoftware.com/",
  "infoURL": "https://www.realmacsoftware.com/",
  "googleFontNames": [
    "Playfair Display"
  ]
}

A screenshot of the Tailwind Theme Studio in Elements for macOS.