cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Alice23
Helper II
Helper II

Change colour of DatePicker

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

 

10 REPLIES 10
akandis
Advocate II
Advocate II

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
Memorable Member
Memorable Member

Hi @Alice23 

You can change via IconBackground see the screenshot 

 

Capturedate.PNG

Thank you
If this post helps, then please consider Accept it as the solution to help the others and consider giving it a "Thumbs Up."
Nogueira1306
Community Champion
Community Champion

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!

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

Ramole
Memorable Member
Memorable Member

@Alice23 

 

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

Thank you
If this post helps, then please consider Accept it as the solution to help the others and consider giving it a "Thumbs Up."

@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-ca...

 

Let me know if it's helpful for you.

 
 
Radhika22Navkar
Frequent Visitor

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
Memorable Member
Memorable Member

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

 

Thank you
If this post helps, then please consider Accept it as the solution to help the others and consider giving it a "Thumbs Up."
bharti_amar
New Member

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.

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

secondImage

Power Apps Community Call

Please join us on Wednesday, October 20th, at 8a PDT. Come and learn from our amazing speakers!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Top Kudoed Authors
Users online (1,493)