Pref theme item<mds-pref-theme-item>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
schemeenumSpecifies the theme scheme which can be 'light', 'dark' or 'all'
selectedselectedbooleanSpecifies if the element is selected
labelstringSpecifies the theme name
namestringSpecifies the theme name
Overview
The <mds-pref-theme-item> web component is a single selectable theme entry inside the <mds-pref-theme> preference picker. It renders as a borderless button that pairs a color-swatch preview of the theme with its label.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-pref-theme>; it is not used standalone or mixed with other child component types.Selection is parent-driven: On click each item emits mdsPrefThemeItemSelect (carrying { name, scheme }), and the parent responds by clearing the siblings and selecting the clicked one. Setting selected directly on a single item does not coordinate the others.Click bubbles up: The emitted event is what the parent listens to in order to apply the theme to the document and persist the choice.Auto-derived label: If label is omitted, it is generated from name by capitalizing the first letter and replacing hyphens with spaces (e.g. maggioli-editore becomes Maggioli editore).Static color preview: The four swatches (primary, success, warning, error) and the preview background are painted by the --mds-pref-theme-item-* CSS custom properties, not by props. Their defaults are the page’s current roles (accent, the status emphases, wash-base), so every item shows the same swatches until you set the properties per item.
Properties & Visual Configurations
name: The theme identifier reported to the parent and matched against the parent’s active name to compute initial selection. Use a simple or kebab-case string; the named themes are cool and warm, and default is the base theme (agents/theming.md). The parent validates the lowercase/kebab format and throws on invalid names.scheme: Declares which color schemes the theme supports - all (default, both light and dark), or light / dark to force a single mode. This value travels with the selection event and is applied by the parent when the item is chosen.selected: Reflects whether this item is the active theme. The parent sets it on every item when it loads and on each pick, so a value set by hand is overwritten.