<div class="globe-container"> <canvas id="cobe" style="width: 500px; height: 500px" width="1000" height="1000" ></canvas> </div> <style> .globe-container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px 0; } </style> <script type="module"> import createGlobe from 'https://cdn.skypack.dev/cobe' let phi = 0 let canvas = document.getElementById("cobe") // Detect system dark mode const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches const globe = createGlobe(canvas, { devicePixelRatio: 2, width: 1000, height: 1000, phi: 0, theta: 0.3, dark: isDarkMode ? 1 : 0, diffuse: 1.2, scale: 1, mapSamples: 16000, mapBrightness: isDarkMode ? 15 : 4, baseColor: isDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3], markerColor: [0.1, 0.8, 1], glowColor: isDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2], offset: [0, 0], markers: [ { location: [37.7595, -122.4367], size: 0.03 }, { location: [40.7128, -74.006], size: 0.1 }, ], onRender: (state) => { state.phi = phi phi += 0.005 }, }) // Listen for system theme changes window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { const newIsDarkMode = e.matches globe.dark = newIsDarkMode ? 1 : 0 globe.baseColor = newIsDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3] globe.mapBrightness = newIsDarkMode ? 15 : 4 globe.glowColor = newIsDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2] }) </script>