<h1>
CSS custom property change on hover
</h1>

html,
body {
  /* full page height */
  height: 100%;
}

body {
  --bg: #f00;
  background-color: var(--bg);
  transition: background-color 1s;
}

body:hover {
  --bg: #ff0;
}