Theme setting for card background

[gaccardo]

I understand from other posts that setting the page background with a theme .json file is not supported.  However, it

does appear that the background for card elements is supported.  When I use the following in the theme file, I would expect

that card backgrounds become an eye-searing fushia, but it seems that there is no affect.  Can someone explain why

the cardBackground is not working?  Any help is greatly appreciated.

{
  "name": "Dark",
  "background": "#FF0080",
  "foreground": "#E7E7E7",
  "tableAccent": "#FF0080",
  "dataColors": ["#009FC2", "#A24FA4", "#D34C4B", "#FDB913", "#8DC058"],
  "visualStyles": {
    "*": {
      "*": {
        "items": [{
            "fontColor": {
              "solid": {
                "color": "#737373"
              }
            },
            "background": "#FF0080",
            "textSize": 8,
            "fontFamily": "Arial"
          }
        ]
      }
    },

    "card": {
      "*": {
        "labels": [{
            "color": {
              "solid": {
                "color": "#E7E7E7"
              }
            },
            "fontSize": 24,
            "fontFamily": "Arial"
          }
        ],
        "cardBackground": {
          "solid": {
            "color": "#FF0080"
          }
        },
        "categoryLabels": [{
            "show": true,
            "color": {
              "solid": {
                "color": "#A4A0A0"
              }
            },
            "fontFamily": "Arial",
            "fontSize": 9
          }
        ]
      }
    },

<... more elements go here ...>

[Muesdo]

Hi, like @gaccardo wrote. There is a background option wich works for me. Here is an Example for Cards:

{
   "name": "Card-Background-Example",
   "background": "#ffffff",
   "foreground": "#000000",
   "dataColors": [
      "#8AD4EB",
      "#939498",
      "#C0504D",
      "#DB6D4B"
   ],
   "visualStyles": {
      "*": {
         "*": {
            "*": [
               {
                  "fontSize": 12,
                  "fontFamily": "Calibri",
                  "color": {
                     "solid": {}
                  }
               }
            ],
            "general": [
               {
                  "responsive": true
               }
            ]
         }
      },
      "card": {
         "*": {
            "background": [
               {
                  "show": true,
                  "color": {
                     "solid": {
                        "color": "#8AD4EB"
                     }
                  },
                  "transparency": 0
               }
            ],
            "labels": [
               {
                  "show": true,
                  "color": {
                     "solid": {
                        "color": "#ffffff"
                     }
                  },
                  "fontSize": 14,
                  "fontFamily": "Calibri"
               }
            ]
         }
      }
   }
}

[quentin_vigne]

Hi @gaccardo

Did you enable the option ? 

- Quentin

[gaccardo]

The option is enabled.  The other settings for cards seem to work, but background colors seem to be 

ignored for pretty much visualization I've tried.  I asked about cards specifically, because the Theme Generator

supports it, and it is documented.  Most of the other documented elements I've tried work as expected.

[lena_hee]

Hi, @gaccardo

I have a same problem. Did you solve it?

It changed everything but only background does'n work.

[echristoph]

Did you ever get this figured out? Having the same problem.

[gaccardo · Accepted solution]

The July 2018 release provides support for background colors.  The snippet below has a dark grey background with a lighter grey area surrounding it.  Enjoy.

    "*": {
      "*": {
        "*": [{
            "fontSize": 8,
            "fontFamily": "Arial",
            "titleFontFamily": "Arial",
            "color": {
              "solid": {
                "color": "#77777"
              }
            }
          }
        ]
      }
    },

    "page": {
      "*": {
        "background": [{
            "color": {
              "solid": {
                "color": "#333333"
              }
            },
            "transparency": 0
          }
        ],
        "outspace": [{
            "color": {
              "solid": {
                "color": "#444444"
              }
            },
            "transparency": 0
          }
        ]
      }
    },

[Anonymous]

@gaccardo This helped a lot but for some reason the transparency wont change for me. Has the naming convention for it changed or something?

[echristoph]

This doesn't adress the question. How do you set the background color for visualizations? The page isn't the problem.