Edit Theme Variant

Name

Also known as (comma separated)

Brief definition Alternative theme such as light/dark.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Weekly report" }, { "id": "themeVariant", "type": "select", "label": "Theme variant", "default": "light", "options": [ "light", "dark", "high-contrast" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showCard", "type": "toggle", "label": "Show nested card", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"themev themev--{{themeVariant}}\">\n <p class=\"themev__heading\">{{heading}}</p>\n <p class=\"themev__tag\">theme: {{themeVariant}}</p>\n {{#if showCard}}<div class=\"themev__card\" style=\"border-color:{{accent}};\">Nested card inherits the theme</div>{{/if}}\n</div>\n<style>\n.themev { font: 14px/1.5 system-ui, sans-serif; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.themev--light { background: #FAF7F2; color: #241430; }\n.themev--dark { background: #241430; color: #FAF7F2; }\n.themev--high-contrast { background: #000000; color: #ffffff; }\n.themev__heading { margin: 0 0 4px; font-weight: 700; font-size: 16px; }\n.themev__tag { margin: 0 0 14px; font-size: 11px; opacity: .7; }\n.themev__card { padding: 12px; border-radius: 8px; border: 2px solid; font-size: 12px; }\n.themev--high-contrast .themev__card { border-width: 3px; }\n</style>", "tailwind": "<div class=\"themevtw themevtw--{{themeVariant}} font-sans p-5 rounded-xl w-[280px] box-border\">\n <p class=\"m-0 mb-1 font-bold text-base\">{{heading}}</p>\n <p class=\"m-0 mb-3.5 text-[11px] opacity-70\">theme: {{themeVariant}}</p>\n {{#if showCard}}<div class=\"p-3 rounded-lg border-2 text-xs\" style=\"border-color:{{accent}};\">Nested card inherits the theme</div>{{/if}}\n</div>\n<style>\n.themevtw--light { background: #FAF7F2; color: #241430; }\n.themevtw--dark { background: #241430; color: #FAF7F2; }\n.themevtw--high-contrast { background: #000000; color: #ffffff; }\n</style>", "react": "export function ThemeVariant({\n heading = \"{{heading}}\",\n themeVariant = \"{{themeVariant}}\",\n accent = \"{{accent}}\",\n showCard = {{showCard}},\n}) {\n const palette = {\n light: { background: \"#FAF7F2\", color: \"#241430\" },\n dark: { background: \"#241430\", color: \"#FAF7F2\" },\n \"high-contrast\": { background: \"#000000\", color: \"#ffffff\" },\n }[themeVariant];\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", padding: 20, borderRadius: 12, width: 280, boxSizing: \"border-box\", ...palette }}>\n <p style={{ margin: \"0 0 4px\", fontWeight: 700, fontSize: 16 }}>{heading}</p>\n <p style={{ margin: \"0 0 14px\", fontSize: 11, opacity: .7 }}>theme: {themeVariant}</p>\n {showCard && <div style={{ padding: 12, borderRadius: 8, border: `${themeVariant === \"high-contrast\" ? 3 : 2}px solid ${accent}`, fontSize: 12 }}>Nested card inherits the theme</div>}\n </div>\n );\n}" }