能否通过主题对PowerBI Chiclet Slicer 1.6.3进行样式设置？

我已修正两套主题JSON的结构错误，同时调整了Chiclet Slicer 1.6.3的配色适配对应主题的对比度要求，修复后的配置如下：

浅色主题（Stone Light） #

修复点：

• 补全Chiclet Slicer样式的数组包裹结构，符合Power BI主题规范
• 新增选中态文字颜色配置，调整默认文字为黑色，解决浅色背景下文字不可见问题
• 修正全局通用背景色为白色，适配浅色主题逻辑

{
    "name": "Stone Light",
    "dataColors": [
        "#a9c23f",
        "#53565A",
        "#509e2f",
        "#004E42",
        "#5B7F95",
        "#8DB9CA",
        "#337079",
        "#e03c31",
        "#fce300",
        "#00b5e2",
        "#440099",
        "#9a3324",
        "#d3832b",
        "#F4D25A",
        "#7F898A",
        "#A4DDEE",
        "#FDAB89",
        "#B687AC",
        "#28738A",
        "#A78F8F",
        "#168980",
        "#293537",
        "#BB4A4A",
        "#B59525",
        "#475052",
        "#6A9FB0",
        "#BD7150",
        "#7B4F71",
        "#1B4D5C",
        "#706060",
        "#0F5C55",
        "#1C2325"
    ],
    "background": "#ffffff",
    "foreground": "#000000",
    "tableAccent": "#a9c23f",
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontFamily": "Verdana, Calibri, Cambria",
                        "fontColor": {
                            "solid": {
                                "color": "#000000"
                            }
                        },
                        "color": {
                            "solid": {
                                "color": "#000000"
                            }
                        },
                        "selectedColor": {
                            "solid": {
                                "color": "#000000"
                            }
                        }   
                    }
                ],
                "border": [
                    {
                        "show": true,
                        "radius": 4,
                        "color": {
                            "solid": {
                                "color": "#444444"
                            }
                        }
                    }
                ],
                "background": [
                    {
                        "show": true,
                        "color": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        },
                        "transparency": 0
                    }
                ],
                "title": [
                    {
                        "show": true,
                        "fontColor": {
                            "solid": {
                                "color": "#000000"
                            }
                        }
                    }
                ]
            }
        },
        "image": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ],
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "basicShape": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ],
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "textbox": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ],
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "ChicletSlicer 1.6.3": {
            "*": {
                "chiclets": [{
                    "selectedColor": {
                        "solid": {
                            "color": "#a9c23f"
                        }
                    },
                    "unselectedColor": {
                        "solid": {
                            "color": "#D0D0D0"
                        }
                    },
                    "fontColor": {
                        "solid": {
                            "color": "#000000"
                        }
                    },
                    "selectedFontColor": {
                        "solid": {
                            "color": "#ffffff"
                        }
                    }
                }]
            }
        },
        "card": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        }
                    }
                ]
            }
        },
        "tableEx": {
            "*": {
                "columnHeaders":[{
                    "backColor":{"solid":{"color":"#ffffff"}}
                }],
                "background":[{
                    "color":{"solid":{"color":"#ffffff"}}
                }]
            }
        },
        "page": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        },
                        "transparency": 0
                    }
                ],
                "outspace": [
                    {
                        "color": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        },
                        "transparency": 0
                    }
                ]
            }
        }
    }
}

深色主题（Stone Dark） #

修复点：

• 删除重复嵌套的visualStyles节点，解决样式覆盖失效问题
• 调整Chiclet Slicer配色：选中态使用主题主色，未选中态使用深灰背景，保证文字对比度符合阅读要求
• 把原生切片器的样式配置合并到外层样式节点，保证全局生效

{
    "name": "Stone Dark",
    "dataColors": [
        "#a9c23f",
        "#53565A",
        "#509e2f",
        "#004E42",
        "#5B7F95",
        "#8DB9CA",
        "#337079",
        "#e03c31",
        "#fce300",
        "#00b5e2",
        "#440099",
        "#9a3324",
        "#d3832b"
    ],
    "background": "#1E1E1E",
    "foreground": "#ffffff",
    "tableAccent": "#D1DB86",
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontFamily": "Verdana, Calibri, Cambria",
                        "fontColor": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        },
                        "color": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        }
                    }
                ],
                "border": [
                    {
                        "show": true,
                        "radius": 8,
                        "color": {
                            "solid": {
                                "color": "#1E1E1E"
                            }
                        }
                    }
                ],
                "background": [
                    {
                        "show": true,
                        "color": {
                            "solid": {
                                "color": "#1E1E1E"
                            }
                        },
                        "transparency": 0
                    }
                ],
                "title": [
                    {
                        "fontColor": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        }
                    }
                ]
            }
        },
        "slicer": {
            "*": {
                "*": [
                    {
                        "fontColor": { "solid": { "color": "#FFFFFF" } },
                        "foreground": { "solid": { "color": "#FFFFFF" } },
                        "background": { "solid": { "color": "#000000" } }
                    }
                ]
            }
        },
        "image": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ],
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "basicShape": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ],
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "textbox": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ],
                "border": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "ChicletSlicer 1.6.3": {
            "*": {
                "chiclets": [{
                    "selectedColor": {
                        "solid": {
                            "color": "#a9c23f"
                        }
                    },
                    "unselectedColor": {
                        "solid": {
                            "color": "#333333"
                        }
                    },
                    "fontColor": {
                        "solid": {
                            "color": "#ffffff"
                        }
                    },
                    "selectedFontColor": {
                        "solid": {
                            "color": "#000000"
                        }
                    }
                }]
            }
        },
        "tableEx": {
            "*": {
                "columnHeaders":[{
                    "backColor":{"solid":{"color":"#0D0D0D"}}
                }],
                "background":[{
                    "color":{"solid":{"color":"#0D0D0D"}}
                }]
            }
        },
        "page": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#0D0D0D"
                            }
                        },
                        "transparency": 0
                    }
                ],
                "outspace": [
                    {
                        "color": {
                            "solid": {
                                "color": "#0D0D0D"
                            }
                        },
                        "transparency": 0
                    }
                ]
            }
        }
    } 
}

生效步骤 #

• 将修正后的代码保存为后缀为.json的本地文件
• 打开目标Power BI报告，依次点击顶部菜单栏「视图」→「主题」→「浏览主题」
• 选中保存的JSON文件导入即可，所有Chiclet Slicer 1.6.3组件会自动适配对应样式

内容的提问来源于stack exchange，提问作者Jess Flintstone