Add dark theme variant

This commit is contained in:
2023-11-11 11:37:26 +01:00
parent ad2f6a964e
commit 68b5783a28
5 changed files with 156 additions and 20 deletions

View File

@@ -51,6 +51,8 @@ class MainNavBar extends NavBar
$userMenu = new UserMenu();
$this->renderMenuItems($userMenu->getItems());
$this->darkModeToggle();
echo '
</ul>
</div>';
@@ -60,4 +62,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>';
}
}