lms-app/src/app/settings/settings.component.html

<section class="page-container full-bg" color="black">
    <header class="nav-header">
        <button class="close-button" (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>
        <h5>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
            <span> Settings </span>
        </h5>
    </header>

    <ul>
        <li>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/010-moon.svg"></svg-icon>
            Night Mode

            <div class="end-slot">
                <div class="toggle" [ngClass]="{'active' : isNightModeOn }" (click)="isNightModeOn = !isNightModeOn"></div>
            </div>
        </li>
        <li>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/021-paint-brush.svg"></svg-icon>
            Theme
        </li>
        <li>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/008-bell.svg"></svg-icon>
            Notifications
        </li>
        <li>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/017-share.svg"></svg-icon>
            On Social Media
        </li>
        <li>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/019-favorites-button.svg"></svg-icon>
            Share and Rate
        </li>
        <li>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/012-round.svg"></svg-icon>
            FAQ
        </li>
        <li>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/015-login.svg"></svg-icon>
            Terms & Policy
        </li>
    </ul>
</section>