Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
6 years ago
Solved

Theme question about Filter panel and Filter card

I just got problems with change the themes of Filter area. So I if I set the font as white, then text inside the box will also be white, how can make it become black? but the other texts here are white?

Any JSON solution ?

The one I want haveThe one I did

  • Hi Anonymous ,

     

    Based on my research, we could change the Input box color to meet your requirement.

     

    { 
        "name":"PowerBI Demo",
        "dataColors":[ 
            "#003366",
            "#A8C5E0",
            "#214F80",
            "#A4D3E3",
            "#82A1BD",
            "#366996",
            "#304E64",
            "#004576",
            "#666666",
            "#000000",
            "#0C304A",
            "#0076DE"
        ],
        "background":"#FFFFFF",
        "foreground":"#003366",
        "tableAccent":"#214F80",
        "visualStyles":{ 
            "page":{ 
                "*":{ 
                    "outspacePane":[ 
                        { 
                            "backgroundColor":{ 
                                "solid":{ 
                                    "color":"#0000ff"
                                }
                            },
                            "foregroundColor":{ 
                                "solid":{ 
                                    "color":"#00ff00"
                                }
                            },
                            "transparency":50,
                            "titleSize":35,
                            "headerSize":8,
                            "fontFamily":"Georgia",
                            "border":true,
                            "borderColor":{ 
                                "solid":{ 
                                    "color":"#ff0000"
                                }
                            }
                        }
                    ],
                    "filterCard":[ 
                        { 
                            "$id":"Applied",
                            "transparency":0,
                            "backgroundColor":{ 
                                "solid":{ 
                                    "color":"#ff0000"
                                }
                            },
                            "foregroundColor":{ 
                                "solid":{ 
                                    "color":"#45f442"
                                }
                            },
                            "textSize":30,
                            "fontFamily":"Arial",
                            "border":true,
                            "borderColor":{ 
                                "solid":{ 
                                    "color":"#ffffff"
                                }
                            },
                            "inputBoxColor":{ 
                                "solid":{ 
                                    "color":"#C8C8C8"
                                }
                            }
                        },
                        { 
                            "$id":"Available",
                            "transparency":40,
                            "backgroundColor":{ 
                                "solid":{ 
                                    "color":"#00ff00"
                                }
                            },
                            "foregroundColor":{ 
                                "solid":{ 
                                    "color":"#ffffff"
                                }
                            },
                            "textSize":10,
                            "fontFamily":"Times New Roman",
                            "border":true,
                            "borderColor":{ 
                                "solid":{ 
                                    "color":"#123456"
                                }
                            },
                            "inputBoxColor":{ 
                                "solid":{ 
                                    "color":"#777777"
                                }
                            }
                        }
                    ]
                }
            }
        }
    }

     

    Please refer to the similar Thread and Documents:

    https://community.powerbi.com/t5/Desktop/Custom-Theme-for-new-Filter-Pane/td-p/576283

    https://docs.microsoft.com/en-us/power-bi/power-bi-report-filter#theming-for-filter-pane

    https://docs.microsoft.com/en-us/power-bi/desktop-report-themes#report-theme-json-file-format

     

    BTW, json as attached.

     

    Best regards,

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

2 Replies

  • v-lid-msft's avatar
    v-lid-msft
    Icon for Community Support rankCommunity Support

    Hi Anonymous ,

     

    Based on my research, we could change the Input box color to meet your requirement.

     

    { 
        "name":"PowerBI Demo",
        "dataColors":[ 
            "#003366",
            "#A8C5E0",
            "#214F80",
            "#A4D3E3",
            "#82A1BD",
            "#366996",
            "#304E64",
            "#004576",
            "#666666",
            "#000000",
            "#0C304A",
            "#0076DE"
        ],
        "background":"#FFFFFF",
        "foreground":"#003366",
        "tableAccent":"#214F80",
        "visualStyles":{ 
            "page":{ 
                "*":{ 
                    "outspacePane":[ 
                        { 
                            "backgroundColor":{ 
                                "solid":{ 
                                    "color":"#0000ff"
                                }
                            },
                            "foregroundColor":{ 
                                "solid":{ 
                                    "color":"#00ff00"
                                }
                            },
                            "transparency":50,
                            "titleSize":35,
                            "headerSize":8,
                            "fontFamily":"Georgia",
                            "border":true,
                            "borderColor":{ 
                                "solid":{ 
                                    "color":"#ff0000"
                                }
                            }
                        }
                    ],
                    "filterCard":[ 
                        { 
                            "$id":"Applied",
                            "transparency":0,
                            "backgroundColor":{ 
                                "solid":{ 
                                    "color":"#ff0000"
                                }
                            },
                            "foregroundColor":{ 
                                "solid":{ 
                                    "color":"#45f442"
                                }
                            },
                            "textSize":30,
                            "fontFamily":"Arial",
                            "border":true,
                            "borderColor":{ 
                                "solid":{ 
                                    "color":"#ffffff"
                                }
                            },
                            "inputBoxColor":{ 
                                "solid":{ 
                                    "color":"#C8C8C8"
                                }
                            }
                        },
                        { 
                            "$id":"Available",
                            "transparency":40,
                            "backgroundColor":{ 
                                "solid":{ 
                                    "color":"#00ff00"
                                }
                            },
                            "foregroundColor":{ 
                                "solid":{ 
                                    "color":"#ffffff"
                                }
                            },
                            "textSize":10,
                            "fontFamily":"Times New Roman",
                            "border":true,
                            "borderColor":{ 
                                "solid":{ 
                                    "color":"#123456"
                                }
                            },
                            "inputBoxColor":{ 
                                "solid":{ 
                                    "color":"#777777"
                                }
                            }
                        }
                    ]
                }
            }
        }
    }

     

    Please refer to the similar Thread and Documents:

    https://community.powerbi.com/t5/Desktop/Custom-Theme-for-new-Filter-Pane/td-p/576283

    https://docs.microsoft.com/en-us/power-bi/power-bi-report-filter#theming-for-filter-pane

    https://docs.microsoft.com/en-us/power-bi/desktop-report-themes#report-theme-json-file-format

     

    BTW, json as attached.

     

    Best regards,

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

    • Anonymous's avatar
      Anonymous
      Not applicable

      Thank you for replying me. 

      But I think its the bug of power BI, cuz I want to keep the inbox being white, but selection text could be black.