Help with Customizing Power BI Theme - Navigation Bar Shadow Properties Not Applying

Mesalomee — Fri, 25 Jul 2025 18:26:02 GMT

Hi everyone,

I'm customising a Power BI theme directly in the JSON file for more flexibility, but I'm struggling to apply shadow properties (set in Power BI Desktop via Format Pane > Style > Shadow) to my navigation bar visual. The navigation already looks good with my current customisations, but I want to enhance it with these specific shadow settings:

Color: #FCFCFC
Transparency: 50%
Blur: 9px
Position: Custom
Angle: 90 degrees
Distance: 12px

Here's the JSON code I'm using for the shadow:

"shadow": [ { "show": true, "shadowColor": { "solid": { "color": "#FCFCFC" } }, "transparency": 50, "shadowBlur": 9, "shadowPositionPreset": "custom", "angle": 90, "shadowDistance": 12 } ]

The issue is that only

"show": true

The issue is that only "show": true works, enabling the shadow. However, none of the other properties (color, transparency, blur, etc.) apply, and the default shadow appears instead (black, 70% transparency, 20px blur, bottom-right position). If I set "show": false or remove the "shadow" section entirely, the shadow disappears, confirming the "show" property is recognised in the "shadow".

I've tried replacing "shadowColor" with "color", "fillColor", and "lineColor", but none worked.

For reference, my fill properties for default, hover, and selected states work perfectly with this

"fill": [ { "$id": "default", "show": true, "fillColor": { "solid": { "color": "#A1C6B5" } } }, { "$id": "hover", "show": true, "fillColor": { "solid": { "color": "#F3F2F1" } } }, { "$id": "selected", "show": true, "fillColor": { "solid": { "color": "#F2F4F3" } } } ]

I also tried adding an $id property to the shadow section to match the fill structure, but it didn't help.

Does anyone have suggestions for getting the shadow properties to apply correctly?

Any help and advice would be greatly appreciated - this is driving me crazy! 😅

Thanks!

P.S. If anyone is interested in theme customisation, you can find great resources here: https://github.com/MattRudy/PowerBI-ThemeTemplates

Re: Help with Customizing Power BI Theme - Navigation Bar Shadow Properties Not Applying

Mesalomee — Sat, 26 Jul 2025 09:51:29 GMT

I found the code that works, just had to pass properties as a separate object from "show": true

"shadow": [ { "show": true}, { "$id": "default", "color": { "solid": { "color": "#FCFCFC" }}, "transparency": 50, "shadowBlur": 9, "shadowPositionPreset": "custom", "angle": 90, "shadowDistance": 12 } ]

Re: Help with Customizing Power BI Theme - Navigation Bar Shadow Properties Not Applying

v-sgandrathi — Mon, 28 Jul 2025 05:25:34 GMT

Hi @Mesalomee,

I'm glad to hear that you found a solution and resolved the query. Thank you for sharing it here!

Please mark your response as the accepted solution to help others in the community find it easily.

Thank you for being a part of the Microsoft Community Forum!

topic Re: Help with Customizing Power BI Theme - Navigation Bar Shadow Properties Not Applying in Developer

Help with Customizing Power BI Theme - Navigation Bar Shadow Properties Not Applying

Re: Help with Customizing Power BI Theme - Navigation Bar Shadow Properties Not Applying

Re: Help with Customizing Power BI Theme - Navigation Bar Shadow Properties Not Applying