PACo uses a fixed theme structure which is based on the Fluent UI theme structure. See documentation page Theming for more details.

There are 2 ways to create your own theme:

  • Option 1 – Reuse
  • Option 2 – Create new

Option 1 – Reuse

  • Copy an existing PACo theme (Default, Dark or High-contrast) which is closest to the color scheme you want to create.
  • Update the properties so the theme contains your color set.
    • Use the color screen in the canvas app PACoCo to make sure your theme looks as expected. You have to set your theme to be the default theme for this.
  • Use your theme in your canvas apps.

Option 2 – Create new

  • Go to the Fluent UI theme designer page: https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html
    • See screenshot below.
  • Set the primary color, text color and background color to your liking. Make sure there is a good contrast.
  • Export the theme, select “JSON” and copy the text into a text file.
  • Add a color property for each palette slot in the JSON.
  • Update all properties so the theme contains the color scheme you want to create.
    • Use the color screen in the canvas app PACoCo to make sure your theme looks as expected. You have to set your theme to be the default theme for this.
  • Make sure that the text is conform the PACo theme structure by placing it in a JSON object called “palette”.
    • You can inspect one of the three PACo themes for the PACo theme structure.
  • Use your theme in your canvas apps.