Add dark theme variant

This commit is contained in:
2023-11-11 11:37:26 +01:00
parent 238dc1d6e7
commit 0d094996df
5 changed files with 153 additions and 17 deletions

View File

@@ -50,6 +50,8 @@ class MainNavBar extends NavBar
$userMenu = new UserMenu();
$this->renderMenuItems($userMenu->getItems());
$this->darkModeToggle();
echo '
</ul>
</div>';
@@ -59,4 +61,36 @@ class MainNavBar extends NavBar
</div>
</nav>';
}
private function darkModeToggle()
{
echo '
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
id="bd-theme" type="button" data-bs-toggle="dropdown" data-bs-display="static">
<i id="theme-icon-active" class="bi bi-light"></i>
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
<i class="bi bi-sun-fill"></i>
Light
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
<i class="bi bi-moon-stars-fill"></i>
Dark
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
<i class="bi bi-circle-half"></i>
Auto
</button>
</li>
</ul>
</li>';
}
}