Making a custom theme using a JSON file

[Muratmet123]

Hi all,

I don't know if this is the the right place to post this, however I was creating a custom theme for PowerBi by downloading the JSON file and changing some elements that PowerBI doesn't let you customize yourself in the app.

One of the things I want to change is that I want to insert an image as a background. Following a video I saw online, I now have a problem that "url" becomes white (must be blue if it's recognised by VS code as correct syntax). I will include the code below, and the thing I am referring to is that it doesn't seem to recognize "url".  I have formatted it correctly, so that doesn't seem to be the problem. I've shortened the url, since the message cannot contain more than 20,000 characters.

{
    "name": "Power Bi theme",
    "textClasses": {
        "label": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 11
        },
        "callout": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 42
        },
        "title": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 32
        },
        "header": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 11
        }
    },
    "dataColors": [
        "#051E50",
        "#3B3B3B",
        "#666666",
        "#118DFF",
        "#CCDAFE",
        "#00C66A",
        "#D64550",
        "#000000"
    ],
    "bad": "#D64550",
    "neutral": "#000000",
    "good": "#00C66A",
    "visualStyles": {
        "*": {
            "*": {
                "background":[
                    {
                        "image": {
                            "name": "Background",
                            "scaling": "fit",
                            "url": "data:image/jpeg;base64,/9j/4A"
                        }
                    },
                    {
                        "transparency": 0
                    }
                ]
            },
                "visualTooltip": [
                    {
                        "themedTitleFontColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "themedValueFontColor": {
                            "solid": {
                                "color": "#666666"
                            }
                        },
                        "themedBackground": {
                            "solid": {
                                "color": "#666666"
                            }
                        },
                        "actionFontColor": {
                            "solid": {
                                "color": "#666666"
                            }
                        }
                    }
                ],
                "visualHeaderTooltip": [
                    {
                        "themedTitleFontColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "themedBackground": {
                            "solid": {
                                "color": "#666666"
                            }
                        }
                    }
                ]
            }
        }
    }

Thanks in advance!

Best,

Murat

 

[Muratmet123]

Edit: 

It looks like one halve of the picture is imported correctly... For whatever reason only the left light blue bar is imported but the right one isn't.

[v-xiaoyan-msft]

Hi  @Muratmet123 ,

It looks like there was a syntax error in your JSON file. The issue was caused by extra data at the end of the JSON structure.Please try :

{
    "name": "Power Bi theme",
    "textClasses": {
        "label": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 11
        },
        "callout": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 42
        },
        "title": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 32
        },
        "header": {
            "color": "#666666",
            "fontFace": "'Trebuchet MS'",
            "fontSize": 11
        }
    },
    "dataColors": [
        "#051E50",
        "#3B3B3B",
        "#666666",
        "#118DFF",
        "#CCDAFE",
        "#00C66A",
        "#D64550",
        "#000000"
    ],
    "bad": "#D64550",
    "neutral": "#000000",
    "good": "#00C66A",
    "visualStyles": {
        "*": {
            "*": {
                "background": [
                    {
                        "image": {
                            "name": "Background",
                            "scaling": "fit",
                            "url": "data:image/jpeg;base64,/9j/4A"
                        }
                    },
                    {
                        "transparency": 0
                    }
                ]
            },
            "visualTooltip": [
                {
                    "themedTitleFontColor": {
                        "solid": {
                            "color": "#FFFFFF"
                        }
                    },
                    "themedValueFontColor": {
                        "solid": {
                            "color": "#666666"
                        }
                    },
                    "themedBackground": {
                        "solid": {
                            "color": "#666666"
                        }
                    },
                    "actionFontColor": {
                        "solid": {
                            "color": "#666666"
                        }
                    }
                }
            ],
            "visualHeaderTooltip": [
                {
                    "themedTitleFontColor": {
                        "solid": {
                            "color": "#FFFFFF"
                        }
                    },
                    "themedBackground": {
                        "solid": {
                            "color": "#666666"
                        }
                    }
                }
            ]
        }
    }
}

Best regards.
Community Support Team_Caitlyn

[Muratmet123]

Hi @v-xiaoyan-msft,

I'll give it a try, thank you! I found the problem late last night. I firstly converted a jpg file to a base64 file, and this gave the error. However, converting a svg file to a base64 instead did the trick.