Forum Discussion
Json colors other than the .mscolors
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/
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.
it also seems they've made some changes to the Sharepoint UI....Have no clue what it says, but will figure it out. Thanks for leading me down the right path.
{"elmType":"div","style":{"padding":"0 4px"},"attributes":{"class":{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Proposal/Quote"]}]},"sp-css-backgroundColor-blueBackground07",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Rejected"]}]},"sp-css-backgroundColor-errorBackground",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["In Progress"]}]},"sp-css-backgroundColor-blueBackground37",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Hold"]}]},"sp-css-backgroundColor-warningBackground50",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Work Complete"]}]},"sp-css-backgroundColor-successBackground",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["All Billing Completed"]}]},"sp-css-backgroundColor-successBackground40",""]}]}]}]}]}]}},"txtContent":"@currentField","templateId":"BgColorChoice"}