javier/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

darkmode test (weirdly slow not sure if PC)

Browse Source
This commit is contained in:
Anthony Stirling
2023-04-21 17:50:59 +01:00
parent d98473f5e3
commit f5ceede3cd
8 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/main/resources/templates/fragments/common.html
View File

@@ -31,38 +31,47 @@
<script>
function toggleDarkMode() {
var checkbox = document.getElementById("toggle-dark-mode");
var darkModeStyles = document.getElementById("dark-mode-styles");
if (checkbox.checked) {
localStorage.setItem("dark-mode", "on");
darkModeStyles.disabled = false;
} else {
var darkModeIcon = document.getElementById("dark-mode-icon");
if (localStorage.getItem("dark-mode") == "on") {
localStorage.setItem("dark-mode", "off");
darkModeStyles.disabled = true;
darkModeIcon.src = "sun.svg";
} else {
localStorage.setItem("dark-mode", "on");
darkModeStyles.disabled = false;
darkModeIcon.src = "moon.svg";
}
}
$(document).ready(function() {
document.addEventListener("DOMContentLoaded", function () {
var darkModeStyles = document.getElementById("dark-mode-styles");
var checkbox = document.getElementById("toggle-dark-mode");
var darkModeIcon = document.getElementById("dark-mode-icon");
// Check if the user has already set a preference
if (localStorage.getItem("dark-mode") == "on") {
darkModeStyles.disabled = false;
checkbox.checked = true;
darkModeIcon.src = "moon.svg";
} else if (localStorage.getItem("dark-mode") == "off") {
darkModeStyles.disabled = true;
checkbox.checked = false;
darkModeIcon.src = "sun.svg";
} else {
// Check the OS's default dark mode setting
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
darkModeStyles.disabled = false;
checkbox.checked = true;
darkModeIcon.src = "moon.svg";
} else {
darkModeStyles.disabled = true;
checkbox.checked = false;
darkModeIcon.src = "sun.svg";
}
}
// Attach the toggleDarkMode function to the click event of the dark mode toggle
document.getElementById("dark-mode-toggle").addEventListener("click", function (event) {
event.preventDefault();
toggleDarkMode();
});
});
</script>

12
src/main/resources/templates/fragments/navbar.html
View File

@@ -107,6 +107,11 @@ function compareVersions(version1, version2) {
background-color: #ccc; /* Adjust the color as needed */
}
#dark-mode-icon {
width: 20px;
height: 20px;
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -268,8 +273,11 @@ function compareVersions(version1, version2) {
</ul>
<ul class="navbar-nav ml-auto flex-nowrap">
<input type="checkbox" id="toggle-dark-mode" checked="true" th:onclick="javascript:toggleDarkMode()">
<label class="nav-link mb-0" href="#" for="toggle-dark-mode" th:text="#{navbar.darkmode}"></label>
<li class="nav-item">
<a class="nav-link" id="dark-mode-toggle" href="#">
<img id="dark-mode-icon" src="moon.svg" alt="Toggle Dark Mode" />
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">