JSFiddle - React, Tailwind, and code Playground

by coktopus

CSS

:root{
  --background-Color : red
}
body {
  background-color:var(--background-Color);
}

JavaScript

var buttonDark = document.getElementById('dark');
var buttonLight = document.getElementById('light');

buttonDark.addEventListener('click', changeTheme)
buttonLight.addEventListener('click', changeTheme)

function changeTheme (e) {
	let theme = e.target.id
  switch(theme){
  case 'dark':
  document.documentElement.style.setProperty('--background-Color', 'green')
  console.log('dark', window.getComputedStyle(document.documentElement).getPropertyValue('--background-Color'));
  break;
  case 'light':
  document.documentElement.style.setProperty('--background-Color', 'red')
  console.log('light');
  break;
  default:
  console.log('default');
  }
}