Website dark mode change triggers video source change

I have a custom button in my WordPress Elementor page that randomly changes the video playing on the website. The URLs are defined in the back end, and the PHP code is added in the footer. Not much to it, seems to work well:

<?php
$all_random_urls = array();
if( have_rows('videor_random_url') ):

    while( have_rows('videor_random_url') ) : the_row();

        $sub_value = get_sub_field('add_videor_random_url');
        $all_random_urls[] = $sub_value;
        
    endwhile;

else :
    // Do something...
endif;
?>
<script>
    jQuery(document).ready(function() {
        var all_datas = "";
        var new_video_url = "";
        setTimeout(function() {
            all_datas = <?php echo json_encode($all_random_urls); ?>;
            
            jQuery('#random_video_changer').on('click', function() {
                var present_video_url = all_datas[Math.floor(Math.random() * all_datas.length)];
                if(new_video_url != '' && new_video_url == present_video_url) {
                    present_video_url = all_datas[Math.floor(Math.random() * all_datas.length)];                    
                    new_video_url = present_video_url;
                    jQuery('.mdp-videor-video video.elementor-video').attr('src', new_video_url);
                } else {
                    new_video_url = present_video_url;
                    jQuery('.mdp-videor-video video.elementor-video').attr('src', new_video_url);   
                }
            });
        }, 2000);
        
    });
</script>

What I am trying to do now is use the dark mode toggle button from my Darklup plugin to change the video playing. I have managed to do it by changing the on-click from ‘#random_video_changer’ to whatever the div id/class of the button is. This works but in this way it is impossible to use different videos for dark and light theme since every button click toggles a video change. I have been trying to change the following plugin js to call for video change when theme is dark or light, but I am struggling to get any results.

    darkModeSwitchEvent: function() {

            let $that = this;

            $(this.switchTrigger).on( 'click', function(e) {

                let $this = $(this);

                $('html').toggleClass($that.darkEnabledClass);

                // Storage data
                if( $this.is(':checked') ) {
                    localStorage.setItem("darklupModeEnabled", $that.darkEnabledClass);
                    localStorage.setItem("triggerCheked", "checked");
                    $this.closest('.darkluplite-mode-switcher').addClass('darkluplite-dark-ignore');

                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                        localStorage.removeItem("lightOnOSDarkCheked");
                    }
                } else {
                    $this.closest('.darkluplite-mode-switcher').removeClass('darkluplite-dark-ignore');
                    localStorage.removeItem("darklupModeEnabled");
                    localStorage.removeItem("triggerCheked");

                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                        localStorage.setItem("lightOnOSDarkCheked", true);
                    }
                }

            } )

What would be the simplest way to achieve this – when light mode is active the video is played from video array 1, when dark mode is active, video is played from video array 2?

I am trying to learn how to do this on my own but have spent few hours on this now without any movement in the right direction, so any help is greatly appreciated.