Как изменить цвет 3 делений, используя 3 разных массива

Question

Как изменить цвета 3 делений, используя 3 массива, предоставленные при нажатии кнопки изменения темы.

<script>
var colors = ['red', 'green', 'blue']
var colors1 = ['teal', 'brown', 'tan']
var colors2 = ['orange', 'purple', 'black'];
var boxed = document.querySelectorAll(".box");
var button = document.querySelector("button");

button.addEventListener("click", function () {
   for (i = 0; i < boxed.length; i++) {
        boxed[i].style.backgroundColor = colors[Math.floor(Math.random() * 3)];
        boxed[i].style.width = '100px';
        boxed[i].style.height = '100px';
        boxed[i].style.display = 'inline-block';
  }
});
button.style.cursor = "pointer";
</script>

Answer 1

Я думаю, вы хотите что-то вроде этого -

Обновлен код для требования

var colors = [
  ['red', 'green', 'blue'],
  ['teal', 'brown', 'tan'],
  ['orange', 'purple', 'black']
]

var boxed = document.querySelectorAll(".box");
var button = document.querySelector("button");

button.addEventListener("click", function () {
    let colorIndex = Math.floor(Math.random() * 3);
   for (i = 0; i < boxed.length; i++) {
         
        boxed[i].style.backgroundColor = colors[colorIndex][i];
        boxed[i].style.width = '100px';
        boxed[i].style.height = '100px';
        boxed[i].style.display = 'inline-block';
  }
});
button.style.cursor = "pointer";

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: gray;
}

<div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <button>Theme</button>

Answer 2

как то так?

const colors= [ ['red', 'green', 'blue']
              , ['teal', 'brown', 'tan']
              , ['orange', 'purple', 'black'] ]
  ,   boxed  = document.querySelectorAll(".box")
  ,   button = document.querySelector("button")
  ;
button.onclick=_=>
  {
  let colorN = Math.floor(Math.random() *3)
  boxed.forEach((box,i)=>
    {
    box.style.backgroundColor = colors[colorN][i];
    })
  }

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: lightgrey;
}

<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>

<button>change Colors</button>