From d413d579a6ef47e61e6747200f86b9240b079b14 Mon Sep 17 00:00:00 2001
From: Santiago Botta <sgobotta@gmail.com>
Date: Wed, 20 Mar 2024 02:19:42 -0300
Subject: [PATCH] Add dark styles to all public screens

---
 assets/js/app.js                              |  2 +-
 assets/js/charts/line_chart.js                |  3 +
 .../components/core_components.ex             | 15 +++--
 .../components/custom_components.ex           |  4 +-
 .../custom_components/presence_disclaimer.ex  |  4 +-
 .../components/layouts/app.html.heex          | 14 ++--
 .../components/layouts/root.html.heex         | 14 ++--
 .../controllers/page_html/home.html.heex      | 64 +++++++++----------
 .../cedears/cedears_live/index.html.heex      | 28 +++++---
 .../cedears/cedears_live/show.html.heex       | 56 ++++++++++------
 .../live/public/currency_live/index.html.heex | 33 +++++-----
 .../live/public/currency_live/show.html.heex  | 25 ++++----
 12 files changed, 144 insertions(+), 118 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index f409537..f042a8a 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -47,7 +47,7 @@ const liveSocket = new LiveSocket("/live", Socket, {
 )
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+topbar.config({barColors: {0: "#FD4F00"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", () => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", () => topbar.hide())
 
diff --git a/assets/js/charts/line_chart.js b/assets/js/charts/line_chart.js
index d998104..2f9dae9 100644
--- a/assets/js/charts/line_chart.js
+++ b/assets/js/charts/line_chart.js
@@ -4,6 +4,9 @@
 // html#bundlers-webpack-rollup-etc
 import Chart from 'chart.js/auto'
 
+Chart.defaults.color = '#71717acc';
+Chart.defaults.borderColor = '#71717a44';
+
 // A wrapper of Chart.js that configures the realtime line chart.
 export default class {
   constructor(ctx) {
diff --git a/lib/ex_finance_web/components/core_components.ex b/lib/ex_finance_web/components/core_components.ex
index 5c0be2c..34c442b 100644
--- a/lib/ex_finance_web/components/core_components.ex
+++ b/lib/ex_finance_web/components/core_components.ex
@@ -363,7 +363,7 @@ defmodule ExFinanceWeb.CoreComponents do
 
     ~H"""
     <div phx-feedback-for={@name}>
-      <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
+      <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600 dark:text-zinc-400">
         <input type="hidden" name={@name} value="false" />
         <input
           type="checkbox"
@@ -371,7 +371,7 @@ defmodule ExFinanceWeb.CoreComponents do
           name={@name}
           value="true"
           checked={@checked}
-          class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
+          class="rounded border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100 focus:ring-0"
           {@rest}
         />
         <%= @label %>
@@ -388,7 +388,7 @@ defmodule ExFinanceWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+        class="mt-2 block w-full rounded-md border border-gray-300 bg-white dark:bg-black shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
         multiple={@multiple}
         {@rest}
       >
@@ -431,7 +431,7 @@ defmodule ExFinanceWeb.CoreComponents do
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
         class={[
-          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
+          "mt-2 block w-full rounded-lg text-zinc-900 dark:text-zinc-100 focus:ring-0 sm:text-sm sm:leading-6",
           "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
           @errors == [] && "border-zinc-300 focus:border-zinc-400",
           @errors != [] && "border-rose-400 focus:border-rose-400",
@@ -452,7 +452,10 @@ defmodule ExFinanceWeb.CoreComponents do
 
   def label(assigns) do
     ~H"""
-    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
+    <label
+      for={@for}
+      class="block text-sm font-semibold leading-6 text-zinc-800 dark:text-zinc-200"
+    >
       <%= render_slot(@inner_block) %>
     </label>
     """
@@ -634,7 +637,7 @@ defmodule ExFinanceWeb.CoreComponents do
     <div class="mt-16">
       <.link
         navigate={@navigate}
-        class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+        class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700 dark:text-zinc-100 hover:dark:text-zinc-300 transition-colors duration-500"
       >
         <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
         <%= render_slot(@inner_block) %>
diff --git a/lib/ex_finance_web/components/custom_components.ex b/lib/ex_finance_web/components/custom_components.ex
index 176421f..cdfcf9f 100644
--- a/lib/ex_finance_web/components/custom_components.ex
+++ b/lib/ex_finance_web/components/custom_components.ex
@@ -31,13 +31,13 @@ defmodule ExFinanceWeb.CustomComponents do
           <CoreComponents.icon
             id="toggle-theme-icon"
             name="hero-sun-solid"
-            class="text-black dark:text-white h-5 w-5"
+            class="text-black dark:text-white h-5 w-5 hover:text-yellow-500 hover:dark:text-yellow-500 transition-colors duration-500"
           />
         <% else %>
           <CoreComponents.icon
             id="toggle-theme-icon"
             name="hero-moon-solid"
-            class="text-black dark:text-white h-5 w-5"
+            class="text-black dark:text-white h-5 w-5 hover:text-yellow-500 hover:dark:text-yellow-500 transition-colors duration-500"
           />
         <% end %>
       </a>
diff --git a/lib/ex_finance_web/components/custom_components/presence_disclaimer.ex b/lib/ex_finance_web/components/custom_components/presence_disclaimer.ex
index 16a49b5..d9eadd2 100644
--- a/lib/ex_finance_web/components/custom_components/presence_disclaimer.ex
+++ b/lib/ex_finance_web/components/custom_components/presence_disclaimer.ex
@@ -15,9 +15,9 @@ defmodule ExFinanceWeb.CustomComponents.PresenceDisclaimer do
     <div>
       <%= if connected?(@socket) do %>
         <div class="
-          text-xs italic text-zinc-700 cursor-default
+          text-xs italic text-zinc-700 dark:text-zinc-200 cursor-default
           rounded-b-xl overflow-hidden shadow-2xl
-          border-r-[0.75px] border-b-[0.5px] border-l-[0.75px] border-zinc-300 border-dotted
+          border-r-[0.75px] border-b-[0.5px] border-l-[0.75px] border-zinc-300 dark:border-zinc-700 border-dotted
         ">
           <div class="backdrop-blur-md p-2">
             <p>
diff --git a/lib/ex_finance_web/components/layouts/app.html.heex b/lib/ex_finance_web/components/layouts/app.html.heex
index f44756c..8fe04c3 100644
--- a/lib/ex_finance_web/components/layouts/app.html.heex
+++ b/lib/ex_finance_web/components/layouts/app.html.heex
@@ -1,8 +1,8 @@
-<header class="sticky top-0 bg-gray-200/25 z-50">
-  <div class="border-r-[1px] border-l-[1px] border-zinc-300 border-dotted">
+<header class="sticky top-0 bg-gray-200/25 dark:bg-gray-800/25 z-50">
+  <div class="border-r-[1px] border-l-[1px] border-zinc-300 dark:border-zinc-600 border-dotted">
     <div class="
       flex items-center justify-between
-      border-b border-zinc-300
+      border-b border-zinc-300 dark:border-zinc-600
       px-1 sm:px-6 lg:px-8
       text-xs sm:text-sm
       backdrop-blur-lg
@@ -11,19 +11,19 @@
         <a href="/">
           <img src={~p"/images/logo.svg"} width="36" />
         </a>
-        <a href="" class="hover:text-zinc-700">
+        <a href="" class="hover:text-zinc-700 hover:dark:text-zinc-300">
           <%= assigns[:section_title] || gettext("Finance Apps") %>
         </a>
       </div>
-      <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
+      <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900 dark:text-zinc-100">
         <.toggle_theme_button theme={@theme} />
-        <a href="" class="hover:text-zinc-700"></a>
+        <a href="" class="hover:text-zinc-700 hover:dark:text-zinc-300"></a>
         <.cafecito_button cafecito_username={
           Application.fetch_env!(:ex_finance, :cafecito_username)
         } />
         <a
           href="/"
-          class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-300/80 text-xs"
+          class="rounded-lg bg-zinc-100 dark:bg-zinc-900 px-2 py-1 hover:bg-zinc-300/80 hover:dark:bg-zinc-700/80 text-xs"
         >
           <%= gettext("Home") %> <span aria-hidden="true">&rarr;</span>
         </a>
diff --git a/lib/ex_finance_web/components/layouts/root.html.heex b/lib/ex_finance_web/components/layouts/root.html.heex
index 10635de..80685bf 100644
--- a/lib/ex_finance_web/components/layouts/root.html.heex
+++ b/lib/ex_finance_web/components/layouts/root.html.heex
@@ -17,16 +17,16 @@
     >
     </script>
   </head>
-  <body class="bg-gray-200 antialiased h-screen">
-    <ul class="relative z-10 flex items-center gap-4 justify-end border-r-[1px] border-l-[1px] border-zinc-300 border-dotted">
+  <body class="bg-gray-200 dark:bg-gray-800 antialiased h-screen text-black dark:text-white">
+    <ul class="relative z-10 flex items-center gap-4 justify-end border-r-[1px] border-l-[1px] border-zinc-300 dark:border-zinc-700 border-dotted">
       <%= if @current_user do %>
-        <li class="text-[0.8125rem] leading-6 text-zinc-900">
+        <li class="text-[0.8125rem] leading-6 text-zinc-900 dark:text-zinc-100">
           <%= @current_user.email %>
         </li>
         <li>
           <.link
             href={~p"/users/settings"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            class="text-[0.8125rem] leading-6 text-zinc-900 dark:text-zinc-100 font-semibold hover:text-zinc-700 hover:dark:text-zinc-200"
           >
             <%= gettext("Settings") %>
           </.link>
@@ -35,7 +35,7 @@
           <.link
             href={~p"/users/log_out"}
             method="delete"
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 pr-2"
+            class="text-[0.8125rem] leading-6 text-zinc-900 dark:text-zinc-100 font-semibold hover:text-zinc-700 hover:dark:text-zinc-200 pr-2"
           >
             <%= gettext("Log out") %>
           </.link>
@@ -44,7 +44,7 @@
         <li>
           <.link
             href={~p"/users/register"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            class="text-[0.8125rem] leading-6 text-zinc-900 dark:text-zinc-100 font-semibold hover:text-zinc-700 hover:dark:text-zinc-200"
           >
             <%= gettext("Register") %>
           </.link>
@@ -52,7 +52,7 @@
         <li>
           <.link
             href={~p"/users/log_in"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            class="text-[0.8125rem] leading-6 text-zinc-900 dark:text-zinc-100 font-semibold hover:text-zinc-700 hover:dark:text-zinc-200"
           >
             <%= gettext("Log in") %>
           </.link>
diff --git a/lib/ex_finance_web/controllers/page_html/home.html.heex b/lib/ex_finance_web/controllers/page_html/home.html.heex
index 4e84d3d..c62d67c 100644
--- a/lib/ex_finance_web/controllers/page_html/home.html.heex
+++ b/lib/ex_finance_web/controllers/page_html/home.html.heex
@@ -43,7 +43,11 @@
     <%= PhoenixInlineSvg.Helpers.svg_image(@conn, "logo", class: "w-14 h-14") %>
     <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
       <%= gettext("Finance Apps") %>
-      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6 hover:bg-zinc-50">
+      <small class="
+        bg-brand/5 dark:bg-brand/5
+        text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6
+        hover:bg-zinc-50 hover:dark:bg-zinc-900 transition-colors duration-500
+      ">
         <.link
           target="_blank"
           href={"https://github.com/sgobotta/ex_finance/releases/tag/v#{Application.spec(:ex_finance, :vsn)}"}
@@ -52,10 +56,10 @@
         </.link>
       </small>
     </h1>
-    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
+    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900 dark:text-zinc-100">
       <%= gettext("Digital tools for finance management") %>
     </p>
-    <p class="mt-4 text-base leading-7 text-zinc-600">
+    <p class="mt-4 text-base leading-7 text-zinc-600 dark:text-zinc-400">
       <%= gettext(
         "This site is designed to provide simple tools for finance management."
       ) %>
@@ -67,14 +71,14 @@
             href={~p"/currencies"}
             class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
           >
-            <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+            <span class="absolute inset-0 rounded-2xl bg-zinc-50 dark:bg-zinc-900 transition group-hover:bg-zinc-100 group-hover:dark:bg-zinc-900 sm:group-hover:scale-105">
             </span>
             <span class="relative flex items-center gap-4 sm:flex-col">
               <.icon
                 name="hero-currency-dollar"
-                class="h-7 w-7 group-hover:text-brand"
+                class="h-7 w-7 group-hover:text-brand text-black dark:text-white transition-all duration-300"
               />
-              <span class="group-hover:text-brand">
+              <span class="group-hover:text-brand text-black dark:text-white transition-all duration-300">
                 <%= gettext("Currencies") %>
               </span>
             </span>
@@ -83,9 +87,9 @@
             href={~p"/cedears"}
             class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
           >
-            <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+            <span class="absolute inset-0 rounded-2xl bg-zinc-50 dark:bg-zinc-900 transition group-hover:bg-zinc-100 group-hover:dark:bg-zinc-900 sm:group-hover:scale-105">
             </span>
-            <span class="relative flex items-center gap-4 sm:flex-col">
+            <span class="relative flex items-center gap-4 sm:flex-col fill-black dark:fill-white">
               <svg
                 version="1.1"
                 id="_x32_"
@@ -93,7 +97,6 @@
                 xmlns:xlink="http://www.w3.org/1999/xlink"
                 viewBox="0 0 512 512"
                 xml:space="preserve"
-                fill="#000000"
                 class="h-6 w-6"
               >
                 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
@@ -104,36 +107,32 @@
                 >
                 </g>
                 <g id="SVGRepo_iconCarrier">
-                  <style type="text/css">
-                    .st0{fill:#18181B;}  
-                  </style>
-
                   <g>
                     <polygon
-                      class="st0 group-hover:fill-brand"
+                      class="fill-dark dark:fill-white group-hover:fill-brand transition-all duration-300"
                       points="204.344,155.188 249.469,200.297 409.344,40.422 268.031,40.422 316.063,88.453 249.469,155.031 204.953,110.516 41.906,264.969 63.906,288.219 "
                     >
                     </polygon>
 
                     <polygon
-                      class="st0 group-hover:fill-brand"
+                      class="fill-dark dark:fill-white group-hover:fill-brand transition-all duration-300"
                       points="512,102.313 276.031,330.281 212.656,266.906 0,471.578 512,471.578 "
                     >
                     </polygon>
                   </g>
                 </g>
               </svg>
-              <span class="group-hover:text-brand">
+              <span class="group-hover:text-brand text-black dark:text-white transition-all duration-300">
                 <%= gettext("Cedears") %>
               </span>
             </span>
           </a>
           <a
             href="https://github.com/sgobotta/ex_finance"
-            class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
+            class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 dark:text-zinc-100 sm:py-6"
             target="_blank"
           >
-            <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+            <span class="absolute inset-0 rounded-2xl bg-zinc-50 dark:bg-zinc-900 transition group-hover:bg-zinc-100 group-hover:dark:bg-zinc-900 sm:group-hover:scale-105">
             </span>
             <span class="relative flex items-center gap-4 sm:flex-col">
               <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6">
@@ -141,33 +140,32 @@
                   fill-rule="evenodd"
                   clip-rule="evenodd"
                   d="M12 0C5.37 0 0 5.506 0 12.303c0 5.445 3.435 10.043 8.205 11.674.6.107.825-.262.825-.585 0-.292-.015-1.261-.015-2.291C6 21.67 5.22 20.346 4.98 19.654c-.135-.354-.72-1.446-1.23-1.738-.42-.23-1.02-.8-.015-.815.945-.015 1.62.892 1.845 1.261 1.08 1.86 2.805 1.338 3.495 1.015.105-.8.42-1.338.765-1.645-2.67-.308-5.46-1.37-5.46-6.075 0-1.338.465-2.446 1.23-3.307-.12-.308-.54-1.569.12-3.26 0 0 1.005-.323 3.3 1.26.96-.276 1.98-.415 3-.415s2.04.139 3 .416c2.295-1.6 3.3-1.261 3.3-1.261.66 1.691.24 2.952.12 3.26.765.861 1.23 1.953 1.23 3.307 0 4.721-2.805 5.767-5.475 6.075.435.384.81 1.122.81 2.276 0 1.645-.015 2.968-.015 3.383 0 .323.225.707.825.585a12.047 12.047 0 0 0 5.919-4.489A12.536 12.536 0 0 0 24 12.304C24 5.505 18.63 0 12 0Z"
-                  fill="#18181B"
-                  class="group-hover:fill-brand"
+                  class="group-hover:fill-brand fill-black dark:fill-white transition-all duration-300"
                 />
               </svg>
-              <span class="group-hover:text-brand">
+              <span class="group-hover:text-brand text-black dark:text-white transition-all duration-300">
                 <%= gettext("Source Code") %>
               </span>
             </span>
           </a>
         </div>
         <%= if @current_user != nil and @current_user.role == :admin do %>
-          <p class="mt-10 text-base leading-7 text-zinc-600">
+          <p class="mt-10 text-base leading-7 text-zinc-600 dark:text-zinc-400">
             <%= gettext("Administration resources") %>
           </p>
-          <div class="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3 border">
+          <div class="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
             <a
               href={~p"/admin/currencies"}
               class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
             >
-              <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+              <span class="absolute inset-0 rounded-2xl bg-zinc-50 dark:bg-zinc-900 transition group-hover:bg-zinc-100 group-hover:dark:bg-zinc-900 sm:group-hover:scale-105">
               </span>
               <span class="relative flex items-center gap-4 sm:flex-col">
                 <.icon
                   name="hero-currency-dollar"
-                  class="h-7 w-7 group-hover:text-brand"
+                  class="h-7 w-7 group-hover:text-brand text-black dark:text-white transition-all duration-300"
                 />
-                <span class="group-hover:text-brand">
+                <span class="group-hover:text-brand text-black dark:text-white transition-all duration-300">
                   <%= gettext("Currencies") %>
                 </span>
               </span>
@@ -176,7 +174,7 @@
               href={~p"/admin/instruments/cedears"}
               class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
             >
-              <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+              <span class="absolute inset-0 rounded-2xl bg-zinc-50 dark:bg-zinc-900 transition group-hover:bg-zinc-100 group-hover:dark:bg-zinc-900 sm:group-hover:scale-105">
               </span>
               <span class="relative flex items-center gap-4 sm:flex-col">
                 <svg
@@ -197,26 +195,22 @@
                   >
                   </g>
                   <g id="SVGRepo_iconCarrier">
-                    <style type="text/css">
-                      .st0{fill:#18181B;}  
-                    </style>
-
                     <g>
                       <polygon
-                        class="st0 group-hover:fill-brand"
+                        class="group-hover:fill-brand fill-dark dark:fill-white transition-all duration-300"
                         points="204.344,155.188 249.469,200.297 409.344,40.422 268.031,40.422 316.063,88.453 249.469,155.031 204.953,110.516 41.906,264.969 63.906,288.219 "
                       >
                       </polygon>
 
                       <polygon
-                        class="st0 group-hover:fill-brand"
-                        points="512,102.313 276.031,330.281 212.656,266.906 0,471.578 512,471.578 "
+                        class="group-hover:fill-brand fill-dark dark:fill-white transition-all duration-300"
+                        points="512,102.313 276.031,330.281 212.656,266.906 0,471.578 512,471.578"
                       >
                       </polygon>
                     </g>
                   </g>
                 </svg>
-                <span class="group-hover:text-brand">
+                <span class="group-hover:text-brand text-black dark:text-white transition-all duration-300">
                   <%= gettext("Cedears") %>
                 </span>
               </span>
diff --git a/lib/ex_finance_web/live/public/cedears/cedears_live/index.html.heex b/lib/ex_finance_web/live/public/cedears/cedears_live/index.html.heex
index 1293d04..4030a3d 100644
--- a/lib/ex_finance_web/live/public/cedears/cedears_live/index.html.heex
+++ b/lib/ex_finance_web/live/public/cedears/cedears_live/index.html.heex
@@ -3,12 +3,13 @@
     <button
       type="button"
       class="
-        text-gray-500 bg-white
-        hover:ring-sky-500 ring-gray-300 ring-1
+        text-gray-500 bg-white dark:bg-black outline-0
+        hover:ring-brand/50 dark:hover:ring-brand/50 ring-gray-300 dark:ring-gray-700 ring-1
         h-10 w-full
         items-center gap-2
         rounded-md pl-2 pr-3 text-sm
-        transition flex focus:[&:not(:focus-visible)]:outline-none
+        outline-none
+        transition duration-500 flex focus:[&:not(:focus-visible)]:outline-none
       "
       phx-click={open_modal()}
     >
@@ -40,7 +41,8 @@
   phx-window-keyup={hide_modal()}
   phx-key="escape"
 >
-  <div class="fixed inset-0 bg-zinc-400/25 backdrop-blur-sm opacity-100"></div>
+  <div class="fixed inset-0 bg-zinc-400/25 dark:bg-zinc-600/25 backdrop-blur-sm opacity-100">
+  </div>
   <div class="
     fixed inset-0 overflow-y-auto
     px-4 py-4 sm:py-20 sm:px-6 md:py-32 lg:px-8 lg:py-[15vh]
@@ -49,7 +51,7 @@
       id="searchbox_container"
       class="
         mx-auto overflow-hidden rounded-lg
-        bg-zinc-50 shadow-xl ring-zinc-900/7.5
+        bg-zinc-50 dark:bg-zinc-900 shadow-xl ring-zinc-900/7.5
         sm:max-w-xl
         opacity-100 scale-100
       "
@@ -82,9 +84,9 @@
               name="search[query]"
               class="
                 flex-auto rounded-lg appearance-none bg-transparent pl-10 pr-10
-                text-zinc-900
+                text-zinc-900 dark:text-zinc-100
                 outline-none focus:outline-none
-                border-slate-200 focus:border-slate-200
+                border-slate-200 focus:border-slate-200 dark:border-slate-800 dark:focus:border-slate-800
                 focus:ring-0 focus:shadow-none
                 placeholder:text-zinc-500 focus:w-full focus:flex-none
                 sm:text-sm
@@ -114,7 +116,7 @@
               absolute right-3 top-0 stroke-zinc-500
               w-10 my-2 h-8
               flex justify-center items-center
-              border-slate-300 border-2 rounded-md
+              border-slate-300 dark:border-slate-700 border-2 rounded-md
               text-xs font-medium
             ">
               ESC
@@ -123,7 +125,7 @@
 
           <ul
             :if={@cedears != []}
-            class="divide-y divide-slate-200 overflow-y-auto rounded-b-lg border-t border-slate-200 text-sm leading-6"
+            class="divide-y divide-slate-200 dark:divide-slate-800 overflow-y-auto rounded-b-lg border-t border-slate-200 dark:border-slate-800 text-sm leading-6"
             id="searchbox__results_list"
             role="listbox"
           >
@@ -131,7 +133,13 @@
               <li id={"#{cedear.id}"}>
                 <.link
                   navigate={~p"/cedears/#{cedear.id}"}
-                  class="block p-4 hover:bg-slate-100 focus:outline-none focus:bg-slate-100 focus:text-sky-800"
+                  class="
+                    block p-4
+                    hover:bg-slate-100 hover:dark:bg-slate-900
+                    focus:outline-none focus:bg-slate-100
+                    dark:focus:bg-slate-900 focus:text-sky-800
+                    text-zinc-800 dark:text-zinc-200
+                  "
                 >
                   <%= cedear.symbol %> - <%= cedear.name %>
                 </.link>
diff --git a/lib/ex_finance_web/live/public/cedears/cedears_live/show.html.heex b/lib/ex_finance_web/live/public/cedears/cedears_live/show.html.heex
index 4c78626..7f43987 100644
--- a/lib/ex_finance_web/live/public/cedears/cedears_live/show.html.heex
+++ b/lib/ex_finance_web/live/public/cedears/cedears_live/show.html.heex
@@ -2,24 +2,26 @@
   <div
     class="
       flex items-center justify-between p-4 rounded-lg
-      bg-white shadow-zinc-500 shadow-md
-      duration-500 border-zinc-300 border-[1px]
+      bg-white dark:bg-black shadow-zinc-500 shadow-md
+      duration-500 border-zinc-300 dark:border-zinc-700 border-[1px]
       sm:w-full md:w-2/3 lg:w-1/2 xl:w-1/2 2xl:w-1/3
     "
     id={"cedears-#{@cedear.id}-card"}
   >
     <div class="w-full">
-      <h2 class="text-gray-900 text-lg font-bold border-b border-indigo-500">
+      <h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold border-b border-indigo-500">
         <%= @cedear.symbol %> (<%= @cedear.name %>)
       </h2>
-      <ul class="mt-2 text-gray-700">
-        <li class="flex border-b py-1">
+      <ul class="mt-2 text-gray-700 dark:text-gray-300">
+        <li class="flex border-b py-1 border-b-zinc-600 dark:border-b-zinc-400">
           <span class="font-semibold w-1/2 md:w-1/3">
             <%= gettext("Country") %>
           </span>
-          <span class="text-gray-700"><%= render_country(@cedear) %></span>
+          <span class="text-gray-700 dark:text-gray-300">
+            <%= render_country(@cedear) %>
+          </span>
         </li>
-        <li class="flex border-b py-1">
+        <li class="flex border-b py-1 border-b-zinc-600 dark:border-b-zinc-400">
           <span class="font-semibold w-1/2 md:w-1/3">
             <%= gettext("Ratio") %>
           </span>
@@ -27,23 +29,23 @@
             <%= render_ratio(@cedear) %>
           </span>
         </li>
-        <li class="flex border-b py-1">
+        <li class="flex border-b py-1 border-b-zinc-600 dark:border-b-zinc-400">
           <span class="font-semibold w-1/2 md:w-1/3">
             <%= gettext("Underlying market") %>
           </span>
-          <span class="text-gray-700">
+          <span class="text-gray-700 dark:text-gray-300">
             <%= render_underlying_market(@cedear) %>
           </span>
         </li>
-        <li class="flex border-b py-1">
+        <li class="flex border-b py-1 border-b-zinc-600 dark:border-b-zinc-400">
           <span class="font-semibold w-1/2 md:w-1/3">
             <%= gettext("Website") %>
           </span>
-          <span class="text-gray-700 hover:text-sky-800">
+          <span class="text-gray-700 dark:text-gray-300 hover:text-sky-800">
             <.link class="" target="_blank" href={@cedear.web_link}>
               <.icon
                 name="hero-arrow-top-right-on-square"
-                class="h-5 w-5 hover:fill-sky-800 hover:text-sky-800"
+                class="h-5 w-5 hover:fill-sky-800 hover:text-sky-800 hover:dark:fill-sky-200 hover:dark:text-sky-200"
               />
             </.link>
           </span>
@@ -67,7 +69,7 @@
                 col-span-1 justify-self-center self-center
                 block h-6 min-w-8 w-8 text-center
                 cursor-default
-                bg-indigo-400/75 text-white rounded-sm
+                bg-indigo-400/75 dark:bg-indigo-600/75 text-white dark:text-black rounded-sm
               ">
                 <span class="
                   text-[0.65rem] font-medium leading-6
@@ -81,8 +83,8 @@
             <h3 class="mt-2 text-md font-bold text-indigo-500 text-left">
               <%= gettext("Fair cedear price") %>
             </h3>
-            <p class="text-base text-sky-400 text-left">
-              <span class="text-sky-400 cursor-text">
+            <p class="text-base text-sky-400 dark:text-sky-600 text-left">
+              <span class="text-sky-400 dark:text-sky-600 cursor-text">
                 ARS <%= render_fair_cedear_price(@stock_price_changes) %>
               </span>
             </p>
@@ -90,9 +92,9 @@
           <button class="
               cursor-default
               text-sm mt-6 px-4 py-2
-              bg-indigo-400 text-white
+              bg-indigo-400 dark:bg-indigo-600 text-white dark:text-black
               rounded-lg tracking-wider
-              hover:bg-indigo-300
+              hover:bg-indigo-300 hover:dark:bg-indigo-700
               outline-none
             ">
             <%= gettext("CCL price") %> <%= render_currency_price(@currency) %>
@@ -133,7 +135,7 @@
             ) %>
           </p>
           <div class="group relative flex !mt-0 w-full">
-            <div class="pointer-events-none absolute left-3 top-[2.75rem] stroke-zinc-500 text-sky-400 text-xs">
+            <div class="pointer-events-none absolute left-3 top-[2.75rem] stroke-zinc-500 dark:stroke-zinc-500 text-sky-400 dark:text-sky-600 text-xs">
               <p>ARS</p>
             </div>
 
@@ -141,7 +143,14 @@
               field={@form[:cedear_price]}
               label={gettext("Cedear price")}
               container_class="w-full"
-              class="focus:ring-indigo-500 hover:ring-indigo-500 bg-gray-100 text-gray-700 pl-14"
+              class="
+                border-slate-200 focus:border-slate-200 dark:border-slate-800 dark:focus:border-slate-800
+                focus:ring-indigo-500 hover:ring-indigo-500
+                focus:dark:ring-indigo-500 hover:dark:ring-indigo-500
+                bg-gray-100 dark:bg-gray-900
+                text-gray-700 dark:text-gray-300
+                pl-14
+              "
               min={0}
               type="number"
               required
@@ -161,7 +170,14 @@
               label={gettext("Stock price")}
               container_class="w-full"
               value={@average_stock_price}
-              class="focus:ring-indigo-500 hover:ring-indigo-500 bg-gray-100 mt-0 !text-gray-600 pl-14 w-full"
+              class="
+                border-slate-200 focus:border-slate-200 dark:border-slate-800 dark:focus:border-slate-800
+                focus:ring-indigo-500 hover:ring-indigo-500
+                focus:dark:ring-indigo-500 hover:dark:ring-indigo-500
+                bg-gray-100 dark:bg-gray-900
+                !text-gray-600 !dark:text-gray-400
+                mt-0 pl-14
+                w-full"
               disabled
               min={0}
               required
diff --git a/lib/ex_finance_web/live/public/currency_live/index.html.heex b/lib/ex_finance_web/live/public/currency_live/index.html.heex
index 63250ce..b4b9941 100644
--- a/lib/ex_finance_web/live/public/currency_live/index.html.heex
+++ b/lib/ex_finance_web/live/public/currency_live/index.html.heex
@@ -1,4 +1,4 @@
-<section class="text-gray-600 body-font transparent h-full flex justify-center items-center m-2">
+<section class="body-font transparent h-full flex justify-center items-center m-2">
   <div
     class="flex flex-wrap -m-4 text-center"
     id="currencies"
@@ -10,12 +10,17 @@
       class="p-4 md:w-1/2 xl:w-1/3 w-full duration-500 cursor-default group"
     >
       <div
-        class="flex items-center justify-between p-4 rounded-lg bg-white shadow-zinc-500 shadow-md duration-500
-        border-zinc-300 border-[1px]"
+        class="
+          flex items-center justify-between
+          p-4 rounded-lg
+        bg-white dark:bg-black shadow-zinc-400 dark:shadow-zinc-600 shadow-md active:shadow-sm focus:shadow-sm transition duration-200
+        border-zinc-300 dark:border-zinc-700 border-[1px]
+        "
         id={"currencies-#{currency.id}-card"}
+        phx-click={JS.navigate(~p"/currencies/#{currency.id}")}
       >
         <div class="text-left">
-          <h2 class={"text-gray-900 text-lg font-bold border-b border-#{get_color_by_currency_type(currency)}-500"}>
+          <h2 class={"text-gray-900 dark:text-gray-100 text-lg font-bold border-b border-#{get_color_by_currency_type(currency)}-500"}>
             <%= currency.name %>
           </h2>
           <%= if currency.info_type == :reference do %>
@@ -29,28 +34,24 @@
                 currency.sell_price
               ) %>
             </h3>
-            <p class="text-sm font-semibold text-gray-400 text-left">
+            <p class="text-sm font-semibold text-gray-400 dark:text-gray-600 text-left">
               Spread:
               <span class={"text-#{get_color_by_currency_type(currency)}-500"}>
                 <%= render_spread(currency) %>
               </span>
             </p>
           <% end %>
-          <p class="text-sm font-semibold text-gray-400 text-left">
+          <p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
             <%= render_update_time(currency) %>
           </p>
-          <button
-            class={"
-              cursor-pointer
-              text-white text-sm mt-6 px-4 py-2
+          <button class={"
+              cursor-default
+              text-white dark:text-black text-sm mt-6 px-4 py-2
               bg-#{get_color_by_currency_type(currency)}-400
+              dark:bg-#{get_color_by_currency_type(currency)}-600
               rounded-lg tracking-wider
-              hover:bg-opacity-75 hover:scale-[0.95]
-              hover:bg-#{get_color_by_currency_type(currency)}-300
               outline-none
-            "}
-            phx-click={JS.navigate(~p"/currencies/#{currency.id}")}
-          >
+            "}>
             <%= render_info_type(currency) %>
           </button>
         </div>
@@ -68,7 +69,7 @@
             "} />
           </div>
           <div class="absolute">
-            <h1 class="text-white text-2xl group-hover:text-3xl duration-200">
+            <h1 class="text-white dark:text-white text-2xl group-hover:text-3xl duration-200">
               <%= render_variation_percent(currency) %>
             </h1>
           </div>
diff --git a/lib/ex_finance_web/live/public/currency_live/show.html.heex b/lib/ex_finance_web/live/public/currency_live/show.html.heex
index 2584bff..7bda205 100644
--- a/lib/ex_finance_web/live/public/currency_live/show.html.heex
+++ b/lib/ex_finance_web/live/public/currency_live/show.html.heex
@@ -4,13 +4,13 @@
     class="p-4 xs:w-full sm:w-2/3 md:w-2/3 lg:w-1/2 xl:w-1/3 w-full cursor-default"
   >
     <div
-      class="p-4 rounded-lg bg-white shadow-zinc-500 shadow-md duration-500
-      border-zinc-300 border-[1px]"
+      class="p-4 rounded-lg bg-white dark:bg-black shadow-zinc-500 dark:shadow-zinc-500 shadow-md duration-500
+      border-zinc-300 dark:border-zinc-700 border-[1px]"
       id={"currencies-#{@currency.id}-card"}
     >
       <div class="flex items-center justify-between">
         <div class="text-left">
-          <h2 class={"text-gray-900 text-lg font-bold border-b border-#{get_color_by_currency_type(@currency)}-500"}>
+          <h2 class={"text-gray-900 dark:text-gray-100 text-lg font-bold border-b border-#{get_color_by_currency_type(@currency)}-500"}>
             <%= @currency.name %>
           </h2>
           <%= if @currency.info_type == :reference do %>
@@ -24,22 +24,23 @@
                 @currency.sell_price
               ) %>
             </h3>
-            <p class="text-sm font-semibold text-gray-400 text-left">
+            <p class="text-sm font-semibold text-gray-400 dark:text-gray-600 text-left">
               Spread:
               <span class={"text-#{get_color_by_currency_type(@currency)}-500"}>
                 <%= render_spread(@currency) %>
               </span>
             </p>
           <% end %>
-          <p class="text-sm font-semibold text-gray-400 text-left">
+          <p class="text-sm font-semibold text-gray-400 dark:text-gray-600 text-left">
             <%= render_update_time(@currency) %>
           </p>
           <button class={"
               cursor-default
               text-sm mt-6 px-4 py-2
-              bg-#{get_color_by_currency_type(@currency)}-400 text-white
+              bg-#{get_color_by_currency_type(@currency)}-400 text-white dark:text-black
               rounded-lg tracking-wider
               hover:bg-#{get_color_by_currency_type(@currency)}-300
+              hover:dark:bg-#{get_color_by_currency_type(@currency)}-700
               outline-none
             "}>
             <%= render_info_type(@currency) %>
@@ -50,24 +51,24 @@
           from-#{get_color_by_price_direction(@currency)}-400 to-#{get_color_by_price_direction(@currency)}-300
           w-32 h-32
           rounded-full
-          shadow-2xl shadow-#{get_color_by_price_direction(@currency)}-400
+          shadow-2xl shadow-#{get_color_by_price_direction(@currency)}-400 dark:shadow-#{get_color_by_price_direction(@currency)}-600
           border-#{get_color_by_price_direction(@currency)}-500 border-dashed border-2
           flex justify-center items-center
         "}>
           <div>
-            <h1 class="text-white text-2xl">
+            <h1 class="text-white dark:text-white text-2xl">
               <%= render_variation_percent(@currency) %>
             </h1>
           </div>
         </div>
       </div>
       <div class="w-full cursor-default mt-4">
-        <div class="inline-flex w-full justify-evenly font-normal">
+        <div class="inline-flex w-full justify-evenly font-normal text-zinc-600 dark:text-zinc-400">
           <button
             class={"
               #{if @interval == :daily,
                 do: "text-base text-#{get_color_by_currency_type(@currency)}-500 font-semibold",
-                else: "text-sm hover:text-zinc-500"
+                else: "text-sm hover:text-zinc-500 hover:dark:text-zinc-500 transition-colors duration-500"
                 }
             "}
             phx-click="interval_change"
@@ -79,7 +80,7 @@
             class={"
               #{if @interval == :weekly,
                 do: "text-base text-#{get_color_by_currency_type(@currency)}-500 font-semibold",
-                else: "text-sm hover:text-zinc-500"
+                else: "text-sm hover:text-zinc-500 hover:dark:text-zinc-500 transition-colors duration-500"
                 }
             "}
             phx-click="interval_change"
@@ -91,7 +92,7 @@
             class={"
               #{if @interval == :monthly,
                 do: "text-base text-#{get_color_by_currency_type(@currency)}-500 font-semibold",
-                else: "text-sm hover:text-zinc-500"
+                else: "text-sm hover:text-zinc-500 hover:dark:text-zinc-500 transition-colors duration-500"
                 }
             "}
             phx-click="interval_change"