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

Announcements

Welcome to the Power Platform Communities
The Next Big Bite | Aussie Classics & Starting Small with Clay Wesener | EP04
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Change colour of DateP...
Power Apps
Suggested Answer

Change colour of DatePicker

(1) ShareShare
ReportReport
Posted on by Alice23 102

Hello !

How can I change the colour of the DatePicker using RGBA code?

I could change this:

Alice23_0-1630656213694.png

But when I select the button, to see the date, another colour is shown (purple, as in picture below) and I want to be able to see blue instead of purple

Alice23_1-1630656295100.png

 

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

    Hello @Alice23 

     

    Now the only way to change the color of the Datepicker is changing the theme.

    akandis_0-1630656846237.png

     

    ***

    Please click Accept as Solution if the answer is helpful.

     

  • Ramole Profile Picture
    Ramole Super User 2024 Season 1 on at

    Hi @Alice23 

    You can change via IconBackground see the screenshot 

     

    Capturedate.PNG

  • Nogueira1306 Profile Picture
    Nogueira1306 7,390 Super User 2024 Season 1 on at

    Hey!

     

    Change this:

     

    Nogueira1306_0-1630657259910.png

     

     

    If you need additional help please tag me in your reply and please like my reply.
    If my reply provided you with a solution, pleased mark it as a solution ✔️!

    Best regards,
    Gonçalo Nogueira

    Check my LinkedIn!

  • Alice23 Profile Picture
    Alice23 102 on at

    @akandis thank for your respond. Is it possible to create a theme and using the RGBA I want?

  • Ramole Profile Picture
    Ramole Super User 2024 Season 1 on at

    @Alice23 

     

    For creating your own theme check this post out will help you make your own Simplify Your PowerApps Branding With A Theme Template 

  • akandis Profile Picture
    akandis on at

    @Alice23 you can use the following app to create a super custom theme but I do not know if you can change the color that you want. But in my understanding yes you can.

     

    https://github.com/microsoft/powerapps-tools/tree/master/Tools#theme-editor

     

    Also I share with you a link where explain the same thing that you want to do.

    https://devscopeninjas.azurewebsites.net/2021/02/10/tips-and-tricks-power-apps-change-date-picker-calendar-colors/

     

    Let me know if it's helpful for you.

     
     
  • Radhika22Navkar Profile Picture
    Radhika22Navkar 8 on at

    U can Change colour of DatePicker, for that u need to change the property of DatePicker as Colour and then In the formula bar u can add the RGBA colours as per your choice.

  • Ramole Profile Picture
    Ramole Super User 2024 Season 1 on at

    @Alice23 

     

    Here a code I have been using to create my own colors from 

     

    // Set Dark Color Scheme
 Concurrent(
 Set( ColorPrimary1, RGBA( 70, 80, 90, 1 ) ),
 Set( ColorPrimary2, RGBA( 8, 40, 58, 1 ) ),
 Set( ColorPrimary3, RGBA( 0, 62, 89, 1 ) ),
 Set( ColorPrimary4, RGBA( 30, 33, 46, 1 ) ),
 Set( ColorPrimary5, RGBA( 0, 38, 54, 1 ) ),
 Set( ColorAccent1, RGBA( 147, 50, 8, 1 ) ),
 Set( ColorAccent2, RGBA( 81, 0, 99, 1 ) ),
 Set( ColorAccent3, RGBA( 73, 86, 0, 1 ) ),
 Set( ColorAccent4, RGBA( 74, 4, 65, 1 ) ),
 Set( ColorDisabled1, RGBA( 50, 50, 50, 1 ) ),
 Set( ColorDisabled2, RGBA( 100, 100, 100, 1 ) ),
 Set( ColorDisabled3, RGBA( 75, 75, 75, 1 ) ),
 Set( ColorReservedSuccess, RGBA( 141, 198, 63, 1 ) ),
 Set( ColorReservedWarning, RGBA( 252, 219, 2, 1 ) ),
 Set( ColorReservedError, RGBA( 246, 88, 16, 1 ) ),
 Set( ColorReservedCritical, RGBA( 237, 28, 36, 1 ) ),
 Set( ColorOverlay , RGBA( 0, 0, 0, 0.5 ) )
 ),
 // Set Light Color Scheme
 Concurrent(
 Set( ColorPrimary1, RGBA( 58, 40, 8, 1 ) ),
 Set( ColorPrimary2, RGBA( 255, 255, 255, 1 ) ),
 Set( ColorPrimary3, RGBA( 0, 162, 189, 1 ) ),
 Set( ColorPrimary4, RGBA( 238, 243, 246, 1 ) ),
 Set( ColorPrimary5, RGBA( 181, 198, 214, 1 ) ),
 Set( ColorAccent1, RGBA( 247, 150, 8, 1 ) ),
 Set( ColorAccent2, RGBA( 181, 0, 99, 1 ) ),
 Set( ColorAccent3, RGBA( 173, 186, 0, 1 ) ),
 Set( ColorAccent4, RGBA( 74, 4, 165, 1 ) ),
 Set( ColorDisabled1, RGBA( 170, 170, 170, 1 ) ),
 Set( ColorDisabled2, RGBA( 240, 240, 240, 1 ) ),
 Set( ColorDisabled3, RGBA( 200, 200, 200, 1 ) ),
 Set( ColorReservedSuccess, RGBA( 141, 198, 63, 1 ) ),
 Set( ColorReservedWarning, RGBA( 252, 219, 2, 1 ) ),
 Set( ColorReservedError, RGBA( 246, 88, 16, 1 ) ),
 Set( ColorReservedCritical, RGBA( 237, 28, 36, 1 ) ),
 Set( ColorOverlay , RGBA( 0, 0, 0, 0.5 ) )
 )
);
// Derived colors
Set( ColorAccent1Light, ColorFade(ColorAccent1,30%));
Set( ColorPrimary3Light, ColorFade(ColorPrimary3,30%));
Set( ColorPrimary3Dark, ColorFade(ColorPrimary3,-30%));
// Collection used in Components
ClearCollect( colStyleColors,
 {Key: "ColorPrimary1", Value: ColorPrimary1},
 {Key: "ColorPrimary2", Value: ColorPrimary2},
 {Key: "ColorPrimary3", Value: ColorPrimary3},
 {Key: "ColorPrimary3Light", Value: ColorPrimary3Light},
 {Key: "ColorPrimary3Dark", Value: ColorPrimary3Dark},
 {Key: "ColorPrimary4", Value: ColorPrimary4},
 {Key: "ColorPrimary5", Value: ColorPrimary5},
 {Key: "ColorAccent1", Value: ColorAccent1},
 {Key: "ColorAccent1Light", Value: ColorAccent1Light},
 {Key: "ColorAccent2", Value: ColorAccent2},
 {Key: "ColorAccent3", Value: ColorAccent3},
 {Key: "ColorAccent4", Value: ColorAccent4},
 {Key: "ColorDisabled1", Value: ColorDisabled1},
 {Key: "ColorDisabled2", Value: ColorDisabled2},
 {Key: "ColorDisabled3", Value: ColorDisabled3},
 {Key: "ColorOverlay", Value: ColorOverlay}
)

     

  • Community Power Platform Member Profile Picture
    Community Power Pla... Microsoft Employee on at

    Hi @Ramole 

    Unfortunately, you can only change the calendar theme using the 'Theme' Menu. There is no way to change it using the DatePicker properties.

     

    ***

    Please click Accept as Solution if the answer is helpful.

  • Ramole Profile Picture
    Ramole Super User 2024 Season 1 on at

    You can change but you have to build your own data picker or via component see here a sample

    https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Reusable-Revamped-Date-Picker-Control/td-p/503804  

     

     

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
The Next Big Bite | Aussie Classics & Starting Small with Clay Wesener | EP04

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 326 Most Valuable Professional

#2
11manish Profile Picture

11manish 168

#3
sannavajjala87 Profile Picture

sannavajjala87 75 Super User 2026 Season 1

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