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
17 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Gus Chessman
Gus Chessman
2 months ago

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

Suresh
Suresh
2 months ago

Dear Mathew,

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

James
James
2 months 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 months 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 months ago

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

Mark
Mark
2 months 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 months ago by Mark
Kelly Kinney
Kelly Kinney
1 month ago

Thanks for sharing your knowledge. Great blog!

Jon Russell
1 month ago

The Fluent UI Power BI dashboard is great !

Nicola Lambert
Nicola Lambert
22 days 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)?