How to use PowerStyle

1. 1

   Pick and customize a component

   Open the Library, choose an example and tweak colors, size, radius and theme below the preview.
2. 2

   Copy the YAML

   Go to the YAML tab and click Copy. Your settings are already baked into the code.
3. 3

   Open your app in Power Apps Studio

   Open the Canvas app in edit mode and select the screen (or container) where the component should go.
4. 4

   Paste

   Right-click the screen in the Tree view and choose Paste, or press Ctrl+V. The controls appear with all properties set.
5. 5

   Rename and wire up

   Rename controls to fit your naming convention and connect OnSelect, Items etc. to your data.

- btnPrimary:
    Control: Button
    Properties:
      Text: ="Save"
      Fill: =RGBA(15, 108, 189, 1)
      Color: =RGBA(255, 255, 255, 1)
      RadiusTopLeft: =4

Tip: if paste does nothing, make sure the modern Power Apps Studio is used and the clipboard contains the full YAML block, including the first line.

1. 1

   Generate a palette

   Use the free Color Palette Generator to create shades from your brand color.
2. 2

   Add it to App.OnStart

   Select App in the Tree view, choose the OnStart property and paste the block.
3. 3

   Reference the variables

   Replace hard-coded colors in component properties with the variables, e.g. Fill: =gblBrand.
4. 4

   Run OnStart

   Click the … next to App and choose Run OnStart so the variables load while editing.

// App.OnStart
Set(gblBrand,      RGBA(15, 108, 189, 1));
Set(gblBrandDark,  RGBA(11, 85, 150, 1));
Set(gblSurface,    RGBA(255, 255, 255, 1));
Set(gblText,       RGBA(36, 36, 36, 1));

// On a button
Fill:          =gblBrand
HoverFill:     =gblBrandDark
Color:         =gblSurface

Components marked Canvas + Pages include versions for both platforms.