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 |