Forum Discussion

Copper Contributor

May 06, 2019

Solved

Json colors other than the .mscolors

Hi. I can't figure out how to assign different colors in JSON. I can do all the .ms stuff...but their colors are horrible!! How do I use RGBA or HEX or whatever? I don't really understand json. ...

sharepoint

Colin Steger
May 08, 2019
BigBeuferd Depending on how/where you're trying to apply the color, you would need to add a "style" object after you declare an element in JSON.

Depending on what element you're applying the "style" object to, you can add in a "background-color" and/or "color" attribute to change the font/background colors. You can use RGB or HEX values for either of those attributes.

"style": {
"background-color": "#f4f4f4"
}

One thing to watch out for is your commas; if you miss a comma, your JSON will be invalid. If you use https://code.visualstudio.com/, it validates as you go.

This article does a nice job of breaking down JSON structure for view formatting.
https://collab365.community/sharepoint-modern-view-formatting-json-part-1-2/

BigBeuferd

Copper Contributor

May 07, 2019

thanks for the link. I've yet to see that page like that, it's much different than I saw before.
thanks for the first written example, I've figured that one out. I'm being asked for a specific set of colors...and the Themes aren't cutting it.
I read the "implementation" but I can find nothing about JSON....just something called Fabric. When I click the "Get Started" link i'm presented a blank page.
I don't know what I'm looking for when I'm reading your second link. I have NO CLUE what GitHub is. I mainly use PowerApps and it's a pretty simple RGBA formula.
How would I write a Specific color in CSS? Just a quick example to help me find what I should be looking for...
I'm very grateful for you taking the time.

Colin Steger

Brass Contributor

May 08, 2019

BigBeuferd Depending on how/where you're trying to apply the color, you would need to add a "style" object after you declare an element in JSON.

Depending on what element you're applying the "style" object to, you can add in a "background-color" and/or "color" attribute to change the font/background colors. You can use RGB or HEX values for either of those attributes.

"style": {

"background-color": "#f4f4f4"

}

One thing to watch out for is your commas; if you miss a comma, your JSON will be invalid. If you use https://code.visualstudio.com/, it validates as you go.

This article does a nice job of breaking down JSON structure for view formatting.

https://collab365.community/sharepoint-modern-view-formatting-json-part-1-2/