Add dark theme variant
This commit is contained in:
@@ -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>';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user