Closed CharlieSnowCode closed 7 months ago
Thanks @CharlieSnowCode for reporting the bug, Will verify and get back to you.
Can you share the complete style details
the body background looks black and the table bg looks white
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);
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;
}
Works like a champ, thanks for the quick fix!
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)
but the result still looks like:![image](https://github.com/rangav/thunder-client-support/assets/67278867/5462975f-c232-4c17-ae9d-caf5c038a2c1)
Windows VS Code v 1.85.2 TC v 2.17.1 paid version