const cssFiles = {

  red: 'JjLOVdW',

  green: 'OJvOGVB',

  blue: 'MWVORaw'

}

​

function selectSchema(schema) {

  // Select button and unselect the other button

  document.querySelectorAll('button').forEach(el => el.classList.remove('selected'));

  document.getElementById(schema).classList.add('selected');

  // Find reference to palette sheet in CodePen. In a real app you can just use an id attribute.

  const baseUrl = 'https://codepen.io/fevanwijk/pen/';

  const stylesheets = document.querySelectorAll(`[href^="${baseUrl}"]`);

  const palettesheet = Array.from(stylesheets).find(sheet => Object.values(cssFiles).some(id => sheet.href.match(id)));

  // Replace CSS file  

  palettesheet.href = baseUrl + cssFiles[schema] + '.css'; 

}

​

document.getElementById('red').addEventListener('click', () => {

  selectSchema('red');

});

​

document.getElementById('blue').addEventListener('click', (e) => {

  selectSchema('blue');

});

​

document.getElementById('green').addEventListener('click', (e) => {

  selectSchema('green');

});

​