html ubah warna background

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Latihan Toggle Warna</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <style>
    body {
      transition: background-color 0.5s ease;
      background-color: var(--pico-background-color);
    }
    body > main {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
  </style>
</head>
<body>
    <main class="container">
        <button id="tombolWarna">Ubah Warna Latar</button>
    </main>

    <script src="latihan2.js"></script>
</body>
</html>