@{
    bool switchIsActive = (bool)ViewBag.SwitchIsActive;
}

<li class="nav-item ml-auto" id="switch">
    <a class="btn px-2 pb-2"><i class="fa fa-sun-o fa-lg"></i></a>
    <div id="switch-2" class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="btn-switch-theme" @(switchIsActive ? "checked" : "") />
        <label class="custom-control-label" for="btn-switch-theme"></label>
    </div>
    <a class="btn px-0 pb-2"><i class="fa fa-moon-o fa-lg"></i></a>
</li>

<style>
    #switch {
        /*border: 1px dotted red;*/
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
    }
</style>

<script type="text/javascript">
    // This seccion configure the paths at the css files used in button change theme
    document.addEventListener('DOMContentLoaded', function () {
        sheetThemeLight = "@crud.Controllers.BaseController.FILE_THEME_LIGHT";
        sheetThemeDark = "@crud.Controllers.BaseController.FILE_THEME_DARK";
    });
</script>