cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Stylesheets

I'd love to be able to define and use a custom stylesheet. It would make styling a lot of similar elements much faster.

 

For example, if I have a list of cards that each has a Header, some text and an Icon, I can set a reference on each one to StyleSheet.Sheet2.Card.Header

StyleSheet.Sheet2.Card.Body

StyleSheet.Sheet2.Card.Icon

 

Right now, I'm having to go through each one, and manually refer each element of the style to a "source" element in the page. eg:

PaddingLeft = Card1Header.PaddingLeft

... and so forth for every style element of every item of every page.

Status: Planned

We are working to expand upon options for theming. This may, or may not, include integration with CSS files, but it will facilitate your theming goals.

 

Thank you for your patience as we evolve the product,

Audrie

Comments
Level 10

@fbxiii,

Can I make a recommendation?

 

If you are currently using

 

First(Filter(Styles,Style_Name="Corporate Blue")).Hex_Colour

or

LookUp(Styles,Style_Name="Corporate Blue",Hex_Colour)

for every individual control that you want set to a color, I would like to recommend setting one control to that color, and then referencing that control for everything else so you won't need to use the First(Filter()) or LookUp(). This will avoid a scenario in which you rename one of the styles and you won't need to go back and revise that for everything.

 

 

Here's an example of what I'm talking about:

 

Step 1: 

Create your table of themes/styles/colors. You already have yours in a table already; I store my colors in the app.

 

 

ClearCollect(colorsettings,
    Table(
        {label: "Light",
            default: RGBA(100, 118, 132, 1),
            selected: RGBA(0, 134, 208, 1),
            background: RGBA(255, 255, 255, 1),
            text: RGBA(47, 41, 43, 1),
            onblack: RGBA(255, 255, 255, 1),
            secondary: RGBA(130, 144, 156, 1)
        },

        {label: "Dark",
            default: RGBA(100, 118, 132, 1),
            selected: RGBA(0, 134, 208, 1),
            background: RGBA(51, 51, 51, 1),
            text: RGBA(255, 255, 255, 1),
            onblack: RGBA(255, 255, 255, 1),
            secondary: RGBA(130, 144, 156, 1)
        }
    )
)

 

 

2018-02-19 (1).png

 

Step 2: 

I set a gallery to that collection of colors (GalleryThemes). Then I make use a variable to give it a default selection--otherwise colors won't appear using this scheme.

 

Step 3: 

Create an object/control for each kind of color. I use 6 circles for the 6 colors I use: main, background, selected, text, textonblack, textonwhite.2018-02-19 (3).png

 

I rename each circle and set its Fill to each kind of color I use in my app.

color_main.Fill (one of the circles):

 

First(Filter(colorsettings,label=GalleryThemes.Selected.label)).main

 

color_background.Fill:

 

First(Filter(colorsettings,label=GalleryThemes.Selected.label)).background

 

color_selected.Fill:

 

First(Filter(colorsettings,label=GalleryThemes.Selected.label)).selected

 

etc.

 

Step 4:

For each control I add to the app, I set its colors to the circle that is representing the color I want. For a new Button, I might set its Fill property to:

color_main.Fill

If I want a gallery to change its TemplateFill property to:

If(ThisItem.IsSelected,
    color_selected.Fill,
    color_main.Fill
)

 

This means if an item in the gallery is selected, it will have the "selected" color, otherwise it will have the "main" color in my styles.

 

 

So the benefit of this method is you only need to use the First(Filter()) or LookUp() formulas once. Everything else uses the name of a circle control so it's easier. If you want to change the color of a style across your app, you only need to change it in one of two locations--the circle or the table of colors itself.

 

Level: Powered On
Hi @MR_dang. I have taken your idea on board and have created a page with circles on that are populated using the values from my excel sheet via the Filter function. I've named each circle like my colour name. e.g. clr_Corporate_Blue and now I can just use this name in the required colour field to change it 🙂 This still allows for Hex values to be populated on a sheet and imported to the App. This one is an 'official' company app but once we roll out PA to all employees, they will be allowed to use any scheme they want (unless it is to become official). I would post an image of my screen but I cant seem to attach one here. Thanks again, I think this workaround covers my request for style sheets at least.
Power Automate Staff
Status changed to: Planned

We are working to expand upon options for theming. This may, or may not, include integration with CSS files, but it will facilitate your theming goals.

 

Thank you for your patience as we evolve the product,

Audrie

Level: Powered On

Hei 

I wud like to know is there any update ?? i want to change the top background color of date picker control soo it can match with rest of application . but didnt found any solution