I have a website that can make dark/light mode from the backend but I would like to add this option to the frontend with toggle button in navbar the following code to switch between light and dark mode any seggtion with JS or HTML toggle ? , any help?

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitches">
    <label class="custom-control-label" for="customSwitches">Toggle this switch element</label>
</div>
        <form method="post" action="{{ route('admin.settings.update',$siteInfo->id) }}">
            @csrf
            @method('PUT')
            <input type="hidden" name="ui" value="2">
            <center><button class="btn btn-primary col-md-10 mb-1" @if($siteInfo->ui==2) type="button" @else  type="submit"  @endif> @if($siteInfo->ui==2) Active <i class="fa fa-check"></i> @else Select @endif </button> </center>
                    <center>
                        <br>
                        <b>Light Theme</b>
                    </center>
            </form>
            <form method="post" action="{{ route('admin.settings.update',$siteInfo->id) }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="ui" value="1">
                <center><button class="btn btn-primary col-md-10 mb-1" @if($siteInfo->ui==1) type="button" @else   type="submit" @endif> @if($siteInfo->ui==1) Active <i class="fa fa-check"></i> @else Select @endif </button> </center>
                <center>
                    <br>
                    <b>Dark Theme</b>
                </center>
            </form>```