Function darkMode with transition don't work

I have a problem. I try solve any solution but nothing works.

I try do make a transition on my color. when user change color (dark to light), it changes gradually. But, whit my code, don't work.

On my code, i have dark mode. But, for help me, i have palet on var css and my js change this var. it looks like this :

:root{
/*color*/
    /*light*/
        /*principal*/
            --color-Light-Principal-1 :#B8B3E9;
            --color-Light-Principal-2 :#EBE5FF;
            --color-Light-Principal-3 :#8783B7;

        /*secondary*/
            --color-Light-Secondary-1 :#75F4F4;
            --color-Light-Secondary-2 :#ACFFFF;
            --color-Light-Secondary-3 :#38C1C1;

        /*text*/
            --color-Light-Text :#113A3A;

        /*bouton positiv*/
            --color-Light-Bouton-Positiv :#D999B9;

        /*bouton Neutral*/
            --color-Light-Bouton-Neutral :#D17B88;

        /*bouton Negativ*/
            --color-Light-Bouton-Negativ :#4B296B;
        /*nuance Gray*/
            --color-Light-Gray-1:#504E61;
            --color-Light-Gray-2:#8E8CA1;

    /*dark*/
        /*principal*/
            --color-Dark-Principal-1 :#231C60;
            --color-Dark-Principal-2 :#220091;
            --color-Dark-Principal-3 :#25233C;

        /*secondary*/
            --color-Dark-Secondary-1 :#086464;
            --color-Dark-Secondary-2 :#008181;
            --color-Dark-Secondary-3 :#113A3A;

        /*text*/
            --color-Dark-Text :#CFF2F2;

        /*bouton positiv*/
            --color-Dark-Bouton-Positiv :#D999B9;

        /*bouton Neutral*/
            --color-Dark-Bouton-Neutral :#4A1A21;

        /*bouton Negativ*/
            --color-Dark-Bouton-Negativ :#170C20;
        /*nuance Gray*/
            --color-Dark-Gray-1:#4E4D61;
            --color-Dark-Gray-2:#2F2F36;
}

and my js :

DarkCheckBox.checked = DarkModeCheck

var r = document.querySelector(':root')

rs = getComputedStyle(r)


function DarkModeActiv(){
    rs = getComputedStyle(r)

    if (DarkCheckBox.checked){//dark
        LD = 'Dark'
    }

    else{//light
        LD = 'Light'
    }
    //principal
        change('--color-Principal-1', `--color-${LD}-Principal-1`)
        change('--color-Principal-2', `--color-${LD}-Principal-2`)
        change('--color-Principal-3', `--color-${LD}-Principal-3`)
    //secondary
        change('--color-Secondary-1', `--color-${LD}-Secondary-1`)
        change('--color-Secondary-2', `--color-${LD}-Secondary-2`)
        change('--color-Secondary-3', `--color-${LD}-Secondary-3`)

    //text
        change('--color-Text', `--color-${LD}-Text`)
    
    //bouton positiv
        change('--color-Bouton-Positiv', `--color-${LD}-Bouton-Positiv`)
    
    //bouton Neutral
        change('--color-Bouton-Neutral', `--color-${LD}-Bouton-Neutral`)
    
    //bouton Negativ
        change('--color-Bouton-Negativ', `--color-${LD}-Bouton-Negativ`)

    //nuance Gray
        change('--color-Gray-1', `--color-${LD}-Gray-1`)
        change('--color-Gray-2', `--color-${LD}-Gray-2`)

}

DarkModeActiv()

function DoubleZero(vari){
    if(vari == "NaN"){
        console.error(vari, "IL Y A UNE ERREUR !")
    }
        if (vari==0){
            return "00";
        }else{
            return vari;
        }
}

function change(Namevar, aft){
    
    hexaBef=[]
    hexaAft=[]
    hexaSubTempo=[]
    hexaExitTempo=[]

    n=5

    hexaBef[0] = rs.getPropertyValue(Namevar)
    hexaAft[0] = rs.getPropertyValue(aft)

    hexaBef[0] = hexaBef[0].substr(1, 7)
    hexaAft[0] = hexaAft[0].substr(1, 7)

    hexaBef[1] = parseInt(hexaBef[0].substr(0, 2).toString(10),16)
    hexaBef[2] = parseInt(hexaBef[0].substr(2, 2).toString(10),16)
    hexaBef[3] = parseInt(hexaBef[0].substr(4, 2).toString(10),16)

    hexaAft[1] = parseInt(hexaAft[0].substr(0, 2).toString(10),16)
    hexaAft[2] = parseInt(hexaAft[0].substr(2, 2).toString(10),16)
    hexaAft[3] = parseInt(hexaAft[0].substr(4, 2).toString(10),16)
    

    hexaSubTempo[0] =  hexaAft[1] - hexaBef[1]
    hexaSubTempo[1] =  hexaAft[2] - hexaBef[2]
    hexaSubTempo[2] =  hexaAft[3] - hexaBef[3]


    console.log(`===========================\n===========================\nstart with ${rs.getPropertyValue(Namevar)} : ${Namevar} (${hexaBef}) and end with ${rs.getPropertyValue(aft)} : ${aft} (${hexaAft})`)

    console.log(`hexaSubTempo = '${hexaSubTempo} \n ==========='`)

    if(hexaBef[0].length !== 0){
        for(i=1;i<n+1;i++){
                hexaExitTempo[0]=  (hexaSubTempo[0]/n)*i + hexaBef[1]
                hexaExitTempo[1]=  (hexaSubTempo[1]/n)*i + hexaBef[2]
                hexaExitTempo[2]=  (hexaSubTempo[2]/n)*i + hexaBef[3]
                
                console.log(`hexaExitTempo = '${hexaExitTempo}'`)
                r.style.setProperty(Namevar, `#${DoubleZero(hexaExitTempo[0].toString(16))}${DoubleZero(hexaExitTempo[1].toString(16))}${DoubleZero(hexaExitTempo[2].toString(16))}`)
        }
    }else{
        r.style.setProperty(Namevar, rs.getPropertyValue(aft))
    }
    console.log(`result : ${rs.getPropertyValue(aft)}`)
}

pleas. Can you help me ? T-T

Thanks for your read and help.