Uno Themes Simple

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

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:

<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)

Size Variants (Small / Medium)

Pattern: Simple{Size}{Style}. Small = 32px, Medium = 40px (button height).

Input Variants

Controls Without Material Equivalent

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.

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):

1. Override color palette (full cascade) — ColorOverrideSource / ColorOverrideDictionary on SimpleTheme. All brushes cascade.
2. Switch default size variant — DefaultSize="Medium" on SimpleTheme. Affects implicit button / icon-button / toggle-button styles only; size-named variants are unaffected.
3. Override specific brushes (targeted) — <SolidColorBrush x:Key="FilledButtonBackground" Color="..." /> in App.xaml.
4. Override per-control instance (scoped) — wrap the brush override inside the control's Resources block.
5. 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.