Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

Add dark theme variant

Browse Source
This commit is contained in:
Aaron van Geffen
2023-11-11 11:37:26 +01:00
parent ad2f6a964e
commit 68b5783a28
5 changed files with 156 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
templates/MainNavBar.php
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>';
}
}

3
templates/MainTemplate.php
View File

@@ -39,7 +39,8 @@ class MainTemplate extends Template
<link rel="stylesheet" href="', BASEURL, '/vendor/twbs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="', BASEURL, '/vendor/twbs/bootstrap-icons/font/bootstrap-icons.css">
<link type="text/css" rel="stylesheet" href="', BASEURL, '/css/default.css">
<script type="text/javascript" src="', BASEURL, '/js/main.js"></script>'
<script type="text/javascript" src="', BASEURL, '/js/main.js"></script>
<script type="text/javascript" src="', BASEURL, '/js/color-modes.js"></script>'
, $this->header_html, '
</head>
<body', !empty($this->classes) ? ' class="' . implode(' ', $this->classes) . '"' : '', '>