feat (theme-toggle): replaced theme toggle with the one from daisy UI

lib/mv_web/components/layouts/navbar.ex

@@ -4,7 +4,6 @@ defmodule MvWeb.Layouts.Navbar do
   """
   use Phoenix.Component
   use Gettext, backend: MvWeb.Gettext
-  import MvWeb.Layouts
 
   def navbar(assigns) do
     ~H"""
@@ -24,7 +23,37 @@ defmodule MvWeb.Layouts.Navbar do
             <option value="en" selected={Gettext.get_locale() == "en"}>English</option>
           </select>
         </form>
-        <.theme_toggle />
+        <!-- Daisy UI Theme Toggle for dark and light mode-->
+        <label class="flex cursor-pointer gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="5" />
+            <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+          </svg>
+          <input type="checkbox" value="dark" class="toggle theme-controller" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        </label>
         <div class="dropdown dropdown-end">
           <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar avatar-placeholder">
             <div class="bg-neutral text-neutral-content w-12 rounded-full">
@@ -48,5 +77,4 @@ defmodule MvWeb.Layouts.Navbar do
     </header>
     """
   end
-
 end