New Custom Theme Issues

[bazzak]

Hi Guys, 

I was excited to see the new custom theme options in the latest release. However, when I try to use the new "Page" element, it causes my import to error with "Error importing theme file". Unfortunately I can't find any further logging to help me figure out what the issue is. If I remove the page element from my JSON file, the import is successful. 

I am pretty certain that my JSON syntax is correct, so was wondering if there was an issue with the page element.

I'd appreciate any input that you guys have. Here is the JSON:

{"name":"CSIRO",
"background":"#ffffff",
"foreground":"#00a9ce",
"tableAccent":"#00313C",
"dataColors":["#00313C", "#00A9CE", "#9FAEE5", "#1E22AA", "#2DCCD3", "#007377", "#71CC98", "#007A53"],
"visualStyles":{"*":{"*":
						{
							"title":[{"fontSize":12,"fontFamily":"Calibri, Cambria","fontColor":{"solid":{"color":"#00a9ce"}}}],
							"general":[{"responsive":true}],
							"background": [{"show": true,"color": { "solid": { "color": "#FFFFFF" } },"transparency": 50}]
						}
					}
				},
"page": {
		"*": {
			"background": [{
				"color": {
					"solid": {
						"color": "#FFFFFF"
					}
				}
			}],
			"outspace": [{
				"color": {
					"solid": {
						"color": "#004753"
					}
				}
			}]
		}
	}
}

[Smauro · Accepted solution]

Hello @bazzak,

the "page" element should be inside "visualStyles" for some reason:

{"name":"CSIRO",
"background":"#ffffff",
"foreground":"#00a9ce",
"tableAccent":"#00313C",
"dataColors":["#00313C", "#00A9CE", "#9FAEE5", "#1E22AA", "#2DCCD3", "#007377", "#71CC98", "#007A53"],
"visualStyles":{"*":{"*":
						{
							"title":[{"fontSize":12,"fontFamily":"Calibri, Cambria","fontColor":{"solid":{"color":"#00a9ce"}}}],
							"general":[{"responsive":true}],
							"background": [{"show": true,"color": { "solid": { "color": "#FFFFFF" } },"transparency": 50}]
						}
					},
	"page": {
			"*": {
				"background": [{
					"color": {
						"solid": {
							"color": "#FFFFFF"
						}
					}
				}],
				"outspace": [{
					"color": {
						"solid": {
							"color": "#004753"
						}
					}
				}]
			}
		}
}}

simply changing the brackets works 🙂

[bazzak]

Thanks @Smauro,

I'll give that a try. Seems strange that the page element would be inside the visualstyles one. In the example on the July release post it's certainly not - https://powerbi.microsoft.com/en-us/blog/power-bi-desktop-july-2018-feature-summary/#theme 

I wonder if this is a bug?

[v-piga-msft]

Hi @bazzak,

Based on the on the July release post, we could see structure of that example :

"visualStyles": {

        "*": {

            "*": {

            } 

        },       

        "page": {

                "*": {

            }

        }   

     }

From the structure , we could find that the "page" element should be inside "visualStyles".

Best  Regards,

Cherry