Themes
Last updated
Was this helpful?
Last updated
Was this helpful?
Element Themes are based on standard . 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.
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
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.
The info file stores basic information about your theme, including the required Google Fonts.
The following settings are required for a complete Elements Theme that will be compatible with users’ projects.
Brand – Dominant colour used for branding and key items.
Accent – Complementary color used for secondary elements, and supporting details.
Surface – Background color that provides contrast behind text and elements.
Text – Primary color for headings and body text, ensuring readability and visual clarity.
Black – Pure black (will eventually be automatically defined by Elements).
White – Pure white (will eventually be automatically defined by Elements).
Screens are mananged by Elements, so do not need to be defined within the theme.
Body - The primary font used for main body text to ensure readability and consistency.
Code - Typically a monospaced font for displaying code snippets and technical content.
Heading - The designated font for headings, ensuring clear typographic hierarchy.
Quote - Usually a serif font, enhancing the distinctiveness of blockquotes and citations.
Must include the Default Tailwind Font Sizes.
Must include the Default Tailwind Spacing Scale.
Must include the Default Tailwind Spacing Scale, along with an aditional "Default" value for the theme.
Must include the Default Tailwind Border Width Scale, along with an aditional "Default" value for the theme.
Must include the Default Tailwind Border Radius Scale, along with an aditional "Default" value for the theme.
Must be setup with a default "article" typography style.
(440 × 280 pixels)
As well as all of the named , Element Themes must also specify these additional colours:
When defining Google Fonts within your theme, ensure they are included in the for consistency and proper loading.
