How to create a custom theme for your Microsoft Lists form

One of the best things about Microsoft 365 web apps is that we can explore what's happening behind the scenes, to get useful information and learn something new.

For example, if we use the Edge browser to customize our Microsoft Lists form, we could have a look at what data are transmitted and received in that exact moment, including APIs.

Everytime we change a theme of a Microsoft Lists form, an API request with PATCH method is sent to Microsoft servers, with our choices about the background color as well as the color of buttons, toggles and checkboxes on the form.

When it comes to Microsoft Lists, we can perform a specific PATCH request to apply custom colors, thanks to Power Automate and SharePoint APIs.

Here are some flashy samples to demonstrate what themes we can create and apply to a form by running a Power Automate flow:

Cool, isn't it? Let's try it out!

? Grab the payload!

Let's say that your form is ready, but you would like to apply a custom theme, maybe based on a specific audience or visual identity requirements of your project or organization.

In Microsoft Edge, open the form settings of Microsoft Lists. Then, open the developer tools with right-click on any object of Microsoft Lists UI and select Inspect. Click on the Network tab and adapt the DevTools window size to see the Microsoft Lists user interface.

If we apply one of the default background palettes, some records will appear immediately below like a waterfall in the Network window.

Select the record starting with "Views(@a2)". Then, select the payload from the Payload tab, copy and paste it into a Notepad (you'll need it later):

?? Power Automate flow step-by-step

Now that we have our payload, we can start building a Power Automate flow.

1) Create a new instant cloud flow and select the Manually trigger a flow option:

2) Add 2 text inputs and give them a name, for example "Background" and "Button":

3) Add a Send an HTTP request to SharePoint action:

4) Here is an overview of a PATCH request built through a SharePoint REST API:

As shown in the image above, we have to provide some information to build our PATCH request:

• Site Address: select or write the site address where your list is stored. For example: https://contoso.sharepoint.com/sites/sitename
• Method: select PATCH from the dropdown menù
• Body: paste the payload previously grabbed from the Edge browser into the box. Then select the formId value (it's located at the end of your payload) and paste it into the Uri box, as shown in the image below

• Uri (Uniform Resource Identifier):

 _api/web/GetList('/sites/YOUR-SITE/Lists/YOUR-LIST-NAME')/Views('PASTE-YOUR-FORM-ID-HERE')        

• Headers (Key - Value):

Accept   -   application/json;odata=verbose
Content-Type   -   application/json;odata=verbose        

?? Customize the body (payload) with custom colors

To apply your custom colors, go to the final part of the payload, select the current values of backgroundColor and primaryColor and replace them with "Background" and "Button" inputs from the Dynamic content pane. The result of this replacement must be like the image below to avoid mistakes with all those commas, backslashes and double quotes:

?? Let's run our flow!

When we run our flow, we'll be asked to insert information about the background color and the button color. From my testing, the background color can be customized with HEX, RGB, HTML color names and gradients, whereas the button supports only one color (HEX, RGB or HTML color name).

Let's try with gradient:

• Background: linear-gradient(135deg, #283c86, rgb(92, 37, 141) 30%, rgb(92, 37, 141) 50%, #36b1dd)
• Button: Darkblue

After running the flow, here is the result we get in the Microsoft Lists user interface:

We can also apply further customizations, such as adding/removing fields, without loosing our new form theme:

?? Form management: aspects to bear in mind

After applying a custom theme with a Power Automate flow, we can also setup further OOTB customizations. However, bear in mind that a custom theme applied with Power Automate will not be available for selection like the other default ones.

Furthermore, after editing the fields of your form, if you run the flow again to apply a different color, the form will get back the existing fields structure of the original payload!

If you've added/removed some fields and you want to apply again a new custom theme with a PATCH request, just remember to grab an updated payload following the steps above, to make sure everything works fine.

?? Free sources to get started with gradients

Here are some cool sources we can use to quickly apply custom gradients to our Microsoft Lists form:

? uiGradients: choose from the gallery and copy a gradient code

? Grabient: select a palette and edit your gradient in few seconds

? Coolors: explore beautiful gradients and edit with gradient maker

? Gradient Hunt: scroll down the gallery and copy a gradient code

UPDATE: use a picture to customize your form background

Thanks to Power Automate and the "background" CSS3 property, we can also apply static or animated pictures to get something similar to Microsoft Forms. This trick has been tested with the following file formats: jpg, jpeg, png, svg (both static and animated) and gif.

For example, we could use a photo stored in a SharePoint library. In this case, end users should have access to that library or the single file you want to use.

Here is the property value we have to implement:

url(PASTE-YOUR-IMAGE-URL-HERE) no-repeat fixed center /cover        

When we run our flow, we'll be asked to insert information about the background and the button color, as shown below:

After running the flow, here is the result we get:

We can also use a more complex background property value to adjust the background opacity. For example:

linear-gradient(#FFFFFF66, #FFFFFF66), url(PASTE-YOUR-IMAGE-URL-HERE) no-repeat fixed center /cover        

And here is the result:

Conclusion

I'm sure there could be more elegant and cool methods to build a flow out there, but if you really need to apply a custom theme to a new Microsoft Lists form, this solution could come in handy for your use case.

Thanks for reading!