Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anonymous
Not applicable

visual background color changes automatically in Online Service after upload the pbix

Hi,

 

we are facing an issue with the color setting in our visuals after uploading the pbix file to the online service as an App. The background color of some visuals is changing from white to black.

Does anyone else have this issue? It´s started couple of weeks ago. 

Thank you in advance.

Best

Lina

 

16 REPLIES 16
tsennott
Frequent Visitor

We are also having this same issue, but only with some of our custom themes. Both the background and the canvas area around the report show up as a dark grey once uploaded to app.powerbi.com, whereas they are the normal (white and light grey) on the (most recent) Desktop version. The custom theme that is causing the issue is below. 

 

As a temporary workaround, I can manually override the report background, but not the canvas background. 

 

Please address this issue ASAP!

 

Theme:

 

{"name":"Redacted","dataColors":["#009fda","#0f204b","#3f9c35","#003591","#fec800","#e98300","#666666","#cccccc","#3599B8","#DFBFBF","#4AC5BB","#5F6B6D","#FB8281","#F4D25A","#7F898A","#A4DDEE","#FDAB89","#B687AC","#28738A","#A78F8F","#168980","#293537","#BB4A4A","#B59525","#475052","#6A9FB0","#BD7150","#7B4F71","#1B4D5C","#706060","#0F5C55","#1C2325","#7D3231","#796419","#303637","#476A75","#7E4B36","#52354C","#0D262E","#544848","#016AB8","#373D49","#FDB15D","#AAF20F","#5F646D","#8AA3EB","#FEE266","#A6687A","#3557B8","#DFCFBF","#4A91C5","#5F646D","#FBBF81","#C9F459","#7F838A","#A4B8EE","#FDE489","#B68794","#28428A","#A79B8F","#165889","#292E37","#BB824A","#8DB525","#474A52","#6A7CB0","#BDA750","#7B4F5A","#1B2C5C","#706860","#0F3C5C","#1C1E25","#7D5731","#5D7918","#303237","#475375","#7E6F36","#52343D","#0D152E","#544E48","#010EB8","#393749","#F9FD5D","#38F20F","#615F6D","#A08AEB","#CEFE66","#A67668","#5435B8","#DFDFBF","#4A53C5","#615F6D","#FAFB81","#7CF459","#807F8A","#B5A4EE","#DBFD89","#B69087","#3F288A","#A7A78F","#161F89","#2A2937","#BBBB4A","#45B525","#494752","#7A6AB0","#9CBD50","#7B594F","#291B5C","#707060","#0F155C","#1E1C25","#7C7D31","#2D7918","#303037","#514775","#697E36","#523B34","#140D2E","#545448","#4E01B8","#423749","#A9FD5D","#0FF256","#675F6D","#D18AEB","#82FE66","#A69468","#9535B8","#CFDFBF","#7D4AC5","#675F6D","#BCFB81","#59F484","#857F8A","#DAA4EE","#A1FD89","#B6A887","#6F288A","#9BA78F","#461689","#322937","#82BB4A","#25B54C","#4E4752","#9E6AB0","#65BD50","#7B6E4F","#4A1B5C","#687060","#2E0F5C","#221C25","#567D31","#187934","#343037","#684775","#457E36","#524934","#250D2E","#4E5448","#AA01B8","#493746","#5DFD62","#0FF2C7","#6D5F6B","#EB8AD3","#66FE96","#99A668","#B83598","#BFDFBF","#BA4AC5","#6D5F6B","#81FB82","#59F4D1","#8A7F89","#EEA4DD","#89FDAA","#ACB687","#8A2873","#8FA78F","#801689","#372934","#4ABB4A","#25B594","#524750","#B06A9F","#50BD70","#717B4F","#5C1B4D","#607060","#540F5C","#251C22","#317D32","#187964","#373036","#75476A","#367E4A","#4C5234","#2E0D26","#485448","#B8016A","#49373D","#5DFDB1","#0FAAF2","#6D5F64","#EB8AA3","#66FEE2","#7AA668","#B83557","#BFDFCF","#C54A91","#6D5F64","#81FBBF","#59C9F4","#8A7F83","#EEA4B8","#89FDE5","#94B687","#8A2842","#8FA79B","#891658","#37292E","#4ABB82","#258DB5","#52474A","#B06A7C","#50BDA7","#5B7B4F","#5C1B2C","#607068","#5C0F3C","#251C1E","#317D58","#185D79","#373032","#754752","#367E6F","#3D5234","#2E0D15","#48544E","#B8010E","#493937","#5DF9FD","#0F38F2","#6D615F","#EBA08A","#66CEFE","#68A676","#B85435","#BFDFDF","#C54A53","#6D615F","#81FAFB","#597CF4","#8A807F","#EEB5A4","#89DBFD","#87B691","#8A3F28","#8FA7A7","#89161E","#372A29","#4ABBBB","#2545B5","#524947","#B07A6A","#509CBD","#4F7B58","#5C291B","#607070","#5C0F15","#251E1C","#317C7D","#182D79","#373030","#755147","#36687E","#34523B","#2E140D","#485454","#B84E01","#494337","#5DA9FD","#560FF2","#6D685F","#EBD18A","#6681FE","#68A694","#B89535","#BFCFDF","#C57D4A","#6D685F","#81BCFB","#8459F4","#8A857F","#EEDAA4","#89A1FD","#87B6A8","#8A7028","#8F9BA7","#894616","#373229","#4A82BB","#4D25B5","#524E47","#B09E6A","#5065BD","#4F7B6F","#5C4A1B","#606870","#5C2E0F","#25221C","#31567D","#341879","#373430","#756947","#36447E","#345249","#2E250D","#484E54","#B8A901","#464937","#615DFD","#C70FF2","#6B6D5F","#D4EB8A","#9666FE","#6898A6","#99B835","#BFBFDF","#C5BA4A","#6B6D5F","#8181FB","#D159F4","#898A7F","#DDEEA4","#AA89FD","#87ACB6","#738A28","#8F8FA7","#897F16","#353729","#4A4ABB","#9425B5","#505247","#9FB06A","#7050BD","#4F717B","#4D5C1B","#606070","#5C540F","#23251C","#31317D","#641879","#363730","#6A7547","#4B367E","#344C52","#262E0D","#484854","#6AB801","#3D4937","#B15DFD","#F20FAA","#646D5F","#A3EB8A","#E266FE","#687AA6","#57B835","#CFBFDF","#91C54A","#646D5F","#BF81FB","#F459C9","#838A7F","#B7EEA4","#E589FD","#8794B6","#428A28","#9B8FA7","#588916","#2E3729","#824ABB","#B5258D","#4A5247","#7CB06A","#A750BD","#4F5B7B","#2C5C1B","#686070","#3C5C0F","#1E251C","#57317D","#79185D","#323730","#537547","#6F367E","#343D52","#152E0D","#4E4854","#0FB801","#37493A","#FD5DF9","#F20F39","#5F6D61","#8AEBA1","#FE66CE","#7568A6","#35B854","#DFBFDF","#54C54A","#5F6D61","#FB81FA","#F4597C","#7F8A80","#A4EEB5","#FD89DB","#9187B6","#288A3F","#A78FA7","#1F8916","#29372B","#BB4ABB","#B52544","#475249","#6AB07B","#BD509B","#594F7B","#1B5C2A","#706070","#155C0F","#1C251E","#7D317B","#79182D","#303731","#477552","#7E3668","#3B3452","#0D2E14","#544854","#01B84E","#374942","#FD5DA9","#F2560F","#5F6D67","#8AEBD1","#FE6682","#9468A6","#35B895","#DFBFCF","#4AC57D","#5F6D67","#FB81BD","#F48459","#7F8A85","#A4EEDA","#FD89A1","#A887B6","#288A6F","#A78F9B","#168946","#293732","#BB4A82","#B54C25","#47524E","#6AB09D","#BD5065","#6E4F7B","#1B5C4A","#706068","#0F5C2E","#1C2522","#7D3156","#793418","#303734","#477568","#7E3644","#493452","#0D2E25","#54484E"],"background":"#ffffff","foreground":"#666666","tableAccent":"#009fda","visualStyles":{"*":{"*":{"*":[{"fontSize":9,"fontFamily":"Verdana","color":{"solid":{"color":"#666666"}}}],"general":[{"responsive":true}]}},"barChart":{"*":{"general":[{"responsive":true}],"legend":[{"show":true,"position":"Top","titleText":"","labelColor":{"solid":{"color":"#666666"}},"fontSize":9,"fontFamily":"Verdana"}],"categoryAxis":[{"show":true,"position":"Left","fontSize":11,"fontFamily":"Verdana","showAxisTitle":true,"titleColor":{"solid":{"color":"#0f204b"}},"titleText":"","titleFontSize":11,"titleFontFamily":"Verdana"}],"valueAxis":[{"show":true,"axisScale":"linear","fontSize":11,"fontFamily":"Verdana","showAxisTitle":true,"titleColor":{"solid":{"color":"#0f204b"}},"titleText":"","titleFontSize":11}],"labels":[{"fontSize":9,"fontFamily":"Verdana"}]}},"columnChart":{"*":{"general":[{"responsive":true}],"legend":[{"show":true,"titleText":"","labelColor":{"solid":{"color":"#666666"}},"fontSize":11,"fontFamily":"Verdana"}],"categoryAxis":[{"show":true,"fontSize":11,"fontFamily":"Verdana","showAxisTitle":true,"titleText":"","titleFontSize":11,"titleFontFamily":"Verdana"}],"valueAxis":[{"show":true,"position":"Left"}]}}}}

Anonymous
Not applicable

Hi There.

 

I am resurfacing this topic as we are currently experiencing the same issue.  Is there an official resolution yet to this?

 

Thank you,


Jake

I believe it has something to do w/ custom themes. The only way I can make it go away is to manually set the background color to white in "Visualizations >> Format". This is not viable as I have 50+ branded dashboards that I will have to do this to. Are you using custom themes?

I am also experiencing this issue with custom themed reports.  Please fix it.

@fVoss @Anonymous @tsennott @RichFrederick @Anonymous,


This is a known issue. Please check the following response from PG. And you can check the fixed example JSON file.

 

"visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontSize": 12,
                        "fontFamily": "Calibri",
                        "color": {
                            "solid": {
                                "color": "#000000"
                            }
                        }
                    }
                ]
            }
        },



"The fix is to update your theme file to be more specific with your visualStyles section, replacing one of the wildcards with a specific entity (visual type or formatting card name).

 

As the Theme feature is in preview, and the triple wildcard is technically working as expected, there is no “fix” coming.

 

We also identified a popular third-party Power BI Theme Generator website (non-Microsoft) and asked the owners to change their tool to avoid creating triple wildcards."


Regards,
Lydia



Community Support Team _ Lydia Zhang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Thanks for explaining.

Anonymous
Not applicable

Hi Rich!  Sorry for the delayed response.  We are indeed using custom themes.  Are you saying that you set the backgroud color to white in a general setting (or for each visual?)?  Do you then need to re-import the custom themes?

 

Thank you sir!

 

Jake 

The quickest method I have found is opening the dashboard and changing the back ground to white under FORMAT >> PAGE BACKGROUND, saving then re-publish. Since I have stopped using custom themes and have not had any issues. 

RichFrederick
Frequent Visitor

Experiencing the same issue. It started sometime after Friday July 6th. Its only happening in instances where a custom theme is being used. After publishing the backgrounds that should be white turn black. The pasteboard (area outside/around the dashboard ) colors have also changed,  where it should be white has turned dark grey or black. The two work arounds I have found are: opening the desktop version and setting background of the dashboard to "white" in FORMAT or opening up the custom theme file in a code editor and adding rule for the background. This fixes the issue of the background changing color but not the issues of the pasteboard changing color.  Any insights on getting the pasteboard turned back to white would be helpful. Thanks.

 

background changing.PNGblack pasteboard.PNG

 

formatfield.PNG

Here is the JSON used for the custom theme.

{"name":"Power BI theme","background":"#ffffff","tableAccent":"#123456","dataColors":["#123456","#7a9b49","#231f20","#949494","#ff3c02","#9dd100","#ffa10f","#725800","#ff08a2","#08c1ff","#3cb44f","#2b83e3"],"visualStyles":{"*":{"*":{"*":[{"fontSize":11,"fontFamily":"Segoe UI","color":{"solid":{"color":"#231f20"}}}]}},"barChart":{"*":{"legend":[{"labelColor":{"solid":{"color":"#231f20"}},"fontSize":11,"fontFamily":"Segoe UI"}],"categoryAxis":[{"labelColor":{"solid":{"color":"#231f20"}},"titleColor":{"solid":{"color":"#231f20"}},"titleFontSize":11,"titleFontFamily":"Segoe UI"}],"valueAxis":[{"titleColor":{"solid":{"color":"#231f20"}},"titleFontSize":11,"titleFontFamily":"Segoe UI"}],"labels":[{"fontFamily":"Segoe UI"}]}}}}

v-yuezhe-msft
Employee
Employee

@Anonymous,

I am unable to reproduce this issue. Do you use latest version of Power BI Desktop(2.59.5135.781)? Do you publish apps in Power BI Service or do you get the issue in app workspace?

Regards,
Lydia

Community Support Team _ Lydia Zhang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Anonymous
Not applicable

Hi Lydia, we are using the latest Version of PowerBI Desktop. The issue appears when we upload the pbix file to the online Service in an APP Workspace. 

Best

Lina

@Anonymous,

I am unable to reproduce this issue, could you please share PBIX file via Private message?

Regards,
Lydia

Community Support Team _ Lydia Zhang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Anonymous
Not applicable

Hi Lydia, sorry but I can´t send you the pbix file.

 

Best

Lina

@Anonymous,


Do you also use custom theme? Could you please share the JSON file?

Regards,
Lydia

Community Support Team _ Lydia Zhang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Anonymous
Not applicable

Hi Lydia, sorry for my late response. Yes we are also using a custom theme. Here is the json:

 


{ "name": "XXXXXXXXX", "dataColors": [ "#e30613", "#009fe3", "#dadada", "#0c3db2", "#487ebd", "#58737a", "#007798", "#859ec4", "#a3bede", "#abb9bc", "#80bbcb", "#000000", "#ffffff" ], "background": "#FFFFFF", "foreground": "#333333", "tableAccent": "#EFEFEF", "visualStyles": { "*": { "*": { "*": [ { "fontFamily": "Segoe UI" } ] } }, "*":{ "*":{ "grid":[ { "outlineColor":{"solid":{"color":"#1A1A1A"}}, "gridVertical":true, "gridVerticalColor":{"solid":{"color":"#CCCCCC"}}, "gridHorizontal":false, "gridHorizontalColor":{"solid":{"color":"#CCCCCC"}} } ], "columnHeaders":[ { "fontColor":{"solid":{"color":"#333333"}}, "backColor":{"solid":{"color":"#FFFFFF"}}, "fontFamily":"Segoe UI" } ], "values":[ { "backColorSecondary":{"solid":{"color":"#EFEFEF"}} } ] } }, "slicer": { "*": { "general": [{ "outlineColor": { "solid": { "color": "#444444"}}, "outlineWeight": 1, "orientation": "vertical", "responsive": true }], "selection": [{ "selectAllCheckboxEnabled": false, "singleSelect": true }], "header": [{ "show": true, "fontColor": { "solid": { "color": "#000000"}}, "background": { "solid": { "color": ""}}, "outline": "None", "textSize": 9, "fontFamily": "Segoe (Bold)" }], "items": [{ "fontColor": { "solid": { "color": "#666666"}}, "background": { "solid": { "color": "#FFFFFF"}}, "outline": "None", "textSize": 9, "fontFamily": "Segoe UI" }] } }, "barChart": { "*": { "general": [{ "responsive": true }], "legend": [{ "show": false, "position": "Top", "showTitle": true, "titleText": "", "labelColor": { "solid": { "color": "#333333"}}, "fontSize": 8 }], "categoryAxis": [{ "show": true, "position": "Right", "labelColor": { "solid": { "color": "#777777"}}, "fontSize": 8, "fontFamily": "Segoe UI", "preferredCategoryWidth": 20, "maxMarginFactor": 25, "innerPadding": 20, "concatenateLabels": true }], "valueAxis": [{ "show": true, "position": "Left", "axisScale": "Linear", "start": -1, "end": 1, "labelColor": { "solid": { "color": "#777777"}}, "fontSize": 8, "fontFamily": "Segoe UI", "labelDisplayUnits": "Auto", "labelPrecision": "Auto", "gridlineShow": true, "gridlineColor": { "solid": { "color": "#EAEAEA"}}, "gridlineThickness": 1, "gridlineStyle": "solid" }], "dataPoint": [{ "defaultColor": { "solid": { "color": "#487ebd"}} }], "labels": [{ "show": true, "color": { "solid": { "color": "#333333"}}, "labelDisplayUnits": "Auto", "labelOrientation": "vertical", "labelPosition": "Auto", "fontSize": 8, "fontFamily": "Segoe UI", "enableBackground": false }], "plotArea": [{ "transparency": 50 }] } }, "columnChart": { "*": { "general": [{ "responsive": true }], "categoryAxis": [{ "show": true, "position": "Right", "labelColor": { "solid": { "color": "#777777"}}, "fontSize": 8, "fontFamily": "Segoe UI", "preferredCategoryWidth": 20, "maxMarginFactor": 25, "innerPadding": 20, "concatenateLabels": true }], "valueAxis": [{ "show": true, "position": "Left", "axisScale": "Linear", "labelColor": { "solid": { "color": "#777777"}}, "fontSize": 8, "fontFamily": "Segoe UI", "labelDisplayUnits": "Auto", "labelPrecision": "Auto", "gridlineShow": true, "gridlineColor": { "solid": { "color": "#EAEAEA"}}, "gridlineThickness": 1, "gridlineStyle": "solid" }], "defaultColor": { "solid": { "color": "#487ebd"}} }], "labels": [{ "show": true, "color": { "solid": { "color": "#333333"}}, "labelDisplayUnits": "Auto", "labelOrientation": "vertical", "labelPosition": "Auto", "fontSize": 8, "fontFamily": "Segoe UI", "enableBackground": false }], "plotArea": [{ "transparency": 50 }] } }, "lineChart": { "*": { "legend": [ { "show": true, "position": "Top", "showTitle": true, "labelColor": { "solid": { "color": "#666666" } }, "fontSize": 8, "fontFamily": "Segoe UI" } ], "categoryAxis": [ { "show": true, "titleFontSize": 11, "titleFontFamily": "Segoe UI" } ], "valueAxis": [ { "titleFontSize": 11, "titleFontFamily": "Segoe UI" } ], "labels": [ { "show": true, "labelPrecision": "Auto", "fontSize": 9, "fontFamily": "Segoe UI" } ], "plotArea": [ { "transparency": 50 } ] } } } }

 

Here is the JSON I am using

SyntaxEditor Code Snippet

{"name":"VG Power BI theme","background":"#ffffff","tableAccent":"#123456","dataColors":["#123456","#7a9b49","#231f20","#949494","#ff3c02","#9dd100","#ffa10f","#725800","#ff08a2","#08c1ff","#3cb44f","#2b83e3"],"visualStyles":{"*":{"*":{"*":[{"fontSize":11,"fontFamily":"Segoe UI","color":{"solid":{"color":"#231f20"}}}]}},"barChart":{"*":{"legend":[{"labelColor":{"solid":{"color":"#231f20"}},"fontSize":11,"fontFamily":"Segoe UI"}],"categoryAxis":[{"labelColor":{"solid":{"color":"#231f20"}},"titleColor":{"solid":{"color":"#231f20"}},"titleFontSize":11,"titleFontFamily":"Segoe UI"}],"valueAxis":[{"titleColor":{"solid":{"color":"#231f20"}},"titleFontSize":11,"titleFontFamily":"Segoe UI"}],"labels":[{"fontFamily":"Segoe UI"}]}}}}

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors
Top Kudoed Authors