añadido tema oscuro, y programada la funcion de busqueda

Front/src/Componentes/NavBarAutocompletable.svelte

@@ -2,10 +2,12 @@
   import { Navbar, NavbarBrand, NavbarToggler, Nav, Collapse } from "@sveltestrap/sveltestrap";
   import { onMount } from "svelte";
   import { writable } from 'svelte/store';
+  import { link, links } from "svelte-routing";
   import './css/popup.css';
   import type { Grupo } from "../types";
 
 	import { urlG } from "../stores/urlStore";
+    import { navigate } from "svelte-routing";
   
   let isOpen: boolean = $state(false);
   
@@ -39,23 +41,39 @@
   })
 
   function redirijir(path: string){
-    location.replace(path);
+    navigate(path);
   }
 
+  let theme = $state(localStorage.getItem("theme") ?? "light"); 
+  const toggleTheme = () => {
+    theme = theme === "light" ? "dark" : "light";
+    document.body.setAttribute("data-bs-theme", theme);
+    localStorage.setItem("theme", theme);
+  };
+
 </script>
 
 <Navbar container="xxl" expand="md" color="dark-subtle">
   <NavbarBrand href="/">
     AlquilaFacil
   </NavbarBrand>
-  <div class="badge">
-    <a href="/Menu">
-      <img src="/home.svg" alt="Volver al Menú"/>
-    </a>
+  <div>
+    <div class="badge" style="background-color: turquoise;" use:links>
+      <a href="/Menu">
+        <img src="/home.svg" alt="Volver al Menú"/>
+      </a>
+    </div>
+    <button class="badge btn btn-outline-primary" onclick={toggleTheme} style="background-color: cadetblue;">
+      {#if theme === "light" }
+      <img src="/toggle-left.svg" alt=""/>
+      {:else}
+      <img src="/toggle-right.svg" alt=""/>
+      {/if}
+    </button>
   </div>
   <NavbarToggler on:click={() => (isOpen = !isOpen)} />
   <Collapse isOpen={isOpen} navbar expand="md">
-    <Nav class="ms-auto" navbar>
+    <Nav class="ms-auto" navbar >
     {#each $permisos as item }
       <div class="dropdown">
         <div class="btn-group" style="margin-left: 3px; margin-top: 3px">
@@ -63,9 +81,9 @@
           <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
             <span class="visually-hidden">Toggle Dropdown</span>
           </button>
-          <ul class="dropdown-menu dropdown-menu-end"  >
+          <ul class="dropdown-menu dropdown-menu-end" use:links>
             {#each item.idpermisos as perm}
-            <a class="dropdown-item link-underline-opacity-0 link-underline" href="/accion/{perm.id}">{perm.descripcion}</a>
+            <a class="dropdown-item link-underline-opacity-0 link-underline" href="/accion/{perm.id}" >{perm.descripcion}</a>
             <li><hr class="dropdown-divider"></li>
             {/each}
           </ul>