Refresh
Scheme Violet Ocean Amber
Light / Dark
Shell Pieces
Theme toggles & palette switchers
Mode toggle Light / Dark
Palette switcher
Scheme Violet Ocean Amber
Mode toggle — Size="Compact" Light / Dark
Palette switcher — Size="Compact"
Violet Ocean Amber
Usage
<ThemeToggle />
<PaletteSwitcher />

<!-- Compact: dot/glyph only, for narrow header layouts -->
<ThemeToggle Size="FctControlSize.Compact" />
<PaletteSwitcher Size="FctControlSize.Compact" />

<ThemedArea Area="FactonThemeAreaVariant.Muted">
    <FluentButton Appearance="ButtonAppearance.Outline">Muted-area button</FluentButton>
</ThemedArea>
Themed Areas
<ThemedArea Area="Default"> — no vibrancy adjustment
Default-area button Accent: --colorBrandForeground1
<ThemedArea Area="Muted"> — reduced vibrancy, same hue/mode
Muted-area button Accent: --colorBrandForeground1
"Outlined" — a component Appearance, not a theme area A stroke-forward look has no FactonThemeAreaVariant member — it is not a hue/vibrancy characteristic, so it is expressed per-component via FluentUI's own Appearance parameter instead (recorded decision, see memory-bank/standards/decision-index.md). Outline appearance
Stacks
FluentStack lays out children along one axis. Orientation switches between a vertical column and a horizontal row, and VerticalGap/HorizontalGap accept either a raw pixel number or a literal CSS value — e.g. a design-token var(--spacingVertical*/--spacingHorizontal*) reference — for the gap between items.
Vertical stack
First Second Third
Horizontal stack
First Second Third
Usage
<!-- Vertical stack: a column, gap applied as row-gap -->
<FluentStack Orientation="Orientation.Vertical" VerticalGap="var(--spacingVerticalS)">
    <FluentButton Appearance="ButtonAppearance.Primary">First</FluentButton>
    <FluentButton Appearance="ButtonAppearance.Outline">Second</FluentButton>
    <FluentButton Appearance="ButtonAppearance.Subtle">Third</FluentButton>
</FluentStack>

<!-- Horizontal stack: a row, gap applied as column-gap -->
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="var(--spacingHorizontalS)"
             VerticalAlignment="VerticalAlignment.Center">
    <FluentButton Appearance="ButtonAppearance.Primary">First</FluentButton>
    <FluentButton Appearance="ButtonAppearance.Outline">Second</FluentButton>
    <FluentButton Appearance="ButtonAppearance.Subtle">Third</FluentButton>
</FluentStack>