fix: dark-mode load icon from server

MarcosNicolau · MarcosNicolau · commit 6e3cf58eff25 · 2024-12-23T12:47:36.000-03:00
diff --git a/explorer/assets/vendor/dark_mode.js b/explorer/assets/vendor/dark_mode.js
@@ -36,6 +36,7 @@ const setupThemeToggle = () => {
 			setThemeCookie("light");
 		}
 	};
+	toggleVisibility(isDark());
 	document
 		.getElementById("theme-toggle")
 		.addEventListener("click", function () {
diff --git a/explorer/lib/explorer_web/components/dark_mode.ex b/explorer/lib/explorer_web/components/dark_mode.ex
@@ -1,6 +1,8 @@
 defmodule DarkMode do
   use Phoenix.Component
 
+  attr(:theme, :string, required: true)
+
   def button(assigns) do
     ~H"""
     <button
@@ -13,7 +15,7 @@ defmodule DarkMode do
     >
       <svg
         id="theme-toggle-dark-icon"
-        class="w-5 h-5 text-transparent hidden"
+        class={["w-5 h-5 ", @theme == "light" && "hidden text-transparent"]}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +26,7 @@ defmodule DarkMode do
 
       <svg
         id="theme-toggle-light-icon"
-        class="w-5 h-5 text-transparent"
+        class={["w-5 h-5", @theme == "dark" && "hidden text-transparent"]}
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -38,19 +40,6 @@ defmodule DarkMode do
         </path>
       </svg>
     </button>
-
-    <script>
-      // Toggle early based on <html class="dark">
-      const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
-      const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
-      if (themeToggleDarkIcon != null && themeToggleLightIcon != null) {
-        let dark = document.documentElement.classList.contains('dark');
-        const show = dark ? themeToggleDarkIcon : themeToggleLightIcon
-        const hide = dark ? themeToggleLightIcon : themeToggleDarkIcon
-        show.classList.remove('hidden', 'text-transparent');
-        hide.classList.add('hidden', 'text-transparent');
-      }
-    </script>
     """
   end
 end
diff --git a/explorer/lib/explorer_web/components/layouts/app.html.heex b/explorer/lib/explorer_web/components/layouts/app.html.heex
@@ -1,4 +1,4 @@
-<.live_component module={NavComponent} id="navbar" host={@host} />
+<.live_component module={NavComponent} id="navbar" host={@host} theme={@theme} />
 <.root_background>
   <.flash_group flash={@flash} />
   <%= @inner_content %>
diff --git a/explorer/lib/explorer_web/components/nav.ex b/explorer/lib/explorer_web/components/nav.ex
@@ -103,7 +103,7 @@ defmodule NavComponent do
         >
           GitHub
         </.link>
-        <DarkMode.button />
+        <DarkMode.button theme={@theme} />
         <.hover_dropdown_selector
           current_value={get_current_network(@host)}
           variant="accent"

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ const setupThemeToggle = () => {`
`36`	`36`	`setThemeCookie("light");`
`37`	`37`	`}`
`38`	`38`	`};`
	`39`	`+ toggleVisibility(isDark());`
`39`	`40`	`document`
`40`	`41`	`.getElementById("theme-toggle")`
`41`	`42`	`.addEventListener("click", function () {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<.live_component module={NavComponent} id="navbar" host={@host} />`
	`1`	`+<.live_component module={NavComponent} id="navbar" host={@host} theme={@theme} />`
`2`	`2`	`<.root_background>`
`3`	`3`	`<.flash_group flash={@flash} />`
`4`	`4`	`<%= @inner_content %>`
Original file line number	Diff line number	Diff line change
`@@ -103,7 +103,7 @@ defmodule NavComponent do`
`103`	`103`	`>`
`104`	`104`	`GitHub`
`105`	`105`	`</.link>`
`106`		`- <DarkMode.button />`
	`106`	`+ <DarkMode.button theme={@theme} />`
`107`	`107`	`<.hover_dropdown_selector`
`108`	`108`	`current_value={get_current_network(@host)}`
`109`	`109`	`variant="accent"`