Themes

Element Themes are based on standard Tailwind config files. They can be built by hand or inside of 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.

Theme Structure

A theme contains three files, they should be stored in a folder using a reverse domain name. They can be distributed inside of .elementspacks alongisde components.

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.

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"
  ],
  "build": "100",
  "version": "1.0.0",
  "deprecated": false,
  "helpURL": "https://forums.realmacsoftware.com/",
  "infoURL": "https://www.realmacsoftware.com/",
  "googleFontNames": [
    "Playfair Display"
  ]
}

theme.json

The Theme json files are based on standard Tailwind config files. They can be built by hand or inside of the Theme Studio in Elements. All values from the Theme Studio can be set inside of a theme.

The following is an example of a theme.json file. Please note; not all theme values are defined in the theme sample below.

{
    "theme": {
        "screens": {
            
        },
        "extend": {
            "fontSize": {
                "6xl": [
                    "3.75rem",
                    {
                        "lineHeight": "4.50rem",
                        "letterSpacing": "-0.01rem",
                        "fontWeight": "400"
                    }
                ],
                "2xl": [
                    "1.50rem",
                    {
                        "lineHeight": "2.00rem",
                        "letterSpacing": "-0.01rem",
                        "fontWeight": "400"
                    }
                ],
                "base": [
                    "1.00rem",
                    {
                        "fontWeight": "400",
                        "lineHeight": "1.50rem",
                        "letterSpacing": "-0.01rem"
                    }
                ],
                "9xl": [
                    "8.00rem",
                    {
                        "fontWeight": "400",
                        "letterSpacing": "-0.01rem",
                        "lineHeight": "8.50rem"
                    }
                ],
                "8xl": [
                    "6.00rem",
                    {
                        "fontWeight": "400",
                        "lineHeight": "6.50rem",
                        "letterSpacing": "-0.01rem"
                    }
                ],
                "3xl": [
                    "1.88rem",
                    {
                        "letterSpacing": "-0.01rem",
                        "lineHeight": "2.25rem",
                        "fontWeight": "400"
                    }
                ],
                "7xl": [
                    "4.50rem",
                    {
                        "fontWeight": "400",
                        "lineHeight": "5.50rem",
                        "letterSpacing": "-0.01rem"
                    }
                ],
                "sm": [
                    "0.88rem",
                    {
                        "fontWeight": "400",
                        "lineHeight": "1.25rem",
                        "letterSpacing": "-0.01rem"
                    }
                ],
                "lg": [
                    "1.12rem",
                    {
                        "fontWeight": "400",
                        "lineHeight": "1.75rem",
                        "letterSpacing": "-0.01rem"
                    }
                ],
                "xl": [
                    "1.25rem",
                    {
                        "lineHeight": "1.75rem",
                        "letterSpacing": "-0.01rem",
                        "fontWeight": "400"
                    }
                ],
                "4xl": [
                    "2.25rem",
                    {
                        "fontWeight": "400",
                        "lineHeight": "2.50rem",
                        "letterSpacing": "-0.01rem"
                    }
                ],
                "5xl": [
                    "3.00rem",
                    {
                        "lineHeight": "3.50rem",
                        "fontWeight": "400",
                        "letterSpacing": "-0.01rem"
                    }
                ],
                "xs": [
                    "0.75rem",
                    {
                        "lineHeight": "1.00rem",
                        "fontWeight": "400",
                        "letterSpacing": "-0.01rem"
                    }
                ]
            },
            "borderRadius": {
                "DEFAULT": "0px"
              },
              "borderWidth": {
                "DEFAULT": "2px"
                },
            "spacing": {
                "0": "0px",
                "48": "192px",
                "11": "44px",
                "6": "24px",
                "2": "8px",
                "36": "144px",
                "72": "288px",
                "32": "128px",
                "64": "256px",
                "14": "56px",
                "28": "112px",
                "3": "12px",
                "10": "40px",
                "20": "80px",
                "44": "176px",
                "12": "48px",
                "7": "28px",
                "px": "1px",
                "16": "64px",
                "52": "208px",
                "40": "160px",
                "96": "384px",
                "4": "16px",
                "2.5": "10px",
                "1": "4px",
                "5": "20px",
                "80": "320px",
                "9": "36px",
                "1.5": "6px",
                "0.5": "2px",
                "3.5": "14px",
                "56": "224px",
                "8": "32px",
                "60": "240px",
                "24": "96px"
            }
        },
        "colors": {
            "gray": {
                "400": "#9ca3af",
                "900": "#111827",
                "500": "#6b7280",
                "200": "#e5e7eb",
                "700": "#374151",
                "800": "#1f2937",
                "600": "#4b5563",
                "100": "#f3f4f6",
                "300": "#d1d5db",
                "50": "#f9fafb",
                "DEFAULT": "#6b7280"
            },
            "sky": {
                "800": "#075985",
                "200": "#bae6fd",
                "900": "#0c4a6e",
                "DEFAULT": "#0ea5e9",
                "300": "#7dd3fc",
                "100": "#e0f2fe",
                "500": "#0ea5e9",
                "700": "#0369a1",
                "50": "#f0f9ff",
                "600": "#0284c7",
                "400": "#38bdf8"
            },
            "purple": {
                "700": "#7e22ce",
                "100": "#f3e8ff",
                "300": "#d8b4fe",
                "800": "#6b21a8",
                "400": "#c084fc",
                "900": "#581c87",
                "50": "#faf5ff",
                "500": "#a855f7",
                "200": "#e9d5ff",
                "600": "#9333ea",
                "DEFAULT": "#a855f7"
            },
            "pink": {
                "DEFAULT": "#ec4899",
                "300": "#f9a8d4",
                "600": "#db2777",
                "200": "#fbcfe8",
                "700": "#be185d",
                "800": "#9d174d",
                "500": "#ec4899",
                "400": "#f472b6",
                "50": "#fdf2f8",
                "900": "#831843",
                "100": "#fce7f3"
            },
            "indigo": {
                "900": "#312e81",
                "500": "#6366f1",
                "700": "#4338ca",
                "50": "#eef2ff",
                "400": "#818cf8",
                "300": "#a5b4fc",
                "800": "#3730a3",
                "200": "#c7d2fe",
                "600": "#4f46e5",
                "DEFAULT": "#6366f1",
                "100": "#e0e7ff"
            },
            "black": {
                "800": "#000000",
                "200": "#6c6c6c",
                "DEFAULT": "#000000",
                "700": "#000000",
                "500": "#000000",
                "100": "#9a9a9a",
                "600": "#000000",
                "300": "#404040",
                "900": "#000000",
                "50": "#cbcbcb",
                "400": "#1a1a1a"
            },
            "lime": {
                "50": "#f7fee7",
                "600": "#65a30d",
                "DEFAULT": "#84cc16",
                "400": "#a3e635",
                "700": "#4d7c0f",
                "500": "#84cc16",
                "100": "#ecfccb",
                "900": "#365314",
                "300": "#bef264",
                "200": "#d9f99d",
                "800": "#3f6212"
            },
            "stone": {
                "700": "#44403c",
                "600": "#57534e",
                "800": "#292524",
                "200": "#e7e5e4",
                "50": "#fafaf9",
                "300": "#d6d3d1",
                "900": "#1c1917",
                "500": "#78716c",
                "400": "#a8a29e",
                "100": "#f5f5f4",
                "DEFAULT": "#78716c"
            },
            "amber": {
                "900": "#78350f",
                "700": "#b45309",
                "500": "#f59e0b",
                "600": "#d97706",
                "800": "#92400e",
                "DEFAULT": "#f59e0b",
                "200": "#fde68a",
                "300": "#fcd34d",
                "100": "#fef3c7",
                "400": "#fbbf24",
                "50": "#fffbeb"
            },
            "yellow": {
                "200": "#fef08a",
                "300": "#fde047",
                "500": "#eab308",
                "700": "#a16207",
                "50": "#fefce8",
                "600": "#ca8a04",
                "800": "#854d0e",
                "DEFAULT": "#eab308",
                "100": "#fef9c3",
                "900": "#713f12",
                "400": "#facc15"
            },
            "red": {
                "200": "#fecaca",
                "50": "#fef2f2",
                "300": "#fca5a5",
                "800": "#991b1b",
                "500": "#ef4444",
                "100": "#fee2e2",
                "900": "#7f1d1d",
                "600": "#dc2626",
                "700": "#b91c1c",
                "DEFAULT": "#ef4444",
                "400": "#f87171"
            },
            "blue": {
                "800": "#1e40af",
                "900": "#1e3a8a",
                "DEFAULT": "#3b82f6",
                "100": "#dbeafe",
                "300": "#93c5fd",
                "400": "#60a5fa",
                "200": "#bfdbfe",
                "500": "#3b82f6",
                "700": "#1d4ed8",
                "50": "#eff6ff",
                "600": "#2563eb"
            },
            "secondary": {
                "900": "#33000b",
                "50": "#ffe6eb",
                "700": "#990022",
                "100": "#ffccd7",
                "DEFAULT": "#ff0039",
                "400": "#ff3361",
                "600": "#cc002e",
                "200": "#ff99b0",
                "800": "#660017",
                "500": "#ff0039",
                "300": "#ff6688"
            },
            "green": {
                "50": "#f0fdf4",
                "200": "#bbf7d0",
                "300": "#86efac",
                "800": "#166534",
                "500": "#22c55e",
                "600": "#16a34a",
                "DEFAULT": "#22c55e",
                "100": "#dcfce7",
                "700": "#15803d",
                "900": "#14532d",
                "400": "#4ade80"
            },
            "cyan": {
                "300": "#67e8f9",
                "400": "#22d3ee",
                "900": "#164e63",
                "200": "#a5f3fc",
                "100": "#cffafe",
                "700": "#0e7490",
                "DEFAULT": "#06b6d4",
                "800": "#155e75",
                "500": "#06b6d4",
                "600": "#0891b2",
                "50": "#ecfeff"
            },
            "zinc": {
                "50": "#fafafa",
                "100": "#f4f4f5",
                "900": "#18181b",
                "200": "#e4e4e7",
                "800": "#27272a",
                "DEFAULT": "#71717a",
                "300": "#d4d4d8",
                "500": "#71717a",
                "700": "#3f3f46",
                "400": "#a1a1aa",
                "600": "#52525b"
            },
            "inherit": {
                "50": "#e7e7e7",
                "300": "#a0a0a0",
                "800": "#2f2f2f",
                "400": "#8a8a8a",
                "DEFAULT": "#7f7f7f",
                "500": "#7f7f7f",
                "900": "#1b1b1b",
                "600": "#5b5b5b",
                "700": "#444444",
                "200": "#b7b7b7",
                "100": "#cfcfcf"
            },
            "orange": {
                "700": "#c2410c",
                "900": "#7c2d12",
                "600": "#ea580c",
                "100": "#ffedd5",
                "400": "#fb923c",
                "800": "#9a3412",
                "300": "#fdba74",
                "500": "#f97316",
                "200": "#fed7aa",
                "DEFAULT": "#f97316",
                "50": "#fff7ed"
            },
            "text": {
                "100": "#374151",
                "400": "#9ca3af",
                "600": "#e5e7eb",
                "500": "#d1d5db",
                "50": "#111827",
                "800": "#f9fafb",
                "300": "#6b7280",
                "900": "#ffffff",
                "200": "#4b5563",
                "DEFAULT": "#d1d5db",
                "700": "#f3f4f6"
            },
            "rose": {
                "300": "#fda4af",
                "800": "#9f1239",
                "900": "#881337",
                "200": "#fecdd3",
                "700": "#be123c",
                "DEFAULT": "#f43f5e",
                "50": "#fff1f2",
                "400": "#fb7185",
                "100": "#ffe4e6",
                "500": "#f43f5e",
                "600": "#e11d48"
            },
            "teal": {
                "100": "#ccfbf1",
                "300": "#5eead4",
                "800": "#115e59",
                "200": "#99f6e4",
                "700": "#0f766e",
                "600": "#0d9488",
                "400": "#2dd4bf",
                "500": "#14b8a6",
                "DEFAULT": "#14b8a6",
                "900": "#134e4a",
                "50": "#f0fdfa"
            },
            "transparent": {
                "700": "#444444",
                "600": "#5b5b5b",
                "500": "#7f7f7f",
                "200": "#b7b7b7",
                "100": "#cfcfcf",
                "DEFAULT": "#7f7f7f",
                "300": "#a0a0a0",
                "50": "#e7e7e7",
                "800": "#2f2f2f",
                "900": "#1b1b1b",
                "400": "#8a8a8a"
            },
            "slate": {
                "700": "#334155",
                "900": "#0f172a",
                "400": "#94a3b8",
                "DEFAULT": "#64748b",
                "50": "#f8fafc",
                "200": "#e2e8f0",
                "300": "#cbd5e1",
                "100": "#f1f5f9",
                "500": "#64748b",
                "600": "#475569",
                "800": "#1e293b"
            },
            "violet": {
                "900": "#4c1d95",
                "100": "#ede9fe",
                "400": "#a78bfa",
                "500": "#8b5cf6",
                "DEFAULT": "#8b5cf6",
                "600": "#7c3aed",
                "50": "#f5f3ff",
                "300": "#c4b5fd",
                "200": "#ddd6fe",
                "800": "#5b21b6",
                "700": "#6d28d9"
            },
            "neutral": {
                "900": "#171717",
                "100": "#f5f5f5",
                "300": "#d4d4d4",
                "800": "#262626",
                "600": "#525252",
                "50": "#fafafa",
                "500": "#737373",
                "400": "#a3a3a3",
                "700": "#404040",
                "DEFAULT": "#737373",
                "200": "#e5e5e5"
            },
            "fuchsia": {
                "800": "#86198f",
                "600": "#c026d3",
                "500": "#d946ef",
                "200": "#f5d0fe",
                "900": "#701a75",
                "50": "#fdf4ff",
                "100": "#fae8ff",
                "DEFAULT": "#d946ef",
                "300": "#f0abfc",
                "700": "#a21caf",
                "400": "#e879f9"
            },
            "white": {
                "500": "#ffffff",
                "900": "#2c2c2c",
                "400": "#ffffff",
                "DEFAULT": "#ffffff",
                "50": "#ffffff",
                "800": "#565656",
                "700": "#828282",
                "100": "#ffffff",
                "200": "#ffffff",
                "600": "#b2b2b2",
                "300": "#ffffff"
            },
            "current": {
                "DEFAULT": "#7f7f7f",
                "900": "#1b1b1b",
                "300": "#a0a0a0",
                "400": "#8a8a8a",
                "600": "#5b5b5b",
                "700": "#444444",
                "100": "#cfcfcf",
                "50": "#e7e7e7",
                "200": "#b7b7b7",
                "500": "#7f7f7f",
                "800": "#2f2f2f"
            },
            "surface": {
                "300": "#cfcfcf",
                "400": "#bfbfbf",
                "500": "#afafaf",
                "900": "#6f6f6f",
                "800": "#7f7f7f",
                "200": "#dfdfdf",
                "50": "#ffffff",
                "700": "#8f8f8f",
                "DEFAULT": "#afafaf",
                "100": "#efefef",
                "600": "#9f9f9f"
            },
            "emerald": {
                "800": "#065f46",
                "200": "#a7f3d0",
                "DEFAULT": "#10b981",
                "300": "#6ee7b7",
                "600": "#059669",
                "100": "#d1fae5",
                "500": "#10b981",
                "50": "#ecfdf5",
                "900": "#064e3b",
                "700": "#047857",
                "400": "#34d399"
            },
            "brand": {
                "50": "#fff0f0",
                "DEFAULT": "#ff2626",
                "800": "#af0505",
                "400": "#ff5959",
                "700": "#dc0000",
                "600": "#fc0606",
                "300": "#ff9595",
                "500": "#ff2626",
                "200": "#ffc1c1",
                "100": "#ffdddd",
                "900": "#900c0c"
            }
        },
        "fontFamily": {
            "quote": [
                "Georgia",
                "Cambria",
                "'Times New Roman'",
                "Times",
                "serif"
            ],
            "code": [
                "Menlo",
                "Monaco",
                "Consolas",
                "'Liberation Mono'",
                "'Courier New'",
                "monospace"
            ],
            "heading": [
                "Playfair Display"
            ],
            "body": [
                "Playfair Display"
            ]
        }
    }
}

Last updated

We are Realmac Software. We make nice things.