Skip to main content Link Search Menu Expand Document (external link)

Fluent v2 Theme Resources

These are the resources used within the Fluent v2 theme for your reference that the control styles use. As HighContrast theme is handled very specifically, only light and dark theme resources will be listed below in the Colors/Brushes sections. Note that there are a couple resources that are set to Magenta (#FF00FF). These are only for parity with the HighContrastTheme and should not be used elsewhere.

Base Resources

ControlCornerRadius

Type: CornerRadius

Value: 4

OverlayCornerRadius

Type: CornerRadius

Value: 8

ControlContentThemeFontSize

Type: Double

Value: 14

FlyoutContentThemePadding

Type: Thickness

Value: 12,11,12,12

FlyoutThemeMaxHeight

Type: Double

Value: 758

FlyoutThemeMaxWidth

Type: Double

Value: 456

FlyoutThemeMinHeight

Type: Double

Value: 40

FlyoutThemeMinWidth

Type: Double

Value: 96

TextControlThemeMinHeight

Type: Double

Value: 32

TextControlThemeMinWidth

Type: Double

Value: 64

ChevronDownGlyph

Type: String

Value:

ChevronUpGlyph

Type: String

Value:

HelperButtonThemePadding

Type: Thickness

Value: 0,0,-2,0

ButtonPadding

Type: Thickness

Value: 11,5,11,6

MenuBarItemButtonPadding

Type: Thickness

Value: 10,4,10,4

MenuBarItemMargin

Type: Thickness

Value: 4,4,4,4

MenuFlyoutSeparatorHeight

Type: Double

Value: 1

MenuFlyoutThemeMinHeight

Type: Double

Value: 32

MenuFlyoutItemChevronMargin

Type: Thickness

Value: 24,0,0,0

MenuFlyoutSeparatorThemePadding

Type: Thickness

Value: -4,1,-4,1

MenuFlyoutItemMargin

Type: Thickness

Value: 4,2,4,2

MenuFlyoutItemThemePadding

Type: Thickness

Value: 11,8,11,9

MenuFlyoutItemThemePaddingNarrow

Type: Thickness

Value: 11,4,11,5

TabControlTopPlacementItemMargin

Type: Thickness

Value: 0 0 0 2

TabItemMinHeight

Type: Double

Value: 48

TabItemVerticalPipeHeight

Type: Double

Value: 24

TabItemPipeThickness

Type: Double

Value: 2

TabItemHeaderMargin

Type: Thickness

Value: 12,0,12,0

TabItemHeaderItemFontFamily

Type: FontFamily

Value: XamlAutoFontFamily

TabItemHeaderFontSize

Type: Double

Value: 24

TabItemMargin

Type: Thickness

Value: 12,0,12,0

TabItemHeaderThemeFontWeight

Type: FontWeight

Value: SemiLight

FlyoutBorderThemeThickness

Type: Thickness

Value: 1

FlyoutContentPadding

Type: Thickness

Value: 16,15,16,17

MenuFlyoutPresenterThemePadding

Type: Thickness

Value: 0,2,0,2

MenuFlyoutPresenterBorderThemeThickness

Type: Thickness

Value: 1

MenuFlyoutSubItemPopupHorizontalOffset

Type: Double

Value: -4

MenuFlyoutScrollerMargin

Type: Thickness

Value: 0,4,0,4

MenuIconPresenterMargin

Type: Thickness

Value: 0,0,12,0

MenuInputGestureTextMargin

Type: Thickness

Value: 24,0,0,0

Colors

TextFillColorPrimary

Light: #FFFFFF

Dark: #E4000000

TextFillColorSecondary

Light: #C5FFFFFF

Dark: #9E000000

TextFillColorTertiary

Light: #87FFFFFF

Dark: #72000000

TextFillColorDisabled

Light: #5DFFFFFF

Dark: #5C000000

TextFillColorInverse

Light: #E4000000

Dark: #FFFFFF

AccentTextFillColorDisabled

Light: #5DFFFFFF

Dark: #5C000000

TextOnAccentFillColorSelectedText

Light: #FFFFFF

Dark: #FFFFFF

TextOnAccentFillColorPrimary

Light: #000000

Dark: #FFFFFF

TextOnAccentFillColorSecondary

Light: #80000000

Dark: #B3FFFFFF

TextOnAccentFillColorDisabled

Light: #87FFFFFF

Dark: #FFFFFF

ControlFillColorDefault

Light: #0FFFFFFF

Dark: #B3FFFFFF

ControlFillColorSecondary

Light: #15FFFFFF

Dark: #80F9F9F9

ControlFillColorTertiary

Light: #08FFFFFF

Dark: #4DF9F9F9

ControlFillColorDisabled

Light: #0BFFFFFF

Dark: #4DF9F9F9

ControlFillColorTransparent

Light: #00FFFFFF

Dark: #00FFFFFF

ControlFillColorInputActive

Light: #B31E1E1E

Dark: #FFFFFF

ControlStrongFillColorDefault

Light: #8BFFFFFF

Dark: #72000000

ControlStrongFillColorDisabled

Light: #3FFFFFFF

Dark: #51000000

ControlSolidFillColorDefault

Light: #454545

Dark: #FFFFFF

SubtleFillColorTransparent

Light: #00FFFFFF

Dark: #00FFFFFF

SubtleFillColorSecondary

Light: #0FFFFFFF

Dark: #09000000

SubtleFillColorTertiary

Light: #0AFFFFFF

Dark: #06000000

SubtleFillColorDisabled

Light: #00FFFFFF

Dark: #00FFFFFF

ControlAltFillColorTransparent

Light: #00FFFFFF

Dark: #00FFFFFF

ControlAltFillColorSecondary

Light: #19000000

Dark: #06000000

ControlAltFillColorTertiary

Light: #0BFFFFFF

Dark: #0F000000

ControlAltFillColorQuarternary

Light: #12FFFFFF

Dark: #18000000

ControlAltFillColorDisabled

Light: #00FFFFFF

Dark: #00FFFFFF

ControlOnImageFillColorDefault

Light: #B31C1C1C

Dark: #C9FFFFFF

ControlOnImageFillColorSecondary

Light: #1A1A1A

Dark: #F3F3F3

ControlOnImageFillColorTertiary

Light: #131313

Dark: #EBEBEB

ControlOnImageFillColorDisabled

Light: #1E1E1E

Dark: #00FFFFFF

AccentFillColorDisabled

Light: #28FFFFFF

Dark: #37000000

ControlStrokeColorDefault

Light: #12FFFFFF

Dark: #0F000000

ControlStrokeColorSecondary

Light: #18FFFFFF

Dark: #29000000

ControlStrokeColorOnAccentDefault

Light: #14FFFFFF

Dark: #14FFFFFF

ControlStrokeColorOnAccentSecondary

Light: #23000000

Dark: #66000000

ControlStrokeColorOnAccentTertiary

Light: #37000000

Dark: #37000000

ControlStrokeColorOnAccentDisabled

Light: #33000000

Dark: #0F000000

ControlStrokeColorForStrongFillWhenOnImage

Light: #6B000000

Dark: #59FFFFFF

CardStrokeColorDefault

Light: #19000000

Dark: #0F000000

CardStrokeColorDefaultSolid

Light: #1C1C1C

Dark: #EBEBEB

ControlStrongStrokeColorDefault

Light: #8BFFFFFF

Dark: #72000000

ControlStrongStrokeColorDisabled

Light: #28FFFFFF

Dark: #37000000

SurfaceStrokeColorDefault

Light: #66757575

Dark: #66757575

SurfaceStrokeColorFlyout

Light: #33000000

Dark: #0F000000

SurfaceStrokeColorInverse

Light: #0F000000

Dark: #15FFFFFF

DividerStrokeColorDefault

Light: #15FFFFFF

Dark: #0F000000

FocusStrokeColorOuter

Light: #FFFFFF

Dark: #E4000000

FocusStrokeColorInner

Light: #B3000000

Dark: #B3FFFFFF

CardBackgroundFillColorDefault

Light: #0DFFFFFF

Dark: #B3FFFFFF

CardBackgroundFillColorSecondary

Light: #08FFFFFF

Dark: #80F6F6F6

SmokeFillColorDefault

Light: #4D000000

Dark: #4D000000

LayerFillColorDefault

Light: #4C3A3A3A

Dark: #80FFFFFF

LayerFillColorAlt

Light: #0DFFFFFF

Dark: #FFFFFF

LayerOnAcrylicFillColorDefault

Light: #09FFFFFF

Dark: #40FFFFFF

LayerOnAccentAcrylicFillColorDefault

Light: #09FFFFFF

Dark: #40FFFFFF

LayerOnMicaBaseAltFillColorDefault

Light: #733A3A3A

Dark: #B3FFFFFF

LayerOnMicaBaseAltFillColorSecondary

Light: #0FFFFFFF

Dark: #0A000000

LayerOnMicaBaseAltFillColorTertiary

Light: #2C2C2C

Dark: #F9F9F9

LayerOnMicaBaseAltFillColorTransparent

Light: #00FFFFFF

Dark: #00000000

SolidBackgroundFillColorBase

Light: #202020

Dark: #F3F3F3

SolidBackgroundFillColorSecondary

Light: #1C1C1C

Dark: #EEEEEE

SolidBackgroundFillColorTertiary

Light: #282828

Dark: #F9F9F9

SolidBackgroundFillColorQuarternary

Light: #2C2C2C

Dark: #FFFFFF

SolidBackgroundFillColorTransparent

Light: #00202020

Dark: #00F3F3F3

SystemFillColorSuccess

Light: #6CCB5F

Dark: #0F7B0F

SystemFillColorCaution

Light: #FCE100

Dark: #9D5D00

SystemFillColorCritical

Light: #FF99A4

Dark: #C42B1C

SystemFillColorNeutral

Light: #8BFFFFFF

Dark: #72000000

SystemFillColorSolidNeutral

Light: #9D9D9D

Dark: #8A8A8A

SystemFillColorAttentionBackground

Light: #08FFFFFF

Dark: #80F6F6F6

SystemFillColorSuccessBackground

Light: #393D1B

Dark: #DFF6DD

SystemFillColorCautionBackground

Light: #433519

Dark: #FFF4CE

SystemFillColorCriticalBackground

Light: #442726

Dark: #FDE7E9

SystemFillColorNeutralBackground

Light: #08FFFFFF

Dark: #06000000

SystemFillColorSolidAttentionBackground

Light: #2E2E2E

Dark: #F7F7F7

SystemFillColorSolidNeutralBackground

Light: #2E2E2E

Dark: #F3F3F3

Brushes

TextFillColorPrimaryBrush

Light: TextFillColorPrimary

Dark: TextFillColorPrimary

TextFillColorSecondaryBrush

Light: TextFillColorSecondary

Dark: TextFillColorSecondary

TextFillColorTertiaryBrush

Light: TextFillColorTertiary

Dark: TextFillColorTertiary

TextFillColorDisabledBrush

Light: TextFillColorDisabled

Dark: TextFillColorDisabled

TextFillColorInverseBrush

Light: TextFillColorInverse

Dark: TextFillColorInverse

AccentTextFillColorPrimaryBrush

Light: SystemAccentColorLight

Dark: SystemAccentColorDark

AccentTextFillColorSecondaryBrush

Light: SystemAccentColorLight

Dark: SystemAccentColorDark

AccentTextFillColorTertiaryBrush

Light: SystemAccentColorLight

Dark: SystemAccentColorDark

AccentTextFillColorDisabledBrush

Light: AccentTextFillColorDisabled

Dark: AccentTextFillColorDisabled

TextOnAccentFillColorSelectedTextBrush

Light: TextOnAccentFillColorSelectedText

Dark: TextOnAccentFillColorSelectedText

TextOnAccentFillColorPrimaryBrush

Light: TextOnAccentFillColorPrimary

Dark: TextOnAccentFillColorPrimary

TextOnAccentFillColorSecondaryBrush

Light: TextOnAccentFillColorSecondary

Dark: TextOnAccentFillColorSecondary

TextOnAccentFillColorDisabledBrush

Light: TextOnAccentFillColorDisabled

Dark: TextOnAccentFillColorDisabled

ControlFillColorDefaultBrush

Light: ControlFillColorDefault

Dark: ControlFillColorDefault

ControlFillColorSecondaryBrush

Light: ControlFillColorSecondary

Dark: ControlFillColorSecondary

ControlFillColorTertiaryBrush

Light: ControlFillColorTertiary

Dark: ControlFillColorTertiary

ControlFillColorDisabledBrush

Light: ControlFillColorDisabled

Dark: ControlFillColorDisabled

ControlFillColorTransparentBrush

Light: ControlFillColorTransparent

Dark: ControlFillColorTransparent

ControlFillColorInputActiveBrush

Light: ControlFillColorInputActive

Dark: ControlFillColorInputActive

ControlStrongFillColorDefaultBrush

Light: ControlStrongFillColorDefault

Dark: ControlStrongFillColorDefault

ControlStrongFillColorDisabledBrush

Light: ControlStrongFillColorDisabled

Dark: ControlStrongFillColorDisabled

ControlSolidFillColorDefaultBrush

Light: ControlSolidFillColorDefault

Dark: ControlSolidFillColorDefault

SubtleFillColorTransparentBrush

Light: SubtleFillColorTransparent

Dark: SubtleFillColorTransparent

SubtleFillColorSecondaryBrush

Light: SubtleFillColorSecondary

Dark: SubtleFillColorSecondary

SubtleFillColorTertiaryBrush

Light: SubtleFillColorTertiary

Dark: SubtleFillColorTertiary

SubtleFillColorDisabledBrush

Light: SubtleFillColorDisabled

Dark: SubtleFillColorDisabled

ControlAltFillColorTransparentBrush

Light: ControlAltFillColorTransparent

Dark: ControlAltFillColorTransparent

ControlAltFillColorSecondaryBrush

Light: ControlAltFillColorSecondary

Dark: ControlAltFillColorSecondary

ControlAltFillColorTertiaryBrush

Light: ControlAltFillColorTertiary

Dark: ControlAltFillColorTertiary

ControlAltFillColorQuarternaryBrush

Light: ControlAltFillColorQuarternary

Dark: ControlAltFillColorQuarternary

ControlAltFillColorDisabledBrush

Light: ControlAltFillColorDisabled

Dark: ControlAltFillColorDisabled

ControlOnImageFillColorDefaultBrush

Light: ControlOnImageFillColorDefault

Dark: ControlOnImageFillColorDefault

ControlOnImageFillColorSecondaryBrush

Light: ControlOnImageFillColorSecondary

Dark: ControlOnImageFillColorSecondary

ControlOnImageFillColorTertiaryBrush

Light: ControlOnImageFillColorTertiary

Dark: ControlOnImageFillColorTertiary

ControlOnImageFillColorDisabledBrush

Light: ControlOnImageFillColorDisabled

Dark: ControlOnImageFillColorDisabled

AccentFillColorSelectedTextBackgroundBrush

Light: SystemAccentColor

Dark: SystemAccentColor

AccentFillColorDefaultBrush

Light: SystemAccentColorLight

Dark: SystemAccentColorDark

AccentFillColorSecondaryBrush

Light: SystemAccentColorLight

Dark: SystemAccentColorDark

AccentFillColorTertiaryBrush

Light: SystemAccentColorLight

Dark: SystemAccentColorDark

AccentFillColorDisabledBrush

Light: AccentFillColorDisabled

Dark: AccentFillColorDisabled

ControlStrokeColorDefaultBrush

Light: ControlStrokeColorDefault

Dark: ControlStrokeColorDefault

ControlStrokeColorSecondaryBrush

Light: ControlStrokeColorSecondary

Dark: ControlStrokeColorSecondary

ControlStrokeColorOnAccentDefaultBrush

Light: ControlStrokeColorOnAccentDefault

Dark: ControlStrokeColorOnAccentDefault

ControlStrokeColorOnAccentSecondaryBrush

Light: ControlStrokeColorOnAccentSecondary

Dark: ControlStrokeColorOnAccentSecondary

ControlStrokeColorOnAccentTertiaryBrush

Light: ControlStrokeColorOnAccentTertiary

Dark: ControlStrokeColorOnAccentTertiary

ControlStrokeColorOnAccentDisabledBrush

Light: ControlStrokeColorOnAccentDisabled

Dark: ControlStrokeColorOnAccentDisabled

ControlStrokeColorForStrongFillWhenOnImageBrush

Light: ControlStrokeColorForStrongFillWhenOnImage

Dark: ControlStrokeColorForStrongFillWhenOnImage

CardStrokeColorDefaultBrush

Light: CardStrokeColorDefault

Dark: CardStrokeColorDefault

CardStrokeColorDefaultSolidBrush

Light: CardStrokeColorDefaultSolid

Dark: CardStrokeColorDefaultSolid

ControlStrongStrokeColorDefaultBrush

Light: ControlStrongStrokeColorDefault

Dark: ControlStrongStrokeColorDefault

ControlStrongStrokeColorDisabledBrush

Light: ControlStrongStrokeColorDisabled

Dark: ControlStrongStrokeColorDisabled

SurfaceStrokeColorDefaultBrush

Light: SurfaceStrokeColorDefault

Dark: SurfaceStrokeColorDefault

SurfaceStrokeColorFlyoutBrush

Light: SurfaceStrokeColorFlyout

Dark: SurfaceStrokeColorFlyout

SurfaceStrokeColorInverseBrush

Light: SurfaceStrokeColorInverse

Dark: SurfaceStrokeColorInverse

DividerStrokeColorDefaultBrush

Light: DividerStrokeColorDefault

Dark: DividerStrokeColorDefault

FocusStrokeColorOuterBrush

Light: FocusStrokeColorOuter

Dark: FocusStrokeColorOuter

FocusStrokeColorInnerBrush

Light: FocusStrokeColorInner

Dark: FocusStrokeColorInner

CardBackgroundFillColorDefaultBrush

Light: CardBackgroundFillColorDefault

Dark: CardBackgroundFillColorDefault

CardBackgroundFillColorSecondaryBrush

Light: CardBackgroundFillColorSecondary

Dark: CardBackgroundFillColorSecondary

SmokeFillColorDefaultBrush

Light: SmokeFillColorDefault

Dark: SmokeFillColorDefault

LayerFillColorDefaultBrush

Light: LayerFillColorDefault

Dark: LayerFillColorDefault

LayerFillColorAltBrush

Light: LayerFillColorAlt

Dark: LayerFillColorAlt

LayerOnAcrylicFillColorDefaultBrush

Light: LayerOnAcrylicFillColorDefault

Dark: LayerOnAcrylicFillColorDefault

LayerOnAccentAcrylicFillColorDefaultBrush

Light: LayerOnAccentAcrylicFillColorDefault

Dark: LayerOnAccentAcrylicFillColorDefault

LayerOnMicaBaseAltFillColorDefaultBrush

Light: LayerOnMicaBaseAltFillColorDefault

Dark: LayerOnMicaBaseAltFillColorDefault

LayerOnMicaBaseAltFillColorSecondaryBrush

Light: LayerOnMicaBaseAltFillColorSecondary

Dark: LayerOnMicaBaseAltFillColorSecondary

LayerOnMicaBaseAltFillColorTertiaryBrush

Light: LayerOnMicaBaseAltFillColorTertiary

Dark: LayerOnMicaBaseAltFillColorTertiary

LayerOnMicaBaseAltFillColorTransparentBrush

Light: LayerOnMicaBaseAltFillColorTransparent

Dark: LayerOnMicaBaseAltFillColorTransparent

SolidBackgroundFillColorBaseBrush

Light: SolidBackgroundFillColorBase

Dark: SolidBackgroundFillColorBase

SolidBackgroundFillColorSecondaryBrush

Light: SolidBackgroundFillColorSecondary

Dark: SolidBackgroundFillColorSecondary

SolidBackgroundFillColorTertiaryBrush

Light: SolidBackgroundFillColorTertiary

Dark: SolidBackgroundFillColorTertiary

SolidBackgroundFillColorQuarternaryBrush

Light: SolidBackgroundFillColorQuarternary

Dark: SolidBackgroundFillColorQuarternary

SystemFillColorAttentionBrush

Light: SystemAccentColorLight

Dark: SystemAccentColor

SystemFillColorSuccessBrush

Light: SystemFillColorSuccess

Dark: SystemFillColorSuccess

SystemFillColorCautionBrush

Light: SystemFillColorCaution

Dark: SystemFillColorCaution

SystemFillColorCriticalBrush

Light: SystemFillColorCritical

Dark: SystemFillColorCritical

SystemFillColorNeutralBrush

Light: SystemFillColorNeutral

Dark: SystemFillColorNeutral

SystemFillColorSolidNeutralBrush

Light: SystemFillColorSolidNeutral

Dark: SystemFillColorSolidNeutral

SystemFillColorAttentionBackgroundBrush

Light: SystemFillColorAttentionBackground

Dark: SystemFillColorAttentionBackground

SystemFillColorSuccessBackgroundBrush

Light: SystemFillColorSuccessBackground

Dark: SystemFillColorSuccessBackground

SystemFillColorCautionBackgroundBrush

Light: SystemFillColorCautionBackground

Dark: SystemFillColorCautionBackground

SystemFillColorCriticalBackgroundBrush

Light: SystemFillColorCriticalBackground

Dark: SystemFillColorCriticalBackground

SystemFillColorNeutralBackgroundBrush

Light: SystemFillColorNeutralBackground

Dark: SystemFillColorNeutralBackground

SystemFillColorSolidAttentionBackgroundBrush

Light: SystemFillColorSolidAttentionBackground

Dark: SystemFillColorSolidAttentionBackground

SystemFillColorSolidNeutralBackgroundBrush

Light: SystemFillColorSolidNeutralBackground

Dark: SystemFillColorSolidNeutralBackground

SystemColorWindowTextColorBrush

Light: #FF00FF

Dark: #FF00FF

SystemColorWindowColorBrush

Light: #FF00FF

Dark: #FF00FF

SystemColorButtonFaceColorBrush

Light: #FF00FF

Dark: #FF00FF

SystemColorButtonTextColorBrush

Light: #FF00FF

Dark: #FF00FF

SystemColorHighlightColorBrush

Light: #FF00FF

Dark: #FF00FF

SystemColorHighlightTextColorBrush

Light: #FF00FF

Dark: #FF00FF

SystemColorHotlightColorBrush

Light: #FF00FF

Dark: #FF00FF

SystemColorGrayTextColorBrush

Light: #FF00FF

Dark: #FF00FF

ControlElevationBorderBrush

Light: LinearGradientBrush

Dark: LinearGradientBrush

CircleElevationBorderBrush

Light: LinearGradientBrush

Dark: LinearGradientBrush

AccentControlElevationBorderBrush

Light: LinearGradientBrush

Dark: LinearGradientBrush

SystemControlTransparentBrush

Light: Transparent

Dark: Transparent

SystemControlHighlightListAccentVeryHighBrush

Light: SystemAccentColor

Dark: SystemAccentColor

SystemControlHighlightListAccentMediumLowBrush

Light: SystemAccentColor

Dark: SystemAccentColor

ApplicationPageBackgroundThemeBrush

Light: SolidBackgroundFillColorBase

Dark: SolidBackgroundFillColorBase