Visualization not working when using dark theme in VS Code

[CharlieSnowCode]

We are not able to override the text color in the Visualization. This presents a problem for our users who prefer a dark theme.

I am trying the following for the top part of the suggested template to force the text to always be black, (the rest is unchanged)

var html = `
    <style>
      body {
        font-size: 13px;
        font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: black;
      }

      /* Check for dark mode */
      @media (prefers-color-scheme: dark) {
        body {
          color: black;
          background-color: #1e1e1e;
        }
      }

but the result still looks like:

Windows VS Code v 1.85.2 TC v 2.17.1 paid version

[rangav]

Thanks @CharlieSnowCode for reporting the bug, Will verify and get back to you.

[rangav]

Can you share the complete style details

the body background looks black and the table bg looks white

[CharlieSnowCode]

Using the VS Code theme "Dark (Visual Studio)"

var response = tc.response.json;

var html = `
    <style>
      body {
        font-size: 13px;
        font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: black;
      }

      /* Check for dark mode */
      @media (prefers-color-scheme: dark) {
        body {
          color: black;
          background-color: #1e1e1e;
        }
      }

      table {
        width: 100%;
        box-sizing: border-box;
        border-collapse: collapse;
        border-spacing: 0;
      }

      th {
        background-color:#87ceeb;
      }

      td,
      th {
        padding: 0;
      }

      th, td {
        padding: 4px 6px;
        text-align: left;
        border-bottom: 1px solid #E1E1E1;

        border-width: 1px;
        border-style: solid;
        border-color: #000000;
      }

  </style>

    <div id="container"></div>

    <script>
         // get the container element
         let container = document.getElementById("container");

         var cols = Object.keys(chart_data[0]);

          var headerRow = '<tr>';
          var bodyRows = '';

          cols.map(function(col) {
              headerRow += '<th>' + col + '</th>';
          });

          headerRow += '</tr>';

          chart_data.map(function(row, index) {
              bodyRows += '<tr style="background-color: ' + (index % 2 === 0 ? 'white' : 'white') + ';">';

              cols.map(function(colName) {
                  bodyRows += '<td>' + row[colName] + '</td>';
              })

              bodyRows += '</tr>';
          });

          var tabledata=  '<table>' + headerRow + bodyRows + '</table>';
         container.innerHTML = tabledata; // set table html

   </script>`

   tc.chartHTML(html, response);

[rangav]

I published a new version v2.17.3 to fix the text color.

Please update and let me know your feedback.

for dark theme customization you can use .vscode-dark class

example below

/* Check for dark mode */
 .vscode-dark th, .vscode-dark td {
    border-bottom: 1px solid #555;
  }

[CharlieSnowCode]

Works like a champ, thanks for the quick fix!