form elemanlarına required verildiği zaman basit bir kontrol işlemi oluyor. Yazmış olduğun formda required vermişsin ve sorun yok bu kısımda. Sadece öğeyi denetle diyerek bu required silinirse otomatik bu kontrol yapılmamış oluyor. En sağlıklısı back end tarafında kontrol yapmak ve gelen cevaba uygun aksiyon almak olacaktır.

Düzeltme

changeTheme foksiyonunda if else kısmındaki doma dark class'ını basmanı yanlış kontrol etmiştim. Aşağıdaki gibi olmalı

function changeTheme(){
  if (localStorage.getItem("theme") == "dark") {
    localStorage.setItem("theme","");
    document.body.classList.remove('dark');
  }else{
    localStorage.setItem("theme","dark");
    document.body.classList.add('dark');
  }
}

css dosyanızı buna uygun şekilde düzenleyip daha sonra tasaımın içtediğiniz kısmına dark/light adlı bir
buton koyarak her kliklendiğinde body'e dark adlı classı eklemesini ve silmesini sağlayabilirsiniz.

.box {
  background: #fff;
}
.form-control {
  background: #eee;
}
body.dark .box {
  background: #000;
}
body.dark .form-control {
  background: #333;
}

Fakat bu zaman sayfa yenilendiğinde tekrardan light tema gözükecektir. Bunun için seçilen temayı localstorage'de bir değere tanımlamamız gerekiyor. ver her defa dom yüklendiğinde localstorageden değeri alıp bodye eklemesi gerekiyor.

document.addEventListener('DOMContentLoaded', () => {
  if (localStorage.getItem("theme") == "dark" && !document.body.classList.contains('dark')) {
    document.body.classList.add(localStorage.getItem("theme"));
  }
});

function changeTheme(){
  if (localStorage.getItem("theme") == "dark") {
    localStorage.setItem("theme","");
    document.body.classList.add('dark');
  }else{
    localStorage.setItem("theme","dark");
    document.body.classList.remove('dark');
  }
}

İnputlara bir id vererek fonksiyonun içinde değerle tutabilir ve kontrol edebilirsin.

function personel_ekle_ajax() {
  var veriler = $('#personel_ekle_ajax').serialize();
  var username_input = $('#username_id').val()
  var password_input = $('#username_id').val()
  if(username_input.length <= 0){
    alert('Kullanıcı adını giriniz');
  }else if(password_input.length <= 0){
    alert('Şifreni giriniz');
  }else{
    $.ajax({
      type: "POST",
      url: "ajax/personel_ekle.php",
      data: veriler,
      success: function (response){
        toastr.success('İşlem başarıyla sonuçlandı');
        FormSifirla($('#personel_ekle_ajax'));
      },
      error: function (response) {
        toastr.error('Lütfen zorunlu alanları doldurunuz.');
      }
    })
  }
};

Ve ya aksenkron bir işlemin olacak ve sana gelecek cevaba göre bir aksiyon almak istiyorsan ajax/personel_ekle.php içerisinde verilere göre bir if else sütnu kurup
bir cevap göndererek aksiyonu aşağıdaki gibi alabilirsin

function personel_ekle_ajax() {
  var veriler = $('#personel_ekle_ajax').serialize();
  $.ajax({
    type: "POST",
    url: "ajax/personel_ekle.php",
    data: veriler,
    success: function (response){
      if (response=='username_err') {
        aler('Hata');
      }else if(response=='password_err'){
        aler('Hata');
      }else{
        toastr.success('İşlem başarıyla sonuçlandı');
        FormSifirla($('#personel_ekle_ajax'));
      }
    }
  })
};

<script type="text/javascript">

  $(document).ready(function(){

    $("#forms").submit(function(){

      var formID=$(this).attr('id');
      var formDetails=$('#'+formID);

  $.ajax({

    type:"POST",
    url:'../adminn/islem.php',
    data:formDetails.serialize(),
    success: function(data) {
    //Hata aldığım yer
    veri=data;
    console.log(data);
    swal("Giriş Başarılı",veri.message,veri.status);
    } 

  });

  return false;

});

});

</script>

Buradaki hata senin ajaxda veriyi json.parse etmende zaten. Etmene gerek yok. Php tarafında json_encode ederken veriyi yeterli olacaktır. ajaxdaki success kısmında datanı direk al ve kullan

Öğrenme aşamasındayken Vue Js ile başlaman çok daha iyi olacaktır. Zira Reactın yapısı ilk başta biraz kafanı karıştırabilir. Vue tarafında yeterince bilgiye sahip olursan ardından diğer framework ve kütüphanelere yelken açabilirsin. Vay anasını yelken açmak falan moruk on numara. Ve Flutterle React Native konusuna gelecek olursak eğer vue ardından react öğreneceğim diyorsan ardından da react nativle front end tarafında kendini oldukça geliştirmiş olursun.