Recaptcha and Mapkit Dark Mode swapping with Javascript

darkmode.js

// Recaptcha HTML: <div class="g-recaptcha" data-sitekey="{{ site_key }}" data-theme="dark" id="recaptcha"></div>
// MapKit HTML: <div id="map" class="h-full"></div>
// (also requires installation of mapkit.js and recaptcha.js scripts)

var recpatcha = document.getElementById('recaptcha')
var mapKitColorMode = "light";

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    recpatcha.setAttribute('data-theme', 'dark');
    mapKitColorMode = "dark"
} else {
    recpatcha.setAttribute('data-theme', 'light');
}

var map = new mapkit.Map("map", {
    colorScheme: mapKitColorMode
});