Accessing the foreground and background colors from Grafana based on color mode

[psheehymn]

I'll confess in advance that I got lost looking for an answer in Grafana's plugin documentation, so I come here hat-in-hand for information that is (I'm guessing) in that doc; I really did try to RTFM first...

We have built a large number of custom panels using the HTML Graphics plugin that we would like to have behave like the general visualization set when switching from Light to Dark mode (as opposed to coding a static color scheme in the CSS). I assume there is a way from the Grafana API for plugins to get the color codes for the foreground and background based on the mode; can that be used to retrieve those color codes in the JavaScript in order to update the color and background-color style settings on the fly? Even more ideal, is there any way to reference those values in the CSS directly to create styles that will switch automatically?

Thank you!

[ZuperZee]

I'll write a better example/response for the CSS directly stuff later, but htmlGraphics.theme2 should have enough for the colors.

[ZuperZee]

There are a lot of ways for the colors. With the htmlGraphics.theme2 the colors update based on the theme. For custom colors there is a isDark/isLight htmlGraphics.theme2.isDark which can be used for some custom logic for colors.

onInit

const textElt = htmlNode.querySelector("#htmlgraphics-text");
const valueElt = htmlNode.querySelector("#htmlgraphics-value");

textElt.textContent = customProperties.text;

// Styling with css variables
htmlNode.lastElementChild.style.setProperty("--color-primary-main", htmlGraphics.theme2.colors.primary.main)
htmlNode.lastElementChild.style.setProperty("--color-primary-contrast-text", htmlGraphics.theme2.colors.primary.contrastText)
htmlNode.lastElementChild.style.setProperty("--color-secondary-main", htmlGraphics.theme2.colors.secondary.main)
htmlNode.lastElementChild.style.setProperty("--color-secondary-contrast-text", htmlGraphics.theme2.colors.secondary.contrastText)

// Styling directly
textElt.style.border = `2px solid ${htmlGraphics.theme2.colors.primary.border}`
valueElt.style.border = `2px solid ${htmlGraphics.theme2.colors.secondary.border}`

Dashboard json:

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 14,
  "links": [],
  "panels": [
    {
      "datasource": {
        "type": "datasource",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "SVGBaseFix": true,
        "add100Percentage": true,
        "calcsMutation": "standard",
        "centerAlignContent": true,
        "codeData": "{\n  \"text\": \"Random text\"\n}",
        "css": "* {\n  font-family: Open Sans;\n}\n\n#htmlgraphics-text {\n  background-color: var(--color-primary-main);\n  color: var(--color-primary-contrast-text);\n}\n\n#htmlgraphics-value {\n  background-color: var(--color-secondary-main);\n  color: var(--color-secondary-contrast-text);\n}\n",
        "dynamicData": false,
        "dynamicFieldDisplayValues": false,
        "dynamicHtmlGraphics": false,
        "dynamicProps": false,
        "html": "<div style=\"text-align: center;\">\n  <div class=\"box\" id=\"htmlgraphics-text\"></div>\n  <br />\n  <div class=\"box\" id=\"htmlgraphics-value\"></div>\n</div>\n",
        "onInit": "const textElt = htmlNode.querySelector(\"#htmlgraphics-text\");\nconst valueElt = htmlNode.querySelector(\"#htmlgraphics-value\");\n\ntextElt.textContent = customProperties.text;\n\n// Styling with css variables\nhtmlNode.lastElementChild.style.setProperty(\"--color-primary-main\", htmlGraphics.theme2.colors.primary.main)\nhtmlNode.lastElementChild.style.setProperty(\"--color-primary-contrast-text\", htmlGraphics.theme2.colors.primary.contrastText)\nhtmlNode.lastElementChild.style.setProperty(\"--color-secondary-main\", htmlGraphics.theme2.colors.secondary.main)\nhtmlNode.lastElementChild.style.setProperty(\"--color-secondary-contrast-text\", htmlGraphics.theme2.colors.secondary.contrastText)\n\n// Styling directly\ntextElt.style.border = `2px solid ${htmlGraphics.theme2.colors.primary.border}`\nvalueElt.style.border = `2px solid ${htmlGraphics.theme2.colors.secondary.border}`\n",
        "onInitOnResize": false,
        "onRender": "// Sets the value from the first series on every refresh\nconst htmlgraphicsValue = htmlNode.getElementById('htmlgraphics-value');\n\nif (htmlgraphicsValue) {\n  const valueField = data.series[0]?.fields[1];\n  if (valueField) {\n    const length = valueField.values.length;\n    htmlgraphicsValue.textContent = valueField.values.get(length - 1);\n  } else {\n    htmlgraphicsValue.textContent = \"No data\"\n  }\n}\n",
        "overflow": "visible",
        "panelupdateOnMount": true,
        "reduceOptions": {
          "calcs": [
            "lastNotNull",
            "last",
            "firstNotNull",
            "first",
            "min",
            "max",
            "mean",
            "median",
            "sum",
            "count",
            "range",
            "delta",
            "step",
            "diff",
            "logmin",
            "allIsZero",
            "allIsNull",
            "diffperc"
          ]
        },
        "renderOnMount": true,
        "rootCSS": "",
        "useGrafanaScrollbar": true
      },
      "pluginVersion": "2.1.1",
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "grafana"
          },
          "queryType": "randomWalk",
          "refId": "A"
        }
      ],
      "title": "Panel Title",
      "type": "gapit-htmlgraphics-panel"
    }
  ],
  "preload": false,
  "refresh": "",
  "schemaVersion": 40,
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "browser",
  "title": "Color Theme",
  "uid": "fefmwbcy4njswf",
  "version": 3,
  "weekStart": ""
}