<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      
    </style>
  </head>
  <body>
       <input
                    id="mode_spc"
                    type="checkbox"
                    data-toggle="toggle"
                    data-style="ios"
                    data-onstyle="warning"
                    data-offstyle="primary"
                />
    <h1>Dark test</h1>
    <p> Etwas text für den Darkmodus test</p>
    
    <script>
      $(document).ready(function () {
if(localStorage.getItem("Messung_mode_spc")){

}else{
     localStorage.setItem("Messung_mode_spc", true); 
}
//console.log(localStorage.getItem("Messung_mode_spc"));
if(localStorage.getItem("Messung_mode_spc")=='true'){
     $("#mode_spc").prop("checked",true) 
     dark();
}else{
     $("#mode_spc").prop("checked",false)  
     hell();
}

  
$("#mode_spc").change(function () {
     let was=$(this).prop("checked");
     if(was == true){
          dark();
     }
     if(was == false){
          hell();
     }
});

  
  
function dark() {
     $("p,h1").css('color','white');
     $("body").css('background','black');
     localStorage.setItem("Messung_mode_spc", true);
}
function hell() {
     $("p,h1").css('color','black');
     $("body").css('background','white');
     localStorage.setItem("Messung_mode_spc", false);
}
})
    </script>
  </body>
</html>            
         
            
                           
        
            
                           
         

External Javascript and CSS