darkmode test (weirdly slow not sure if PC)

src/main/resources/messages_ar_AR.properties

@@ -181,6 +181,9 @@ pdfOrganiser.title=منظم الصفحة
 pdfOrganiser.header=منظم صفحات PDF
 pdfOrganiser.submit=إعادة ترتيب الصفحات
 
+#multiTool
+multiTool.title = أداة متعددة PDF
+multiTool.header = أداة متعددة PDF
 
 #pageRemover
 pageRemover.title=مزيل الصفحة

src/main/resources/messages_de_DE.properties

@@ -180,6 +180,9 @@ pdfOrganiser.title=Seiten anordnen
 pdfOrganiser.header=PDF Seitenorganisation
 pdfOrganiser.submit=Seiten anordnen
 
+#Mehrfachwerkzeug
+multiTool.title=PDF-Multitool
+multiTool.header=PDF-Multitool
 
 #pageRemover
 pageRemover.title=Seiten entfernen

src/main/resources/messages_es_ES.properties

@@ -182,6 +182,9 @@ pdfOrganiser.title=Organizador de páginas
 pdfOrganiser.header=Organizador de páginas PDF
 pdfOrganiser.submit=Organiza páginas
 
+#herramienta multiple
+multiTool.title=Multiherramienta PDF
+multiTool.header=Multiherramienta PDF
 
 #pageRemover
 pageRemover.title=Eliminador de páginas

src/main/resources/messages_fr_FR.properties

@@ -183,6 +183,10 @@ pdfOrganiser.title=Organisateur de pages
 pdfOrganiser.header=Organisateur de pages PDF
 pdfOrganiser.submit=Réorganiser les pages
 
+#Outil Multi-fonction
+multiTool.title=Multi-outil PDF
+multiTool.header=Outil multiple PDF
+
 
 #pageRemover
 pageRemover.title=Suppresseur de pages

src/main/resources/static/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#dadada" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>

src/main/resources/static/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#212529" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>

src/main/resources/templates/fragments/common.html

@@ -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>

src/main/resources/templates/fragments/navbar.html

@@ -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">