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

[Mesalomee]

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

[Mesalomee · Accepted solution]

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
        }
      ]

[v-sgandrathi]

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!