JSFiddle - React, Tailwind, and code Playground

HTML

<button id="invert-colors">Invert colors</button>

CSS

table {
  border-collapse: separate;
  border-spacing: 10px;
  margin-top: 10px;
}

td {
  width: 28px;
  height: 28px;
  border: 1px solid black;
}

td,
table.inverted td.marked
{
  background-color: white;
}

td.marked,
table.inverted td
{
  background-color: black;
}

JavaScript

var table = document.createElement('table');
for (var i = 0; i < 6; i++){
    var tr = document.createElement('tr');   
    for (var j = 0; j < 6; j++) {
    	tr.appendChild(document.createElement('td'));
    }
    table.appendChild(tr);
}
document.body.appendChild(table);

table.addEventListener('mousedown', function (event) {
  var cell = event.target;
  if (cell.tagName !== 'TD') {
  	return false;
  }
  if (cell.classList.contains('marked')) {
  	cell.classList.remove('marked');
  } else {
  	cell.classList.add('marked');
  }
});

document.getElementById('invert-colors').addEventListener('click', function () {
	if (table.classList.contains('inverted')) {
  	table.classList.remove('inverted');
  } else {
  	table.classList.add('inverted');
  }
});