Create A Power Apps Custom Theme – Colors, Fonts, Icons & Controls

Create A Power Apps Custom Theme – Colors, Fonts, Icons & Controls

Creating a custom theme for your Power Apps project is important. The colors, fonts, icons and styles you use for controls (text inputs, dropdowns, date-pickers, etc.) define the unique look-and-feel of an app. Power Apps does not have a feature to generate a custom theme so I have come up a system that I use in my own apps. In this article I will show you how to build a Power Apps custom theme.

Table Of Contents:
• Choosing A Color Palette For A Custom ThemeUsing Free Online Tools To Help Build A Color PaletteAdding App Colors To A Power Apps Custom ThemeSelecting Fonts & Sizes For A Custom ThemeUsing The Power Apps Custom Fonts Sample App To Pick A FontAdding Fonts & Font Sizes To A Power Apps Custom ThemePicking Icons For A Custom ThemeAdding Icons To A Power Apps Custom ThemeDefining Default Control Styles For A Custom ThemeDefining Power Apps Controls StylesFull Custom Theme Code Block For App OnStartUsing A Pre-Built Branding Template App




Choosing A Color Palette For A Custom Theme

A color palette defines which colors will be used in the Power Apps custom theme. The colors in my palette are organized into 3 categories which I learned from the book Refactoring UI by Adam Wathan and Steve Schoger.

  • Primary Colors – the main colors that determine the look and feel of the app. Most companies like these to be their brand colors. We can usually find them in the company’s style guide. Or if you need to come up with your own you can the websites Coolors or Color Hunt to help select a set of primary colors.
  • Accent Colors – other colors are necessary to tell the user things about the app. In this palette green indicates success, red means danger, yellow is a warning and cyan is for information.
  • Neutral Colors – there are often many grays in an app’s interface. I recommend you pick 5 grays or more to ensure you have enough choices. Also include black and white in this category along with the greys.



I like to visualize my color palette like this:

power apps custom theme colors



Using Free Online Tools To Help Build A Color Palette

When I need to come up with my own colors palette for an app I there are two free online tools I use. The 1st tool called Coolors randomly generates a set of 5 colors. I keep re-generating the colors until I find one that I like and then I lock it into my palette. Then when I generate the next set of colors I am only presented with colors that go well with my locked in color. I continue to repeat the cycle of locking in colors and regenerating until I have my palette.



The 2nd tool I use called Color Hunt is an open collection of palettes created by professional designers. I can choose the look and feel I want using the left-side menu (dark, light, warm, cold, pastel, etc.) and then I am presented with the matching color palettes. Each palette has the number of likes beside it to show the color palette’s popularity.



Adding App Colors To A Power Apps Custom Theme

To create the color palette in Power Apps write this code in the OnStart property of the app.

Set(
    gblAppColors,
    {
        // Primary Colors
        Primary1: ColorValue("#30475E"),      // Navy Blue
        Primary2: ColorValue("#F05454"),      // Light Red
        Primary3: ColorValue("#222831"),      // Dark Blue
        Primary4: ColorValue("#DDDDDD"),      // Light Gray

        // 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")
    }
);


Then to use a color in our palette (e.g. Primary1) we some code like this. We always choose a color from the palette rather than use the RGBA or Hex values to ensure we remain consistent. Another advantage is if we ever want to swap the primary color for another we can do it with one simple code change.

gblAppColors.Primary1




Selecting Fonts & Sizes For A Custom Theme

A custom theme should include fonts and a set of pre-defined fonts sizes. Power Apps comes with 15 standards fonts:

Arial, Courier New, Dancing Script, Georgia, Great Vibes, Lato, Lato Black, Lato Hairline, Lato Light, Open Sans, Open Sans Condensed, Patrick Hand, Segoe UI, Verdana



We can also use custom fonts that are not listed in Power Apps Studio. Custom fonts are not guaranteed to display properly across all devices and web browsers so it is best to test them on any devices you plan to use. The following list of fonts are generally regarded as safe.

Arial, Arial Black, Avant Garde, Bookman, Comic Sans MS, Courier, Garamond, Georgia, Helvetica, Impact, Lucida Console, Lucida Sans Unicode, Palatino, Tahoma, Times New Roman



It is common for apps to have both a heading font and a body font. The heading font for our sample app is Roboto and and the body font is Lato. I like to use typ.io to help me find fonts that go together.


Choosing font sizes is as important as the fonts themselves. Without a set of pre-defined sizes I find that I spend too much time thinking about what size to use and make choices that are inconsistent with the rest of the app. At minimum I choose 5 font sizes: tiny, regular, subtitle, title and huge.




Using The Power Apps Custom Fonts Sample App To Pick A Font

When I am trying to decide which font to use I look at this sample app I built with 177 custom fonts. You can download the msapp file from the Power Apps PNP repo for for free.




Adding Fonts & Font Sizes To A Power Apps Custom Theme

To include fonts and font sizes in our Power Apps custom theme write this code in the OnStart property of the app.

Set(
    gblAppFonts,
    {
        Heading: "Roboto, Open Sans",
        Body: "Lato",
        Size: {
            Tiny: 10,
            Regular: 12,
            Subtitle: 14,
            Title: 20,
            Huge: 28
        }
    }
)



If we wanted to apply the Roboto font to a label we would use this code in the Font property.

gblAppFonts.Heading



Then to make the label’s font size the correct size for a title we can put this code in the Size property.

gblAppFonts.Size.Title




Picking Icons For A Custom Theme

Choosing icons for a custom theme is optional but they really make app stand-out visually. We can go beyond the set of standard Power Apps icons and introduce our own by using SVG images. The most popular icon sets are:



Pen Warner has compiled all of these icon sets and more into a single Power Apps app holding over 45,000 icons which you can download for free. I highly recommend this solution to anyone who wants more icons.



Adding Icons To A Power Apps Custom Theme

The following icons were chosen from the Power Apps Fluent UI icon set found on my own website.



We can define the set of icons in the custom theme by writing this code in the app’s OnStart property.

Set(
    gblAppIcons,
    {
        Checklist: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M256%200h1536v2048H256V0zm1408%201920V128H384v1792h1280zM1536%20512v128h-512V512h512zm0%20512v128h-512v-128h512zm0%20512v128h-512v-128h512zM941%20429L704%20666%20531%20493l90-90%2083%2083%20147-147%2090%2090zm0%20512l-237%20237-173-173%2090-90%2083%2083%20147-147%2090%2090zm0%20512l-237%20237-173-173%2090-90%2083%2083%20147-147%2090%2090z%27%20fill%3D%27%230078d4%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
        Checkmark: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1024%200q141%200%20272%2036t244%20104%20207%20160%20161%20207%20103%20245%2037%20272q0%20141-36%20272t-104%20244-160%20207-207%20161-245%20103-272%2037q-141%200-272-36t-244-104-207-160-161-207-103-245-37-272q0-141%2036-272t104-244%20160-207%20207-161T752%2037t272-37zm603%20685l-136-136-659%20659-275-275-136%20136%20411%20411%20795-795z%27%20fill%3D%27%2300ad56%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
        Pylon: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1920%201920v128H128v-128h270l96-384h802l-32-128H526l64-256h610l-32-128H622l224-896h356l448%201792h270z%27%20fill%3D%27%23ca5010%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
        Flashlight: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M2048%20384v1152h-475l-256-256H0V640h1317l256-256h475zM128%201152h1152V768H128v384zm1499%20256h37V512h-37l-219%20219v458l219%20219zm293-896h-128v896h128V512zm-832%20384q26%200%2045%2019t19%2045q0%2026-19%2045t-45%2019q-26%200-45-19t-19-45q0-26%2019-45t45-19z%27%20fill%3D%27%2369797e%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E"
    }
)



To use the checkmark icon, simply add this code the Image property of an Image control.

gblAppIcons.Checkmark


Defining Default Control Styles For A Custom Theme

Now that we have a color palette, fonts, sizes and icons for our custom theme the next step is to choose a default value for every property that could appear inside a control. A control is any element in an app a user can interact with: a text input, a dropdown, a button, etc. Figuring out the defaults in advance makes it easier to maintain a consistent style in the app.



Write this code in the OnStart property of the app.

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




Defining Power Apps Controls Styles

Each control must have its style applied manually. The pre-work we’ve done will make it go faster, but its still tedious to do the 1st time. Fortunately, the next time we need a custom theme we can work from the same template. To cut-down on repetition I like to have a copy of each control saved on a special screen in the app that is only accessible in studio-mode.

For each control type, define the style as shown below and place this code in the OnStart property of the app.

Set(
    varAppStyles,
    {

    // COMBO BOX (all default styles)
    ComboBox: {
        BorderColor: gblAppDefaults.BorderColor,
        ChevronBackground: gblAppDefaults.ChevronBackground,
        ChevronDisabledBackground: gblAppDefaults.ChevronDisabledBackground,
        ChevronDisabledFill: gblAppDefaults.ChevronDisabledFill,
        ChevronFill: gblAppDefaults.ChevronFill,
        ChevronHoverBackground: gblAppDefaults.ChevronHoverBackground,
        ChevronHoverFill: gblAppDefaults.ChevronHoverFill,
        Color: gblAppDefaults.Color,
        DisabledBorderColor: gblAppDefaults.DisabledBorderColor,
        DisabledColor: gblAppDefaults.DisabledColor,
        DisabledFill: gblAppDefaults.DisabledFill,
        Fill: gblAppDefaults.Fill,
        Font: gblAppDefaults.Font,
        HoverBorderColor: gblAppDefaults.HoverBorderColor,
        HoverColor: gblAppDefaults.HoverColor,
        HoverFill: gblAppDefaults.HoverFill,
        PressedBorderColor: gblAppDefaults.PressedBorderColor,
        PressedColor: gblAppDefaults.PressedColor,
        PressedFill: gblAppDefaults.PressedFill,
        SelectionFill: gblAppDefaults.SelectionFill,
        Size: gblAppDefaults.Size
    },

    // BUTTON (default styles + overrides)
    Button: {
        BorderColor: gblAppColors.Primary2,
        DisabledBorderColor: gblAppDefaults.DisabledBorderColor,
        DisabledColor: gblAppDefaults.DisabledColor,
        DisabledFill: gblAppDefaults.DisabledFill,
        Fill: gblAppColors.Primary2,
        FocusedBorderColor: gblAppDefaults.FocusedBorderColor,
        Font: gblAppDefaults.Font,
        FontWeight: gblAppDefaults.FontWeight,
        HoverBorderColor: gblAppColors.Primary2,
        HoverColor: gblAppDefaults.HoverColor,
        HoverFill: ColorFade(gblAppColors.Primary2, -10%),
        PressedBorderColor: gblAppColors.Primary2,
        PressedColor: gblAppDefaults.PressedColor,
        PressedFill: ColorFade(gblAppColors.Primary2, -30%),
        RadiusBottomLeft: gblAppDefaults.RadiusBottomLeft,
        RadiusBottomRight: gblAppDefaults.RadiusBottomRight,
        RadiusTopLeft: gblAppDefaults.RadiusTopLeft,
        RadiusTopRight: gblAppDefaults.RadiusTopRight,
        Size: gblAppDefaults.Size
    }


    /*
        Add the rest of the controls here
    */

   }
)




Full Custom Theme Code Block For App OnStart

Once the custom theme is fully-completed the code block in the app’s OnStart property should look like this:

// COLOR PALETTE
Set(
    gblAppColors,
    {
        // Primary Colors
        Primary1: ColorValue("#30475E"),      // Navy Blue
        Primary2: ColorValue("#F05454"),      // Light Red
        Primary3: ColorValue("#222831"),      // Dark Blue
        Primary4: ColorValue("#DDDDDD"),      // Light Gray

        // 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")
    }
);
// FONTS & SIZES
Set(
    gblAppFonts,
    {
        Heading: "Roboto, Open Sans",
        Body: "Lato",
        Size: {
            Tiny: 10,
            Regular: 12,
            Subtitle: 14,
            Title: 20,
            Huge: 28
        }
    }
)
// ICONS
Set(
    gblAppIcons,
    {
        Checklist: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M256%200h1536v2048H256V0zm1408%201920V128H384v1792h1280zM1536%20512v128h-512V512h512zm0%20512v128h-512v-128h512zm0%20512v128h-512v-128h512zM941%20429L704%20666%20531%20493l90-90%2083%2083%20147-147%2090%2090zm0%20512l-237%20237-173-173%2090-90%2083%2083%20147-147%2090%2090zm0%20512l-237%20237-173-173%2090-90%2083%2083%20147-147%2090%2090z%27%20fill%3D%27%230078d4%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
        Checkmark: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1024%200q141%200%20272%2036t244%20104%20207%20160%20161%20207%20103%20245%2037%20272q0%20141-36%20272t-104%20244-160%20207-207%20161-245%20103-272%2037q-141%200-272-36t-244-104-207-160-161-207-103-245-37-272q0-141%2036-272t104-244%20160-207%20207-161T752%2037t272-37zm603%20685l-136-136-659%20659-275-275-136%20136%20411%20411%20795-795z%27%20fill%3D%27%2300ad56%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
        Pylon: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1920%201920v128H128v-128h270l96-384h802l-32-128H526l64-256h610l-32-128H622l224-896h356l448%201792h270z%27%20fill%3D%27%23ca5010%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",
        Flashlight: "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M2048%20384v1152h-475l-256-256H0V640h1317l256-256h475zM128%201152h1152V768H128v384zm1499%20256h37V512h-37l-219%20219v458l219%20219zm293-896h-128v896h128V512zm-832%20384q26%200%2045%2019t19%2045q0%2026-19%2045t-45%2019q-26%200-45-19t-19-45q0-26%2019-45t45-19z%27%20fill%3D%27%2369797e%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E"
    }
)
// DEFAULT STYLES
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
    }
);
//CONTROL STYLES
Set(
    varAppStyles,
    {
    // COMBO BOX (all default styles)
    ComboBox: {
        BorderColor: gblAppDefaults.BorderColor,
        ChevronBackground: gblAppDefaults.ChevronBackground,
        ChevronDisabledBackground: gblAppDefaults.ChevronDisabledBackground,
        ChevronDisabledFill: gblAppDefaults.ChevronDisabledFill,
        ChevronFill: gblAppDefaults.ChevronFill,
        ChevronHoverBackground: gblAppDefaults.ChevronHoverBackground,
        ChevronHoverFill: gblAppDefaults.ChevronHoverFill,
        Color: gblAppDefaults.Color,
        DisabledBorderColor: gblAppDefaults.DisabledBorderColor,
        DisabledColor: gblAppDefaults.DisabledColor,
        DisabledFill: gblAppDefaults.DisabledFill,
        Fill: gblAppDefaults.Fill,
        Font: gblAppDefaults.Font,
        HoverBorderColor: gblAppDefaults.HoverBorderColor,
        HoverColor: gblAppDefaults.HoverColor,
        HoverFill: gblAppDefaults.HoverFill,
        PressedBorderColor: gblAppDefaults.PressedBorderColor,
        PressedColor: gblAppDefaults.PressedColor,
        PressedFill: gblAppDefaults.PressedFill,
        SelectionFill: gblAppDefaults.SelectionFill,
        Size: gblAppDefaults.Size
    },
    // BUTTON (default styles + overrides)
    Button: {
        BorderColor: gblAppColors.Primary2,
        DisabledBorderColor: gblAppDefaults.DisabledBorderColor,
        DisabledColor: gblAppDefaults.DisabledColor,
        DisabledFill: gblAppDefaults.DisabledFill,
        Fill: gblAppColors.Primary2,
        FocusedBorderColor: gblAppDefaults.FocusedBorderColor,
        Font: gblAppDefaults.Font,
        FontWeight: gblAppDefaults.FontWeight,
        HoverBorderColor: gblAppColors.Primary2,
        HoverColor: gblAppDefaults.HoverColor,
        HoverFill: ColorFade(gblAppColors.Primary2, -10%),
        PressedBorderColor: gblAppColors.Primary2,
        PressedColor: gblAppDefaults.PressedColor,
        PressedFill: ColorFade(gblAppColors.Primary2, -30%),
        RadiusBottomLeft: gblAppDefaults.RadiusBottomLeft,
        RadiusBottomRight: gblAppDefaults.RadiusBottomRight,
        RadiusTopLeft: gblAppDefaults.RadiusTopLeft,
        RadiusTopRight: gblAppDefaults.RadiusTopRight,
        Size: gblAppDefaults.Size
    }
    /*
        Add the rest of the controls here
    */
   }
)




Using A Pre-Built Branding Template App

Building your own Power Apps custom theme is a lot of work. Sancho Harker has created a free Branding Template App to make custom themes easy.


You can the Branding Template App to quickly generate themes and preview how they look in your app. All you have to do is choose 3 primary colors and it will apply them to the app as shown below. We can also override the auto-generated themes and manually define the style for each property of a control type. Both methods are possible here.




The Branding Template can hold several different themes and change them on-the-fly. This gives us the ability to build a light-mode theme, a dark-mode theme, a high-contrast theme and include them all in the same app. It also generates new controls with the theme already applied to them. This feature is amazing!





Questions?

If you have any questions about Create A Power Apps Custom Theme – Colors, Fonts, Icons & Controls 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.

Matthew Devaney

Subscribe
Notify of
guest

40 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Gus Chessman
Gus Chessman
2 years ago

Nice.
Its painful not doing this one time.
Tx for the icon sets and free templates.

Suresh
Suresh
2 years ago

Dear Mathew,

Really useful tips for Custom Themes for PowerApps. Thank You.

James
James
2 years ago

Thanks for interesting article. It may be some time before I ret-con our existing apps, but this looks like an interesting way to get some sort of style set on new apps.

Just a small editorial point: where varAppStyles is set, there should be a curly bracket { before ComboBox. This will allow the app to use the settings.

Michael
Michael
2 years ago

Thank You so much for this valuable and comprehensive post! No one who is seriously developing with Power Apps should do it any other way!

Arild Aarnes
2 years ago

Thanks for taking the time to put this stuff together.
A great timesaver for the rest of us 🙂

Mark
Mark
2 years ago

Hey Matt – thanks for the write-up.

Can you think of any way to pre-configure native controls in an app template etc such that when my citizen devs drag a control it’s already wired up with the style variables? We can go the route of a design-time template screen but the native option is nice too.

Many thanks!

Last edited 2 years ago by Mark
Kelly Kinney
Kelly Kinney
2 years ago

Thanks for sharing your knowledge. Great blog!

Jon Russell
2 years ago

The Fluent UI Power BI dashboard is great !

Nicola Lambert
Nicola Lambert
2 years ago

Matthew, thanks for setting this out so clearly. I currently use a Theme file – colours only (in a SharePoint list) and import that on start up as a collection. Are there performance benefits to creating the values as variables in App OnStart (as opposed to storing the values in SharePoint and bringing them in as a collection)?

Hannie
Hannie
2 years ago

Thank You so much for sharing all useful information. Create A Power Apps Custom Theme – Colors, Fonts, Icons & Controls this information is very helpful for me! I found some intresting information about reaction time test, here you check your reaction time with this test.

Pradipta
Pradipta
2 years ago

Matthew is it possible to set Default design for all control from App Start ? so that when a control dragged to the screen all default design set for the controls set autmatically.

Jamie
Jamie
1 year ago

Is there risk of negative impact to app performance with adding these to OnStart?

Daniela
Daniela
1 year ago

Thank you for this article
Setting a custom theme in Power Apps for all the controls and their properties is a nightmare but pays off when a change is needed. I hoped for an easier way to do it as I saw the article “Branding Template App”, but unfortunately there is not yet.
Let’s hope for a custom-pre-build-theme-template in Power Apps.

Sandy
1 year ago

Thanks for this article Matthew. I’m just starting my theme journey and also came across this Microsoft article on PowerApps themes for canvas apps – https://learn.microsoft.com/en-us/power-platform/guidance/coe/theming-components. Is there a reason themes aren’t as useful / effective when using the Theme Gallery App mentioned in the article?
Having said this, I’m having trouble trying to find said “Theme Gallery App”….

Trevor Burton
Trevor Burton
1 year ago

Hi Matthew,

This looks really cool. It would save me a whole load of time but it’s not working for me at the moment.

I am guessing that varAppStyles is a special variable that automagically populates control defaults – otherwise I don’t understand how new controls know where to get their properties from.

Here’s my problem …

  • I’ve created a blank screen, posted your code in App.OnStart, run the code, but when I add a new button, the styling is still the plain old PowerApps default styling. For example, the button is coloured blue rather than glbAppColors.Primary2 (light red) as defined in Fill: gblAppColors.Primary2 in the Button record of varAppStyles.
  • The variables in your code have been created and are all visible in the PowerApps Studio.
  • I haven’t changed any names of variables, just pasted your code (with two missing semicolon typos I fixed).
  • I am using PowerApps authoring version 3.23015.14

Any ideas?

Syrine Abouda
Syrine Abouda
1 year ago

Hi Matthew,
First Thank you for this article, I have just started creating a power app for my 6 months internship, and I wanted to make sure that my app has a Custom Theme so that when a client wants to make a change in a specific color or font, it is easier to just change the code.
When I took the code you provided and I copied it into the OnStart section of the app( and I corrected the missing ‘;’ and wrote “Color.Transparent” instead of “Transparent” cause I have the newer version of power apps which requires me to write “Color.Transparent” )
After I did all that, the code appears to have no mistakes, yet after I run the app, the code is not working, the button and controllers are still in the old default theme.

Selin
Selin
1 year ago

Hi matthew,
i have been trying to use this code for multiple times. As soon as I put it in the On start field it works but as soon as I save and close the App and return back everything is just black, i have the Same issue with the solution provided by IAmManCat (Sancho Harker).
Do you have any Idea how i can fix this? I would be greatful for any Advice.

Laura Webb
Laura Webb
9 months ago

Hi Matthew, I was wondering, how exactly would you use Sancho’s app?

As in, would you upload it into an app you’re building as the backend settings pages so the user can make their own changes?

Would you add it, so the developer can use the capability of having the theme already applied to new controls?

Would you just have it so you can set a theme with the 3 colours and then copy and paste the app.onstart code to the new app?

Or would you just use it for inspiration and colour ideas?

Last edited 9 months ago by Laura Webb
Daniel
Daniel
8 months ago

Hi Mathew, Great Content!

It’s been almost 2 years since you created this post. Is this still the easiest way to use a custom theme, or are there other alternatives?

Do you know if Microsoft intends to solve this in the near future? It really is a pain to have to do it this way.

Thanks for sharing.

XLZ
XLZ
2 months ago

Hi Matthew,

Can we use your method to customize modern control theme?

Thanks,
XZ