From 21bc87be353fc3a5a3e2a601b55c90b26a9159ae Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Tue, 16 Jul 2024 16:28:06 +0300
Subject: [PATCH] explorer: add dark theme

---
 .../__snapshots__/BlocksCard.spec.js.snap     | 130 +++---------
 .../__snapshots__/BlocksList.spec.js.snap     |   7 +-
 .../__snapshots__/BlocksTable.spec.js.snap    |  60 +-----
 .../SearchNotification.spec.js.snap           |   4 +-
 .../components/blocks-list/BlocksList.svelte  |   7 +-
 .../blocks-table/BlocksTable.svelte           |   8 +-
 .../lib/components/data-card/DataCard.svelte  |   6 +-
 .../src/lib/components/footer/Footer.svelte   |   5 +-
 explorer/src/lib/components/navbar/Navbar.css |   4 +
 .../src/lib/components/navbar/Navbar.svelte   |   5 +-
 .../SearchNotification.svelte                 |   4 +
 explorer/src/lib/components/table/Table.css   |   1 +
 .../textbox-and-button/TextboxAndButton.css   |   9 +
 .../lib/components/world-map/WorldMap.svelte  |   6 +-
 .../statistics-panel/StatisticsPanel.svelte   |   3 +-
 .../src/lib/stores/__tests__/appStore.spec.js |   9 +
 explorer/src/lib/stores/appStore.js           |  19 ++
 explorer/src/lib/stores/stores.d.ts           |   2 +
 explorer/src/routes/+layout.svelte            |   5 +
 explorer/src/routes/__tests__/layout.spec.js  |  31 ++-
 .../__tests__/__snapshots__/page.spec.js.snap | 195 ++++--------------
 explorer/src/style/main.css                   |   2 +-
 22 files changed, 190 insertions(+), 332 deletions(-)

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
index dd3cdd8626..ec70ea710f 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
@@ -129,11 +129,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -192,11 +188,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -255,11 +247,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -318,11 +306,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -381,11 +365,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -444,11 +424,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -507,11 +483,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -570,11 +542,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -633,11 +601,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -696,11 +660,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             <td
               class="table__data-cell"
             >
-              <span
-                class="dusk-badge dusk-badge--variant-alt"
-              >
-                16
-              </span>
+              16
             </td>
             
              
@@ -896,11 +856,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -1086,11 +1043,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -1276,11 +1230,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -1466,11 +1417,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -1656,11 +1604,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -1846,11 +1791,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -2036,11 +1978,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -2226,11 +2165,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -2416,11 +2352,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
       
@@ -2606,11 +2539,8 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
         <dd
           class="details-list__definition details-list__definition--table"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16 DUSK
-          </span>
+          16
+           DUSK
         </dd>
       </dl>
     </div>
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
index 037ea4f475..11505e3ec4 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
@@ -183,11 +183,8 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
   <dd
     class="details-list__definition details-list__definition--table"
   >
-    <span
-      class="dusk-badge dusk-badge--variant-alt"
-    >
-      16 DUSK
-    </span>
+    16
+     DUSK
   </dd>
 </dl>
 `;
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
index 2aff261078..17b4ddc24f 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
@@ -100,11 +100,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -163,11 +159,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -226,11 +218,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -289,11 +277,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -352,11 +336,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -415,11 +395,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -478,11 +454,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -541,11 +513,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -604,11 +572,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
@@ -667,11 +631,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
         <td
           class="table__data-cell"
         >
-          <span
-            class="dusk-badge dusk-badge--variant-alt"
-          >
-            16
-          </span>
+          16
         </td>
         
          
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/SearchNotification.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/SearchNotification.spec.js.snap
index 51a63a8ca0..d494e586f9 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/SearchNotification.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/SearchNotification.spec.js.snap
@@ -20,7 +20,7 @@ exports[`Search Notification > renders the Search Notification component with a
     </span>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--normal dusk-icon-button search-notification__header-action"
+      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal dusk-icon-button search-notification__header-action"
       type="button"
     >
        
@@ -67,7 +67,7 @@ exports[`Search Notification > renders the Search Notification component with th
     </span>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--normal dusk-icon-button search-notification__header-action"
+      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal dusk-icon-button search-notification__header-action"
       type="button"
     >
        
diff --git a/explorer/src/lib/components/blocks-list/BlocksList.svelte b/explorer/src/lib/components/blocks-list/BlocksList.svelte
index 01aee5180a..e0ae1cb14f 100644
--- a/explorer/src/lib/components/blocks-list/BlocksList.svelte
+++ b/explorer/src/lib/components/blocks-list/BlocksList.svelte
@@ -2,7 +2,7 @@
 
 <script>
   import { AppAnchor, DetailList, ListItem } from "$lib/components";
-  import { Badge, ProgressBar } from "$lib/dusk/components";
+  import { ProgressBar } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import { getRelativeTimeString } from "$lib/dusk/string";
   import { luxToDusk } from "$lib/dusk/currency";
@@ -76,10 +76,7 @@
   <ListItem tooltipText="The reward allocated to the block generator">
     <svelte:fragment slot="term">rewards</svelte:fragment>
     <svelte:fragment slot="definition">
-      <Badge
-        variant="alt"
-        text={`${formatter(luxToDusk(data.header.reward))} DUSK`}
-      />
+      {formatter(luxToDusk(data.header.reward))} DUSK
     </svelte:fragment>
   </ListItem>
 </DetailList>
diff --git a/explorer/src/lib/components/blocks-table/BlocksTable.svelte b/explorer/src/lib/components/blocks-table/BlocksTable.svelte
index 6b20add263..a8e1e36561 100644
--- a/explorer/src/lib/components/blocks-table/BlocksTable.svelte
+++ b/explorer/src/lib/components/blocks-table/BlocksTable.svelte
@@ -9,7 +9,6 @@
     TableHead,
     TableRow,
   } from "$lib/components/table";
-  import { Badge } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { getRelativeTimeString, makeClassName } from "$lib/dusk/string";
   import { createValueFormatter } from "$lib/dusk/value";
@@ -56,12 +55,7 @@
           {numberFormatter(block.transactions.stats.gasUsed)}
         </TableCell>
         <TableCell>{numberFormatter(block.transactions.data.length)}</TableCell>
-        <TableCell
-          ><Badge
-            variant="alt"
-            text={numberFormatter(luxToDusk(block.header.reward))}
-          /></TableCell
-        >
+        <TableCell>{numberFormatter(luxToDusk(block.header.reward))}</TableCell>
       </TableRow>
     {/each}
   </TableBody>
diff --git a/explorer/src/lib/components/data-card/DataCard.svelte b/explorer/src/lib/components/data-card/DataCard.svelte
index 1752d21cf1..8ee25a0d1b 100644
--- a/explorer/src/lib/components/data-card/DataCard.svelte
+++ b/explorer/src/lib/components/data-card/DataCard.svelte
@@ -4,6 +4,7 @@
   import { DataAlert } from "$lib/components";
   import { Button, Card, ProgressBar } from "$lib/dusk/components";
   import { makeClassName } from "$lib/dusk/string";
+  import { appStore } from "$lib/stores";
 
   import "./DataCard.css";
 
@@ -28,6 +29,7 @@
   $: classes = makeClassName(["data-card", className]);
 
   $: hasEmptyData = Array.isArray(data) && data.length === 0;
+  $: ({ darkMode } = $appStore);
 </script>
 
 <Card className={classes}>
@@ -37,7 +39,9 @@
       <Button
         on:click={headerButtonDetails.action}
         text={headerButtonDetails.label}
-        variant={headerButtonDetails.variant || "secondary"}
+        variant={darkMode
+          ? "tertiary"
+          : headerButtonDetails.variant || "secondary"}
         disabled={headerButtonDetails.disabled}
       />
     {/if}
diff --git a/explorer/src/lib/components/footer/Footer.svelte b/explorer/src/lib/components/footer/Footer.svelte
index b4d148a6af..3613f87ee4 100644
--- a/explorer/src/lib/components/footer/Footer.svelte
+++ b/explorer/src/lib/components/footer/Footer.svelte
@@ -3,7 +3,10 @@
 <script>
   import { AppAnchor, AppImage, AppSource } from "$lib/components";
   import { Anchor } from "$lib/dusk/components";
+  import { appStore } from "$lib/stores";
   import "./Footer.css";
+
+  $: ({ darkMode } = $appStore);
 </script>
 
 <div class="footer">
@@ -32,7 +35,7 @@
       <picture>
         <AppSource media="(max-width:768px)" srcset="/dusk_logo_icon.svg" />
         <AppImage
-          src="/dusk_logo.svg"
+          src={darkMode ? "/dusk_logo_light.svg" : "/dusk_logo.svg"}
           alt="Dusk Logo"
           sizes="(max-width:768px) 20px, 86px"
           className="footer__logo-image"
diff --git a/explorer/src/lib/components/navbar/Navbar.css b/explorer/src/lib/components/navbar/Navbar.css
index 4d58c7be1a..dee9dc4f52 100644
--- a/explorer/src/lib/components/navbar/Navbar.css
+++ b/explorer/src/lib/components/navbar/Navbar.css
@@ -62,6 +62,10 @@
   order: 3;
 }
 
+.dark .dusk-navbar__menu--network {
+  background-color: #000;
+}
+
 .dusk-navbar__menu--links {
   width: 100%;
   order: 2;
diff --git a/explorer/src/lib/components/navbar/Navbar.svelte b/explorer/src/lib/components/navbar/Navbar.svelte
index 73c2dec8ba..e3db070efe 100644
--- a/explorer/src/lib/components/navbar/Navbar.svelte
+++ b/explorer/src/lib/components/navbar/Navbar.svelte
@@ -60,7 +60,7 @@
     showSearchNotification = false;
   });
 
-  $: ({ networks } = $appStore);
+  $: ({ darkMode, networks } = $appStore);
 </script>
 
 <nav
@@ -72,7 +72,7 @@
 >
   <AppAnchor href="/" className="dusk-navbar__logo">
     <AppImage
-      src="/dusk_logo.svg"
+      src={darkMode ? "/dusk_logo_light.svg" : "/dusk_logo.svg"}
       alt="Dusk Logo"
       sizes="(max-width: 1024px) 86px, 129px"
     />
@@ -114,6 +114,7 @@
             showSearchNotification = false;
           }}
           className="dusk-navbar__menu--search-notification"
+          {darkMode}
         />
       {/if}
     </div>
diff --git a/explorer/src/lib/components/search-notification/SearchNotification.svelte b/explorer/src/lib/components/search-notification/SearchNotification.svelte
index fcab0aa92c..5bd1155ba8 100644
--- a/explorer/src/lib/components/search-notification/SearchNotification.svelte
+++ b/explorer/src/lib/components/search-notification/SearchNotification.svelte
@@ -11,6 +11,9 @@
   /** @type {string | Undefined} */
   export let className = undefined;
 
+  /** @type {boolean}*/
+  export let darkMode;
+
   const dispatch = createEventDispatcher();
 
   $: classes = makeClassName(["search-notification", className]);
@@ -31,6 +34,7 @@
         position: "after",
         size: "normal",
       }}
+      variant={darkMode ? "tertiary" : "secondary"}
     />
   </header>
   {#if data.res instanceof Error}
diff --git a/explorer/src/lib/components/table/Table.css b/explorer/src/lib/components/table/Table.css
index b9ca78e1cc..b4bc7b18ab 100644
--- a/explorer/src/lib/components/table/Table.css
+++ b/explorer/src/lib/components/table/Table.css
@@ -21,6 +21,7 @@
   top: 0;
   z-index: 1;
   text-wrap: nowrap;
+  color: var(--smokey-black);
 }
 
 .table__data-cell {
diff --git a/explorer/src/lib/components/textbox-and-button/TextboxAndButton.css b/explorer/src/lib/components/textbox-and-button/TextboxAndButton.css
index aa4ecff842..716d801a36 100644
--- a/explorer/src/lib/components/textbox-and-button/TextboxAndButton.css
+++ b/explorer/src/lib/components/textbox-and-button/TextboxAndButton.css
@@ -10,6 +10,11 @@
   border-width: var(--control-border-size);
 }
 
+.dark .textbox-button,
+.dark .dusk-textbox.textbox-button__input {
+  background-color: black;
+}
+
 .dusk-textbox.textbox-button__input {
   width: 100%;
   padding: 0;
@@ -17,6 +22,10 @@
   border-radius: 0;
 }
 
+.dark .dusk-textbox.textbox-button__input {
+  color: var(--light-grey);
+}
+
 .dusk-textbox.textbox-button__input:read-write:enabled:focus {
   outline: 0 none;
   border: none;
diff --git a/explorer/src/lib/components/world-map/WorldMap.svelte b/explorer/src/lib/components/world-map/WorldMap.svelte
index 9761f00c61..c7fc438ae7 100644
--- a/explorer/src/lib/components/world-map/WorldMap.svelte
+++ b/explorer/src/lib/components/world-map/WorldMap.svelte
@@ -1,6 +1,5 @@
 <script>
   // @ts-nocheck
-
   import { geoNaturalEarth1, geoPath } from "d3-geo";
   import { uniquesBy } from "lamb";
   import dataset from "./world-map.json";
@@ -10,6 +9,9 @@
   /** @type {Array<{lat: number, lon:number}> | Error | null}*/
   export let nodes;
 
+  /** @type {string} */
+  export let stroke = "black";
+
   /** @type {import("d3-geo").GeoProjection}*/
   const projection = geoNaturalEarth1();
 
@@ -29,7 +31,7 @@
       width="5"
       height="10"
     >
-      <line x1="2.5" y1="0" x2="2.5" y2="10" stroke="black" stroke-width="1" />
+      <line x1="2.5" y1="0" x2="2.5" y2="10" {stroke} stroke-width="1" />
     </pattern>
   </defs>
   {#each dataset.features as data, index (index)}
diff --git a/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte b/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
index dcfec95eee..57bef244cb 100644
--- a/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
+++ b/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
@@ -117,6 +117,7 @@
       },
     ],
   ];
+  $: ({ darkMode } = $appStore);
 </script>
 
 <div class="statistics-panel">
@@ -144,6 +145,6 @@
     {/each}
   </div>
   <div class="statistics-panel__world-map">
-    <WorldMap nodes={nodesData} />
+    <WorldMap nodes={nodesData} stroke={darkMode ? "white" : "black"} />
   </div>
 </div>
diff --git a/explorer/src/lib/stores/__tests__/appStore.spec.js b/explorer/src/lib/stores/__tests__/appStore.spec.js
index f52230995a..ac95d252b3 100644
--- a/explorer/src/lib/stores/__tests__/appStore.spec.js
+++ b/explorer/src/lib/stores/__tests__/appStore.spec.js
@@ -19,6 +19,7 @@ describe("appStore", () => {
     expect(get(appStore)).toStrictEqual({
       blocksListEntries: Number(env.VITE_BLOCKS_LIST_ENTRIES),
       chainInfoEntries: Number(env.VITE_CHAIN_INFO_ENTRIES),
+      darkMode: false,
       fetchInterval: Number(env.VITE_REFETCH_INTERVAL),
       marketDataFetchInterval: Number(env.VITE_MARKET_DATA_REFETCH_INTERVAL),
       network: expectedNetworks[0].value,
@@ -51,4 +52,12 @@ describe("appStore", () => {
 
     expect(get(appStore).network).toBe("some-network");
   });
+
+  it("should expose a service method to set the dark mode theme", async () => {
+    const { appStore } = await import("..");
+
+    appStore.setTheme(true);
+
+    expect(get(appStore).darkMode).toBe(true);
+  });
 });
diff --git a/explorer/src/lib/stores/appStore.js b/explorer/src/lib/stores/appStore.js
index 1d8b87255e..d9801ff546 100644
--- a/explorer/src/lib/stores/appStore.js
+++ b/explorer/src/lib/stores/appStore.js
@@ -1,4 +1,5 @@
 import { get, writable } from "svelte/store";
+import { browser } from "$app/environment";
 
 /** @type {NetworkOption[]}*/
 const networks = [
@@ -6,8 +7,17 @@ const networks = [
   { label: "Devnet", value: import.meta.env.VITE_DUSK_DEVNET_NODE },
 ];
 
+const browserDefaults = browser
+  ? {
+      darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches
+    }
+  : {
+      darkMode: false
+    };
+
 /** @type {AppStoreContent} */
 const initialState = {
+  ...browserDefaults,
   blocksListEntries: Number(import.meta.env.VITE_BLOCKS_LIST_ENTRIES),
   chainInfoEntries: Number(import.meta.env.VITE_CHAIN_INFO_ENTRIES),
   fetchInterval: Number(import.meta.env.VITE_REFETCH_INTERVAL) || 1000,
@@ -32,8 +42,17 @@ const setNetwork = (network) =>
     network,
   });
 
+/** @param {boolean} darkMode */
+const setTheme = (darkMode) => {
+  set({
+    ...get(store),
+    darkMode,
+  });
+};
+
 /** @type {AppStore} */
 export default {
   setNetwork,
+  setTheme,
   subscribe,
 };
diff --git a/explorer/src/lib/stores/stores.d.ts b/explorer/src/lib/stores/stores.d.ts
index 3f3d3d3e3c..560536dc7f 100644
--- a/explorer/src/lib/stores/stores.d.ts
+++ b/explorer/src/lib/stores/stores.d.ts
@@ -1,10 +1,12 @@
 type AppStore = import("svelte/store").Readable<AppStoreContent> & {
   setNetwork: (value: string) => void;
+  setTheme: (value: boolean) => void;
 };
 
 type AppStoreContent = {
   blocksListEntries: number;
   chainInfoEntries: number;
+  darkMode: boolean;
   fetchInterval: number;
   marketDataFetchInterval: number;
   network: string;
diff --git a/explorer/src/routes/+layout.svelte b/explorer/src/routes/+layout.svelte
index 6bd55b1a50..f62827ef14 100644
--- a/explorer/src/routes/+layout.svelte
+++ b/explorer/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import { Tooltip } from "$lib/dusk/components";
   import { Footer, Navbar } from "$lib/components";
+  import { appStore } from "$lib/stores";
   import "../style/main.css";
 
   /**
@@ -13,6 +14,10 @@
       document.body.style.overflow = "hidden";
     }
   };
+
+  appStore.subscribe(({ darkMode }) => {
+    document.documentElement.classList.toggle("dark", darkMode);
+  });
 </script>
 
 <header>
diff --git a/explorer/src/routes/__tests__/layout.spec.js b/explorer/src/routes/__tests__/layout.spec.js
index 03ab211d95..22b13fbf37 100644
--- a/explorer/src/routes/__tests__/layout.spec.js
+++ b/explorer/src/routes/__tests__/layout.spec.js
@@ -1,5 +1,7 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent } from "@testing-library/svelte";
+import { get } from "svelte/store";
+import { appStore } from "$lib/stores";
 
 import { renderWithSimpleContent } from "$lib/dusk/test-helpers";
 
@@ -7,12 +9,13 @@ import MainLayout from "../+layout.svelte";
 
 describe("Main layout", () => {
   const baseOptions = { props: {}, target: document.body };
-
-  afterEach(cleanup);
+ 
+  afterEach(() => {
+    cleanup();
+  });
 
   it("should render the app's main layout", () => {
     const { container } = renderWithSimpleContent(MainLayout, baseOptions);
-
     expect(container).toMatchSnapshot();
   });
 
@@ -30,4 +33,22 @@ describe("Main layout", () => {
 
     expect(document.body.style.overflow).toBe("auto");
   });
-});
+
+  it('should add and remove the "dark" class name to the `html` element when the `darkMode` value changes in the settings store', async () => {
+    const isDarkMode = () => get(appStore).darkMode;
+    const hasDarkClass = () => document.documentElement.classList.contains("dark");
+
+    expect(isDarkMode()).toBe(false);
+    expect(hasDarkClass()).toBe(false);
+
+    appStore.setTheme(true);
+
+    expect(isDarkMode()).toBe(true);
+    expect(hasDarkClass()).toBe(true);
+
+    appStore.setTheme(false);
+
+    expect(isDarkMode()).toBe(false);
+    expect(hasDarkClass()).toBe(false);
+  });
+});
\ No newline at end of file
diff --git a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
index f6ea7e6cdb..fde0500574 100644
--- a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
@@ -176,11 +176,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -239,11 +235,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -302,11 +294,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -365,11 +353,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -428,11 +412,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -491,11 +471,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -554,11 +530,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -617,11 +589,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -680,11 +648,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -743,11 +707,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -806,11 +766,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -869,11 +825,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -932,11 +884,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -995,11 +943,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -1058,11 +1002,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
               <td
                 class="table__data-cell"
               >
-                <span
-                  class="dusk-badge dusk-badge--variant-alt"
-                >
-                  16
-                </span>
+                16
               </td>
               
                
@@ -1258,11 +1198,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -1448,11 +1385,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -1638,11 +1572,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -1828,11 +1759,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -2018,11 +1946,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -2208,11 +2133,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -2398,11 +2320,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -2588,11 +2507,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -2778,11 +2694,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -2968,11 +2881,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -3158,11 +3068,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -3348,11 +3255,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -3538,11 +3442,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -3728,11 +3629,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
         
@@ -3918,11 +3816,8 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
           <dd
             class="details-list__definition details-list__definition--table"
           >
-            <span
-              class="dusk-badge dusk-badge--variant-alt"
-            >
-              16 DUSK
-            </span>
+            16
+             DUSK
           </dd>
         </dl>
       </div>
diff --git a/explorer/src/style/main.css b/explorer/src/style/main.css
index 4dddf3f477..b514adc3d2 100644
--- a/explorer/src/style/main.css
+++ b/explorer/src/style/main.css
@@ -48,7 +48,7 @@ body {
 }
 
 html {
-  background-color: var(--page-background-color);
+  background-color: var(--background-color);
   color: var(--on-background-color);
   font-family: var(--main-font-family);
   font-size: var(--main-font-size);