Как переключить тему Tpparticles между темным и легким режимом на Astro JS? ⇐ Javascript

[Anonymous]

Я использую Tpparticles для моего веб-сайта, и у меня есть два файла JSON, которые предназначены для светового и темного режима, приведенная ниже версия Dark Mode: < /p>
{
"fullScreen": {
"enable": true,
"zIndex": -1
},
"fpsLimit": 120,
"detectRetina": true,
"particles": {
"number": {
"value": 225,
"density": {
"enable": true,
"area": 1500
}
},
"color": {
"value": [
"#f56565",
"#fd7e14"
]
},
"opacity": {
"value": 0.8,
"random": {
"enable": true,
"minimumValue": 0.5
}
},
"size": {
"value": {
"min": 1.5,
"max": 3.5
}
},
"links": {
"enable": true,
"distance": 100,
"color": "#f56565",
"triangles": {
"enable": true,
"opacity": 0.1
}
},
"move": {
"enable": true,
"speed": 10,
"direction": "none",
"random": true,
"outModes": {
"default": "out",
"bottom": "out",
"left": "out",
"right": "out",
"top": "out"
}
}
},
"interactivity": {
"detectsOn": "window",
"events": {
"onHover": {
"enable": true,
"mode": "repulse"
},
"onClick": {
"enable": true,
"mode": "push"
}
},
"modes": {
"repulse": {
"distance": 100,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 5,
"easing": "ease-out-quad"
}
}
},
"background": {
"color": {
"value": "#000000"
}
}
}
< /code>
И общий рендеринг этого делается в макете, как я хочу на всех страницах: < /p>




{pageTitle}




< /code>
Очень мало онлайн по поводу этой конкретной проблемы, которая является актуальной, и я не совсем уверен, как настроить кнопку Light и Dark Mode из-за этого. Как я могу включить способность к темной и легкой режиме для моего фона Tsparticles, которая не так сильно препятствует производительности?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... n-astro-js