Power Apps App Theming Guidelines

Table Of Contents:
• Creating An App Theme
• Theming Variables Sample Code
• Branding Template

Creating An App Theme

Define an app’s theme in order to achieve a consistent style throughout all screens.  Setup theming variables in the app’s OnStart property and manually apply them to each control type.

Keep a copy of each styled control on a hidden screen.  It is more efficient to re-use controls instead of setting up a new control with a style every time.

Theming Variables Sample Code

Use this code in the OnStart property of an app to define its theme.

// App Color Palette
Set(
    gblAppColors,
    {
        // Primary Colors
        Primary1: ColorValue("#30475E"),
        Primary2: ColorValue("#F05454"),
        Primary3: ColorValue("#222831"),
        Primary4: ColorValue("#DDDDDD"),

        
        // Accent Colors
        Black: ColorValue("#000000"),
        Cyan: ColorValue("#17A2B8"),
        Green: ColorValue("#28A745"),
        Orange: ColorValue("#FD7E14"),
        Red: ColorValue("#DC3545"),
        Teal: ColorValue("#20C997"),
        White: ColorValue("#FFFFFF"),
        Yellow: ColorValue("#FFC107"),
        
        // Neutral Colors
        GrayDark: ColorValue("#484644"),
        GrayMediumDark: ColorValue("#8A8886"),
        GrayMedium: ColorValue("#B3b0AD"),
        GrayMediumLight: ColorValue("#D2D0CE"),
        GrayLight: ColorValue("#F3F2F1")
    }
);

// App Fonts & Sizes
Set(
    gblAppFonts,
    {
        Heading: "Roboto, Open Sans",
        Body: "Lato",
        Size: {
            Tiny: 10,
            Regular: 13,
            Subtitle: 16,
            Title: 20,
            Huge: 28
        }
    }
)

// App Icons
Set(
   gblAppIcons,
    {
       // SVG icon code is stored in an ‘Import from Excel’ table named AppIcons
       Checklist: LookUp(AppIcons, Name="Checklist", DataURI),
       Checkmark: LookUp(AppIcons, Name="Checkmark", DataURI)
   }
);

// App Default Control Theme
Set(
    gblAppDefaults,
    {
        BorderColor: gblAppColors.GrayMedium,
        BorderStyle: BorderStyle.None,
        BorderThickness: 2,
        CalendarHeaderFill: ColorFade(gblAppColors.Primary1, -30%),
        CheckboxBorderColor: gblAppColors.GrayMediumDark,
        CheckmarkFill: gblAppColors.Primary2,
        ChevronBackground: gblAppColors.White,
        ChevronDisabledBackground: gblAppColors.GrayLight,
        ChevronDisabledFill: gblAppColors.GrayMedium,
        ChevronFill: gblAppColors.GrayDark,
        ChevronHoverBackground: gblAppColors.GrayMediumLight,
        ChevronHoverFill: gblAppColors.GrayDark,
        Color: gblAppColors.Black,
        DisabledBorderColor: Transparent,
        DisabledColor: gblAppColors.GrayMedium,
        DisabledFill: gblAppColors.GrayLight,
        DisabledSelectionColor: gblAppColors.GrayMedium,
        DisabledSelectionFill: gblAppColors.GrayMedium,
        FalseFill: gblAppColors.GrayMediumDark,
        FalseHoverFill: gblAppColors.GrayDark,
        Fill: gblAppColors.White,
        FocusedBorderColor: Transparent,
        FocusedBorderThickness: 4,
        Font: Font.'Segoe UI',
        FontWeight: FontWeight.Semibold,
        HandleActiveFill: gblAppColors.White,
        HandleFill: gblAppColors.White,
        HandleHoverFill: gblAppColors.White,
        Height: 40,
        HoverBorderColor: ColorFade(gblAppColors.Primary1, -30%),
        HoverColor: gblAppColors.White,
        HoverDateFill: gblAppColors.GrayMedium,
        HoverFill: ColorFade(gblAppColors.Primary1, -10%),
        IconBackground: gblAppColors.Primary1,
        PaddingBottom: 5,
        PaddingLeft: 12,
        PaddingRight: 5,
        PaddingTop: 5,
        PressedBorderColor: gblAppColors.Primary1,
        PressedColor: gblAppColors.White,
        PressedFill: ColorFade(gblAppColors.Primary1, -30%),
        RadioBorderColor: gblAppColors.Primary1,
        RadioSelectionFill: gblAppColors.Primary1,
        RadiusBottomLeft: 0,
        RadiusBottomRight: 0,
        RadiusTopLeft: 0,
        RadiusTopRight: 0,
        RailFill: gblAppColors.GrayMedium,
        RailHoverFill: ColorFade(gblAppColors.Primary1, 80%),
        RatingFill: gblAppColors.Primary2,
        SelectedDateFill: gblAppColors.Primary1,
        SelectionFill: gblAppColors.Primary1,
        Size: gblAppFonts.Size.Regular,
        TrueFill: gblAppColors.Primary1,
        TrueHoverFill: ColorFade(gblAppColors.Primary1, -30%),
        ValueFill: gblAppColors.GrayMediumDark,
        ValueHoverFill: gblAppColors.Primary1
    }
);

Store any SVG code for custom app icons in a spreadsheet. Then Use the Import From Excel feature to add the spreadsheet to the app

Branding Template

Another option is to use a pre-built-theming template.  The Power Apps Branding Template by Sancho Harker is the best solution available for these reasons:

• Quick to setup – choose 3 colors and the theme will automatically create a theme based on
• Fully-customizable – override any control property with a custom value if the default style is not desired
• Applies to new controls – any new control inserted into the app will use the theme colors and properties
• No premium license required – theming information is stored in the msapp itself whereas the Center Of Excellence Theme Editor requires Dataverse
  
  

Questions?

If you have any questions about Power Apps Standards: App Settings please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.