Vega font change based on kibana theme

Elastic Stack Kibana
1

Is there a way to have the font in vega auto adjust when the theme is changed in Kibana (light/dark modes)? I've tried the code below but it's not working. Basically, looking for white font when in dark mode and black font when in light mode.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "signals": [
    {
      "name": "isLightMode",
      "value": false,
      "update": "'#FFFFFF' === '#FFFFFF'"
    },
    {
      "name": "textColor",
      "update": "isLightMode ? 'black' : 'white'"
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "fill": {"signal": "textColor"},
          "fontWeight": {"value": "Bold"},
          "fontSize": {"value": 15},
          "text": {"value": "Event List"},
          "x": {"value": 10},
          "y": {"value": 20}
        }
      }
    }
  ]
}
2

Hi @Ryan_Clark,

Welcome back! Sadly there is not currently a way to detect the Kibana theme used in Vega. But there is an open issue in GitHub for this feature if you want to watch it for updates.

Hope that helps!

3

Thanks for the confirmation. I ended up finding a font color that looks "OK" in both themes. I think it would be a good feature to have, I'm glad there is an open issue for it already.

1 Like