Problem ze zmianą koloru na przycisku (element button)

Witam.
Zwracam się do szacownego forum o pomoc, ponieważ funkcja nie zmienia koloru przycisku (ms Edge) w takim oto kodzie

<html lang="pl">
<head>
   <meta charset="utf-8" />
   <style>
               body{display:flex;align-items:center;justify-content:center;}
               body{height:96.5vh;border:2px solid black;border-radius:4px;}
               button{width:14vw;height:9vh;font:24px italic arial,serif;border-radius:4px;}
               button{cursor: pointer;color:white;}
   </style>
</head>
<body>
   <button style="background-color:darkRed;">Test</button>
   
   <button onClick="start();">Zmień kolor</button>
   
   <script>
    function start(){
    
    let przycisk = document.querySelectorAll("BUTTON")[0];
    
    //jesli ma kolor czerwony
    for(let i = 0; i < (przycisk.style.backgroundColor == 'darkRed') ; i++){
         
              setTimeout(function(){
                                    przycisk.style.backgroundColor = 'darkBlue';},200);}
    
    //jesli ma kolor niebieski                                         
    for(let i = 0; i < (przycisk.style.backgroundColor == 'darkBlue') ; i++){
  
      setTimeout(function(){
                            przycisk.style.backgroundColor = 'darkRed';},200);}}
   </script>
</body>
</html>

Jak żyć?

To, co przeglądarka zwróci jako style.backgroundColor, musi być zinterpretowane, ponieważ przeglądarka zmienia tę wartość na dowolną poprawną w formacie https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#formal_syntax . Więc po co w ogóle to interpretować, skoro wiadomo było wcześniej, jaką wartość się ustawiało.
Po prostu u Ciebie brakuje warstwy abstrakcji. Na przykład używając w tym celu klas CSS. Ogólna idea jest w tym przykładzie.
Tę warstwę abstrakcji możesz rozumieć jako opis strony (model) bez względu na konkretną konfigurację (konkretne kolory).
Mam nadzieję, że dodałem Ci sporo pracy do interpretacji formalnej składni koloru, jaki przeglądarka może zwrócić, gdy w sprzeciwie do zastosowania abstrakcji będziesz zamierzał zrobić „wszystko po swojemu”. ;)

Tak działa!

<html lang="pl">
           <head>
                       <meta charset="utf-8" />
                       <style>
                                   body{display:flex;align-items:center;justify-content:center;}
                                   body{height:96.5vh;border:2px solid black;border-radius:4px;}
                                   button{width:14vw;height:9vh;font:24px italic arial,serif;border-radius:4px;}
                                   button{cursor: pointer;color:white;}
                       </style>
           </head>
           <body>
                 <button style="background-color:darkRed;">Test</button>
                       
                 <button onClick="start();">Zmień kolor</button>
                       
<script>                       
                      
function start(){
      
                 let przycisk = document.querySelectorAll("BUTTON")[0];

                 //jesli ma kolor czerwony
                 for(let i = 0; i < (przycisk.style.backgroundColor == 'darkred') ; i++){
                         
                               setTimeout(function(){
                                                    przycisk.style.backgroundColor = 'darkblue';},200);}

                 //jesli ma kolor niebieski                                         
                 for(let i = 0; i < (przycisk.style.backgroundColor == 'darkblue') ; i++){
                      
                              setTimeout(function(){
                                                  przycisk.style.backgroundColor = 'darkred';},200);}}
                              
 </script></body></html>