Forum Discussion

vipett's avatar
vipett
Helper III
4 years ago

Colors accoring to theme automatically

I've made a theme that matches our company graphical guidelines but how do I set Outline color on grid (in tables) and the alternate background color in values to be according to the theme?

Graphs and everything matches the correct colors in the theme, but I don't want to change every table (new or old) manually.

 

Need Help

5 Replies

  • AllisonKennedy's avatar
    AllisonKennedy
    Community Champion
    4 years ago

    vipett 

     

    You'll need to edit the JSON file for the theme to do this: 

    https://docs.microsoft.com/en-nz/power-bi/create-reports/desktop-report-themes#setting-structural-colors

     

    Here's a sample of the properties you can use, I changed the tableAccent to purple in this one: 

     

    {
    "name": "Custom Theme",
    "firstLevelElements": "#252423",
    "secondLevelElements": "#605E5C",
    "thirdLevelElements": "#F3F2F1",
    "fourthLevelElements": "#B3B0AD",
    "background": "#FFFFFF",
    "secondaryBackground": "#C8C6C4",
    "tableAccent": "#AAAAFF"
    }

     

    If you 'Save Current Theme', then add that extra code to the JSON file that downloads, then 'Browse for themes' and import it back in the new JSON file with the updated tableAccent (and any other properties you need/want to change).

     

     

    • vipett's avatar
      vipett
      Helper III
      4 years ago

      Thanks, New to JSON and all the brackets, everywhere..

       

      This is my current JSON code: 

      {"name":"Test","dataColors":["#C22A22","#302E2B","#8CA8BA","#CCDAE4","#DEDEDE","#FAFAFA","#FAFAFA","#D64550"],"foreground":"#000000","background":"#FFFFFF","textClasses":{"label":{"fontFace":"'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif"},"title":{"fontFace":"wf_standard-font, helvetica, arial, sans-serif"}},"backgroundLight":"#F3F2F1","backgroundNeutral":"#C22A22","foregroundNeutralTertiary":"#B3B0AD","foregroundNeutralSecondary":"#605E5C"}

       

      I would like the grid outline to be #C22A22 and alternate color for values to be #DEDEDE.

      Any chance you can modify my code above with the additions, it would be very much appreciated!

       

       

      • AllisonKennedy's avatar
        AllisonKennedy
        Community Champion
        4 years ago

        vipett  Not sure I got the alternate colour for values - I may need to look up the attribute for that, but see if this works for you please:

         

         

        {"name":"Test","dataColors":["#C22A22","#302E2B","#8CA8BA","#CCDAE4","#DEDEDE","#FAFAFA","#FAFAFA","#D64550"],"foreground":"#000000","background":"#FFFFFF","textClasses":{"label":{"fontFace":"'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif"},"title":{"fontFace":"wf_standard-font, helvetica, arial, sans-serif"}},
        "backgroundLight":"#F3F2F1","backgroundNeutral":"#C22A22","foregroundNeutralTertiary":"#B3B0AD","foregroundNeutralSecondary":"#605E5C",
        "firstLevelElements": "#C22A22",
        "secondLevelElements": "#DEDEDE",
        "thirdLevelElements": "#F3F2F1",
        "fourthLevelElements": "#B3B0AD",
        "background": "#FFFFFF",
        "secondaryBackground": "#DEDEDE",
        "tableAccent": "#C22A22"

        }

  • v-henryk-mstf's avatar
    v-henryk-mstf
    Community Support
    4 years ago

    Hi vipett ,

     

    Try the following json code:

     

    {
  "name": "Test",

   "dataColors": [
    "#C22A22",
    "#302E2B",
    "#8CA8BA",
    "#CCDAE4",
    "#DEDEDE",
    "#FAFAFA",
    "#FAFAFA",
    "#D64550"
  ],
  "foreground": "#000000",
  
 "categoryAxis": [
          {
            "gridlineStyle": "dotted",
            "color": "#C22A22"
          }
        ],
          
  "background": "#FFFFFF",
  "textClasses": {
    "label": {
      "fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif"
    },
    "title": {
      "fontFace": "wf_standard-font, helvetica, arial, sans-serif"
    }
  },
  "backgroundLight": "#F3F2F1",
  "backgroundNeutral": "#C22A22",
  "foregroundNeutralTertiary": "#B3B0AD",
  "foregroundNeutralSecondary": "#605E5C"
  
}

     

     You can debug your json code in the following editor:

    [New document 1 | New document 2]  JSON Editor Online - view, edit and format JSON online


    If the problem is still not resolved, please provide detailed error information and let me know immediately. Looking forward to your reply.


    Best Regards,
    Henry


    If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.