Is it possible to set colors of text and background based on a site's theme css?

Forms SharePoint Online
1

I have a typical SharePoint Online form published using Plumsail. When I change the site's theme and refresh the browser a few times, the form starts using fills and text to match the site's theme colors. That's great. Now I get a request to make the header background to be a darker shade. Because people like changing theme colors or copy forms to other sites, hard coded colors can clash.

Rather than adding css to specify a color code, I would like call the built in SharePoint CSS color options found here. sp-css-backgroundColor-* - List Formatting Samples (pnp.github.io) To be specific, I would like to use the "[theme: sp-css-backgroundColor-themeDarker]" option. I'm not strong in CSS but I managed to get it to change color when specifying a Hex code. Hopefully it's possible and I'm just missing something.

.my-class {
    font-weight: bold;
    background: #739abc;    
}
2

Hello @pbehler,

The sp-css-backgroundColor-* classes are available only if the page contains list formatters, so these classes are not available on the form page. We can add JS-api for loading those styles on demand, but this will be paid support.

Another way is to set the background of the header right in the designer:

image
image1054×136 6.99 KB

3

Thanks for getting back to me. At least I know I can stop spinning my wheels trying to figure out if I'm doing something wrong. I was really hoping to take advantage of the site theme palette and default SP color options.

I'm not familiar with "paid support" option.

4

@pbehler,

Paid support is payment for adding functionality you want/need to see in our products.