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 Theme
• Using Free Online Tools To Help Build A Color Palette
• Adding App Colors To A Power Apps Custom Theme
• Selecting Fonts & Sizes For A Custom Theme
• Using The Power Apps Custom Fonts Sample App To Pick A Font
• Adding Fonts & Font Sizes To A Power Apps Custom Theme
• Picking Icons For A Custom Theme
• Adding Icons To A Power Apps Custom Theme
• Defining Default Control Styles For A Custom Theme
• Defining Power Apps Controls Styles
• Full Custom Theme Code Block For App OnStart
• Using 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:

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") } );Code language: JavaScript (javascript)

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.Primary1Code language: CSS (css)

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, VerdanaCode language: PHP (php)

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 RomanCode language: PHP (php)

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 } } )Code language: CSS (css)

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

gblAppFonts.HeadingCode language: CSS (css)

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.TitleCode language: CSS (css)

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:

• Fluent UI
• Font Awesome
• Material Design
• Bootstrap

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" } )Code language: CSS (css)

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

gblAppIcons.CheckmarkCode language: CSS (css)

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 } );Code language: CSS (css)

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 */ } )Code language: JavaScript (javascript)

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 */ } )Code language: JavaScript (javascript)

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!

Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE

Enter your email address

Sign Me Up

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.