Grid colors

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>

<div class="container" id="original">

</div>

<div class="container" id="newcolors">

</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css");

@media (prefers-color-scheme: light) {
  :root {
    --highcharts-background-color: #ffffff;
    --mix: red;
    --text: #404040;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --highcharts-background-color: #141414;
    --mix: red;
    --text: #bfbfbf;
  }
}

:root {
  --highcharts-neutral-color-100: color-mix(
    in srgb-linear,
    var(--mix) 100%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-80: color-mix(
    in srgb-linear,
    var(--mix) 80%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-60: color-mix(
    in srgb-linear,
    var(--mix) 60%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-40: color-mix(
    in srgb-linear,
    var(--mix) 40%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-20: color-mix(
    in srgb-linear,
    var(--mix) 20%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-10: color-mix(
    in srgb-linear,
    var(--mix) 10%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-5: color-mix(
    in srgb-linear,
    var(--mix) 5%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-3: color-mix(
    in srgb-linear,
    var(--mix) 3%,
    var(--highcharts-background-color)
  );
  --highcharts-neutral-color-0: color-mix(
    in srgb-linear,
    var(--mix) 0%,
    var(--highcharts-background-color)
  );
}

.container {
  height: 400px;
  margin: 20px;
}

body {
  background: var(--highcharts-background-color);
}

.theme-palette {
  --hcg-padding: 15px;
  --hcg-border-width: 1px;
  --hcg-column-border-width: 0;
  --hcg-color: var(--text);
  --hcg-border-color: var(--highcharts-neutral-color-40);
  --hcg-row-border-color: var(--highcharts-neutral-color-20);
  --hcg-background:...

JavaScript

function generateDataTable(numRows, numColumns) {
  const result = { columns: {} }

  for (let col = 1; col <= numColumns; col++) {
    const colName = "C" + col
    result.columns[colName] = []
    for (let row = 1; row <= numRows; row++) {
      result.columns[colName].push(col + "." + row)
    }
  }
  return result
}

Grid.grid("original", {
  dataTable: generateDataTable(50, 5),
  caption: {
    text: "The original",
  },
})



Grid.grid("newcolors", {
  dataTable: generateDataTable(50, 5),
  caption: {
    text: "New palette",
  },
  rendering: {
    theme: "theme-palette",
  },
})