Forum Discussion
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. Please, help, the colors are really killing me and causing me problems in the office.
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 Visual Studio code, 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/
5 Replies
This might help you. I found this excellent list of SharePoint online classes for Modern UI created by Denis Molodtsov Denis Molodtsov
List of Reusable SharePoint Online Classes for Modern UI
https://zerg00s.github.io/sp-modern-classes/
I found this very helpful.
BigBeuferd Have you checked out the MS Fabric library for the MS Class references?
They changed this page up a bit but, you can use the available classes there to find a style that works. If none of the colors work you may consider changing your site theme, which determines the colors associated with the majority of classes.
i.e. - ms-bgColor-themePrimary
The "additionalRowClass" object is limited to just applying classes. If you want to go beyond that, you can use JSON "style" objects to add inline style to your different elements. At that point it's a lot like HTML/CSS but, you have to rewire your brain for how things work in JSON and write way more code.
There's some helpful samples out on the GitHub repository to help you get started if you decide to go that route:
https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples
- 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.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 Visual Studio code, 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/
