feat(web): update Elixir and Erlang logos with dark theme support

CHANGELOG.md

@@ -14,6 +14,7 @@
  * [`PULL-290`](https://github.com/thiagoesteves/deployex/pull/290) Add an application_ready event for every report that an application is running
  * [`PULL-292`](https://github.com/thiagoesteves/deployex/pull/292) Monitor the DeployEx atom, process and port limits alongside the host memory
  * [`PULL-293`](https://github.com/thiagoesteves/deployex/pull/293) Show the URLs each connected application is serving on, read from its own endpoints
+ * [`PULL-296`](https://github.com/thiagoesteves/deployex/pull/296) Replace the Elixir and Erlang logos with the official ones and swap to a brighter variant on dark themes
 
 ## 0.9.12 🚀 (2026-08-12)
 

apps/deployex_web/.gitignore

@@ -47,7 +47,10 @@ npm-debug.log
 /priv/static/robots-*
 /priv/static/*.txt.gz
 /priv/static/images/elixir-*
+!/priv/static/images/elixir-dark.ico
+!/priv/static/images/elixir-dark.png
 /priv/static/images/erlang-*
+!/priv/static/images/erlang-dark.ico
 /priv/static/images/gleam-*
 /priv/static/images/phoenix-*
 /priv/static/images/unknown-*

apps/deployex_web/assets/css/app.css

@@ -99,6 +99,26 @@
 /* Use the data attribute for dark mode  */
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
+/* Swap the Elixir logo for a brighter version on dark themes */
+.elixir-logo {
+    content: url("/images/elixir.ico");
+}
+
+[data-theme="dark"] .elixir-logo,
+[data-theme="night"] .elixir-logo {
+    content: url("/images/elixir-dark.ico");
+}
+
+/* Swap the Erlang logo for a lighter version on dark themes */
+.erlang-logo {
+    content: url("/images/erlang.ico");
+}
+
+[data-theme="dark"] .erlang-logo,
+[data-theme="night"] .erlang-logo {
+    content: url("/images/erlang-dark.ico");
+}
+
 /* Make LiveView wrapper divs transparent for layout */
 [data-phx-session],
 [data-phx-teleported-src] {

apps/deployex_web/lib/deployex_web/live/components/application_card.ex

@@ -46,7 +46,7 @@ defmodule DeployexWeb.Components.ApplicationCard do
                 <h1 class="text-3xl font-bold text-base-content mb-2">{@application.name}</h1>
                 <div class="flex items-center gap-4">
                   <div class="flex items-center gap-2">
-                    <img src="/images/erlang-otp.png" alt="OTP" class="w-5 h-5" />
+                    <img alt="OTP" class="erlang-logo w-5 h-5" />
                     <div class="flex flex-col">
                       <span class="text-xs font-semibold text-base-content">OTP</span>
                       <span class="text-xs text-base-content/60">
@@ -55,7 +55,7 @@ defmodule DeployexWeb.Components.ApplicationCard do
                     </div>
                   </div>
                   <div :if={@application.elixir_version} class="flex items-center gap-2">
-                    <img src="/images/elixir.png" alt="Elixir" class="w-5 h-5" />
+                    <img alt="Elixir" class="elixir-logo w-5 h-5" />
                     <div class="flex flex-col">
                       <span class="text-xs font-semibold text-base-content">Elixir</span>
                       <span class="text-xs text-base-content/60">

apps/deployex_web/lib/deployex_web/live/components/system_bar.ex

@@ -50,15 +50,15 @@ defmodule DeployexWeb.Components.SystemBar do
             <!-- Tech Stack -->
             <div class="flex items-center gap-6">
               <div class="flex items-center gap-3">
-                <img src="/images/erlang-otp.png" alt="OTP" class="w-8 h-8" />
+                <img alt="OTP" class="erlang-logo w-8 h-8" />
                 <div class="flex flex-col">
                   <span class="text-sm font-semibold text-base-content">OTP</span>
                   <span class="text-xs text-base-content/60">{System.otp_release()}</span>
                 </div>
               </div>
 
               <div class="flex items-center gap-3">
-                <img src="/images/elixir.png" alt="Elixir" class="w-8 h-8" />
+                <img alt="Elixir" class="elixir-logo w-8 h-8" />
                 <div class="flex flex-col">
                   <span class="text-sm font-semibold text-base-content">Elixir</span>
                   <span class="text-xs text-base-content/60">v{Application.spec(:elixir, :vsn)}</span>