EAU/dist/html/fragments/settings.html

<div class="setting-wraper">
    <!-- Sidebar -->
    <nav id = "setting-sidebar">
        <ul class="list-unstyled components">
            <li class ="list">
                <a href="#Auto">Game detection</a>
            </li>
            <li>
                <a href="#Man">Manually add game</a>
            </li>
            <li>
                <a href="#Man">Appearances</a>
            </li>
        </ul>       
    </nav>

    <!-- Content -->
    <div class = "container">
        <h1 name ="Auto">Automatic game detection</h1>
        <p>Sign in trought steam to register your steam game on this PC</p>
        <a class="browser" href="http://eau.raccoon-sdg.fr/steamLog.php">
            <img href="http://eau.raccoon-sdg.fr/steamLog.php" src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_small.png" alt="Sign in with Steam"/>
        </a>

        <h1 name ="Man">Manually add game</h1>
        <p>To add game please wait 10 years and come back here.</p>

        <h1 name ="Man">Appearances</h1>
        <p>Use the dark mode: </p> <span>
        <div class="switch">
            <label>
                Off
                <input type="checkbox">
                <span class="lever"></span>
                On
            </label>
          </div>
        </span>
    </div>
</div>


<script>
    $(".browser").click((event) => 
    {
        if(shell != null)
            event.preventDefault();
            
        shell.openExternal(event.currentTarget.href);
    });
    
    if($("#body").hasClass("dark-mode"))
    {
        $(".switch").find("input[type=checkbox]").prop("checked", true);
    }

    $(".switch").find("input[type=checkbox]").on("change",function() {
        var checked = $(this).prop("checked");

        if(checked)
            $("#body").addClass("dark-mode");
        else
            $("#body").removeClass("dark-mode");
    });
</script>