particlesJS("particles-js", {
  "particles": {
    "number": { "value": 100, "density": { "enable": true, "value_area": 800 } },
    "color": { "value": "#ffffff" }, // Pure white particles
    "shape": { "type": "circle" },
    "opacity": { "value": 0.5, "random": false },
    "size": { "value": 2.5, "random": false },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff", // Pure white lines
      "opacity": 0.4,
      "width": 1
    },
    "move": { "enable": true, "speed": 1.5, "direction": "none" }
  },
  "retina_detect": true
});

// 1. Create a media query matcher for dark mode
const darkModeMatcher = window.matchMedia("(prefers-color-scheme: dark)");

// 2. Define a function to update particle colors dynamically
function updateParticleColor(isDark) {
  if (typeof pJSDom !== "undefined" && pJSDom.length > 0) {
    const pJS = pJSDom[0].pJS; // Targets the first canvas instance
    const targetColor = isDark ? "#493354" : "#FFFFFF"; // White for dark, Black for light

    // Update config paths
    pJS.particles.color.value = targetColor;
    pJS.particles.line_linked.color = targetColor;

    // Refresh canvas to draw the changes
    pJS.fn.particlesRefresh();
  }
}

// 3. Listen for changes at runtime (e.g., if user toggles system mode)
darkModeMatcher.addEventListener("change", (event) => {
  updateParticleColor(event.matches);
});

// 4. Run immediately on page load to set the initial correct color
updateParticleColor(darkModeMatcher.matches);