| name | uno-themes-simple |
| description | Comprehensive reference for the Uno Simple theme — designer/wireframe-style theming for Uno Platform apps. Covers SimpleTheme configuration (color/font overrides, default size), Simple-specific style keys (danger buttons, size variants, error inputs, PersonPicture variants), controls without Material equivalent (Expander, AutoSuggestBox, ToolTip, PersonPicture), Simple utility brushes (overlays, scrims, measurement/debug), and the Simple-specific pink primitive scale. |
| when_to_use | Use when targeting the Uno Simple theme — setting up `SimpleTheme`, choosing Simple-only style keys (danger buttons, Small/Medium size variants, error inputs, PersonPicture variants), styling controls that exist only in Simple (Expander, AutoSuggestBox, ToolTip), overriding the Inter font or the grayscale palette, or working with Simple's utility brush family (overlays, scrims, measurement/debug). |
| metadata | {"author":"uno-platform","version":"1.0","framework":"uno-platform","category":"themes"} |
Uno Simple Theme — Agent Skill
The Simple theme is Uno's designer/wireframe-style theme. It shares the semantic surface (style keys, typography keys, color keys, brush keys) with Material via the Semantic Design Language — see uno-themes-semantic-colors-brushes for the shared layer. This skill covers the Simple-only style keys, brushes, and SimpleTheme configuration that are not portable to other themes.
Workflow
Docs lookup: call uno_platform_docs_search(...) first, then uno_platform_docs_fetch(sourcePath="…") using the sourcePath field from a result (a relative .md path; add the result's anchor for a section). Never pass a URL, a .html link, or a hand-built path.
Step 1: Search the docs for the topic
| Topic | Search query |
|---|
Installation / SimpleTheme setup | uno_platform_docs_search("Uno Simple theme installation SimpleTheme UnoFeatures") |
| Simple style keys (buttons, inputs, etc.) | uno_platform_docs_search("Uno Simple controls styles danger size variants") |
DefaultSize (Small / Medium) | uno_platform_docs_search("Uno Simple DefaultSize SimpleControlSize button height") |
| Color override / palette | uno_platform_docs_search("Uno Simple ColorOverrideSource palette grayscale") |
| Font override | uno_platform_docs_search("Uno Simple FontOverrideSource Inter font family") |
| Utility brushes (overlays, scrims) | uno_platform_docs_search("Uno Simple utility brushes overlay scrim measurement") |
Step 2: Fetch a page
Uno's published docs have no Simple-theme-specific pages — the inline tables in this skill are the authoritative reference for Simple. For cross-theme topics, search and fetch the sourcePath from a result, e.g. lightweight styling:
- Lightweight Styling (cross-theme):
external/uno.themes/doc/lightweight-styling.md
uno_platform_docs_fetch(sourcePath="external/uno.themes/doc/lightweight-styling.md")
Critical Rules
- Simple uses a flat grayscale palette for all roles except Error (which uses red). Primary, Secondary, Tertiary, Surface, and Outline are achromatic grays. To introduce brand colors, override the palette via
ColorOverrideSource / ColorOverrideDictionary.
- Simple defaults to Inter for all typography (
SimpleFontFamily); CharacterSpacing=0 on all styles; font weights are Bold / SemiBold / Normal (no Medium).
- Typography style keys are NEVER theme-prefixed. Write
DisplayLarge, BodyMedium, LabelSmall — NOT SimpleDisplayLarge. The theme-prefix pattern only applies to the Simple-only control styles listed below.
DefaultSize affects implicit styles only. Setting <SimpleTheme DefaultSize="Medium" /> switches the unsized button / icon-button / toggle-button defaults from 32px (Small) to 40px (Medium). Size-specific styles (SimpleSmall*, SimpleMedium*) always use their declared size regardless of DefaultSize.
SimpleTheme Configuration
SimpleTheme (namespace using:Uno.Simple) accepts:
| Property | Type | Default | Purpose |
|---|
ColorOverrideSource | string (URI) | — | Path to a XAML ResourceDictionary overriding *Color keys |
ColorOverrideDictionary | ResourceDictionary | — | Inline ResourceDictionary overriding *Color keys |
FontOverrideSource | string (URI) | — | Path to a XAML ResourceDictionary overriding font resources |
FontOverrideDictionary | ResourceDictionary | — | Inline ResourceDictionary overriding font resources |
DefaultSize | SimpleControlSize | Small | Default size variant for buttons / icon buttons / toggle buttons |
<SimpleTheme xmlns="using:Uno.Simple"
ColorOverrideSource="ms-appx:///Styles/Application/ColorOverride.xaml"
FontOverrideSource="ms-appx:///Styles/Application/FontOverride.xaml"
DefaultSize="Medium" />
When overriding the palette, always provide both Light and Default (Dark) theme values.
Simple-Only Style Keys
Button Variants (no Material equivalent)
| Style Key | Control | Use For |
|---|
SimpleDangerPrimaryButtonStyle | Button | Destructive filled action ("Delete account") |
SimpleDangerSubtleButtonStyle | Button | Destructive text action |
SimpleIconButtonNeutralStyle | Button | Neutral (secondary) icon button |
SimpleIconButtonSubtleStyle | Button | Subtle (tertiary) icon button |
SimpleIconButtonDangerPrimaryStyle | Button | Destructive filled icon button |
SimpleIconButtonDangerSubtleStyle | Button | Destructive subtle icon button |
Size Variants (Small / Medium)
Pattern: Simple{Size}{Style}. Small = 32px, Medium = 40px (button height).
| Size | Button | Icon Button | ToggleButton |
|---|
| Small | SimpleSmallFilledButtonStyle, SimpleSmallFilledTonalButtonStyle, SimpleSmallTextButtonStyle, SimpleSmallDangerPrimaryButtonStyle, SimpleSmallDangerSubtleButtonStyle | SimpleSmallIconButtonStyle, SimpleSmallIconButtonNeutralStyle, SimpleSmallIconButtonSubtleStyle, SimpleSmallIconButtonDangerPrimaryStyle, SimpleSmallIconButtonDangerSubtleStyle | SimpleSmallToggleButtonStyle |
| Medium | SimpleMediumFilledButtonStyle, SimpleMediumFilledTonalButtonStyle, SimpleMediumTextButtonStyle, SimpleMediumDangerPrimaryButtonStyle, SimpleMediumDangerSubtleButtonStyle | SimpleMediumIconButtonStyle, SimpleMediumIconButtonNeutralStyle, SimpleMediumIconButtonSubtleStyle, SimpleMediumIconButtonDangerPrimaryStyle, SimpleMediumIconButtonDangerSubtleStyle | SimpleMediumToggleButtonStyle |
Input Variants
| Style Key | Control | Use For |
|---|
SimpleTextBoxErrorStyle | TextBox | Error / validation state |
SimpleTextBoxSmallStyle | TextBox | Small size variant |
SimpleComboBoxErrorStyle | ComboBox | Error / validation state |
Controls Without Material Equivalent
| Style Key | Control | Notes |
|---|
SimpleExpanderStyle | Expander | No Material counterpart |
SimpleAutoSuggestBoxStyle | AutoSuggestBox | No Material counterpart |
SimpleToolTipStyle | ToolTip | No Material counterpart |
SimplePersonPictureStyle | PersonPicture | Circular, medium (default) |
SimplePersonPictureSmallStyle | PersonPicture | Circular, small |
SimplePersonPictureLargeStyle | PersonPicture | Circular, large |
SimplePersonPictureSquareStyle | PersonPicture | Square (rounded), medium |
SimplePersonPictureSquareSmallStyle | PersonPicture | Square (rounded), small |
SimplePersonPictureSquareLargeStyle | PersonPicture | Square (rounded), large |
Simple-Specific Utility Brushes
Beyond the shared semantic brushes, Simple defines utility brushes for overlays, scrims, and measurement/debug overlays. Defined in Simple's ColorPalette.xaml; no shared equivalent.
| Brush Key | Light | Dark | Purpose |
|---|
SimpleBackgroundUtilitiesBlanketBrush | #B2000000 | #B2000000 | Heavy overlay / blanket |
SimpleBackgroundUtilitiesMeasurementBrush | Pink 200 | Pink 800 | Measurement overlay background |
SimpleBackgroundUtilitiesOverlayBrush | #80000000 | #80000000 | Semi-transparent overlay |
SimpleBackgroundUtilitiesScrimBrush | #CCFFFFFF | #CC000000 | Scrim behind dialogs / sheets |
SimpleTextUtilitiesOnMeasurementBrush | Pink 800 | Pink 200 | Text on measurement surfaces |
SimpleTextUtilitiesOnOverlayBrush | OnSurfaceInverseBrush | OnSurfaceBrush | Text on overlay surfaces |
SimpleIconUtilitiesBrush | Pink 600 | Pink 400 | Measurement / debug icons |
SimpleIconUtilitiesOnMeasurementBrush | Pink 800 | Pink 200 | Icons on measurement surfaces |
SimpleBorderUtilitiesMeasurementBrush | Pink 400 | Pink 600 | Measurement / debug borders |
SimpleBorderUtilitiesSwatchBrush | #3D000000 | #3DFFFFFF | Color swatch borders |
These reference a Simple-specific pink primitive scale: SimplePink200Color through SimplePink800Color. Pink values intentionally swap between light and dark themes to maintain contrast.
Customization Methods
Simple supports five escalating overrides (ordered by scope):
- Override color palette (full cascade) —
ColorOverrideSource / ColorOverrideDictionary on SimpleTheme. All brushes cascade.
- Switch default size variant —
DefaultSize="Medium" on SimpleTheme. Affects implicit button / icon-button / toggle-button styles only; size-named variants are unaffected.
- Override specific brushes (targeted) —
<SolidColorBrush x:Key="FilledButtonBackground" Color="..." /> in App.xaml.
- Override per-control instance (scoped) — wrap the brush override inside the control's
Resources block.
- Override font family —
FontOverrideSource / FontOverrideDictionary on SimpleTheme, or override SimpleFontFamily directly. Default is Inter.
Customization precedence (highest → lowest): per-instance Control.Resources → Page.Resources → app-level overrides → SimpleTheme defaults → SharedColorPalette / SharedColors / SharedTypography foundation.
Related Skills
- [[uno-themes-semantic-colors-brushes]] — Read this first for the shared semantic surface (style keys, typography, palette, brushes) common to Simple AND Material. Most styling should use those portable keys; reach for Simple-prefixed styles only when targeting Simple-specific concepts (danger variants, explicit sizes, Expander, etc.).
- [[uno-themes-material]] — Material theme reference. Use when targeting Material instead of (or alongside) Simple.
