web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Building my own Templa...
Power Apps
Unanswered

Building my own Template app with a custom theme

(0) ShareShare
ReportReport
Posted on by Push 70

I have tried to build my own Template App (Canvas) where I have my own custom Spinner, Header Component and a footer component. The 3 mentioned  things work fine. I can put them on new screens and everything works as it should.

I have now tried to apply a Custom Theme in the App onStart property.
Here is the code:

 

// My Theme
// 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: gblAppColors.White,
 DisabledColor: gblAppColors.GrayMedium,
 DisabledFill: gblAppColors.GrayLight,
 DisabledSelectionColor: gblAppColors.GrayMedium,
 DisabledSelectionFill: gblAppColors.GrayMedium,
 FalseFill: gblAppColors.GrayMediumDark,
 FalseHoverFill: gblAppColors.GrayDark,
 Fill: gblAppColors.Green,
 FocusedBorderColor: gblAppColors.White,
 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
 }
 }
);

 

 

However. After i Run OnStart, save and Publish my app i cant get my new app components to take the custom feel in use.
I tried putting a button and a combobox into a new screen and they still show up with Default values. The Font and fontSize is default too.

Is there something else that i am missing?

 

 

 

 

Categories:
Building Power Apps
I have the same question (0)
  • RogierE Profile Picture
    RogierE 875 Moderator on at

    The OnStart is not part of your Component Libray.

    If you would want to apply a custom theme, you should add the above code to the OnStart of your target App, not to your Component Library

     

    Please like the reply and/or accept it as the solution if the answer is what you were looking for.

  • Push Profile Picture
    Push 70 on at

    The above code is in my App OnStart Property. i just cant get it to work.

    I dont get any errors, when i run the on start, save nothing happens.

    When i try adding a new button, a new screen or anything else it just gives me the "standard", not the one i defined and want to use.
    Thas is why i am asking is there a step that i missed??

  • Verified answer
    RogierE Profile Picture
    RogierE 875 Moderator on at

    I guess I know what’s wrong, and this is why I didn’t understand at first. I fear you are mixing the classic and modern way of applying themes:

    - modern: switch to modern controls in your settings, apply a modern theme and these will automatically apply to any control in your app

    - classic: add variables to your OnStart for color, font, etc. And manually apply them to any new control you add by using those variables in the color and font properties. 

    If I understand you right, you are using the classic way to apply a theme, but expect a modern effect. 

    I can already understand that you would find the classic way cumbersome. That is why they designed the modern way. But as far as I know, modern themes do not support custom themes. 

    what you could do though, and that was part of my confusion, is create a component gallery with all of your template applied. And then use the pre formatted controls in your template library. 

    Please like the reply AND accept it as the solution if the answer is what you were looking for.
    (to help me grow in community rank AND help others find the solution)

  • Push Profile Picture
    Push 70 on at

    Ok. Thank you for explaining. I will try out to turn Modern on and see if this helps out. i really do not like the "Standard" themes at all so i was trying to build a slightly different one and then also add a "DarkMode" option to it. But i got stuck in the code not working.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 793 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 333 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans