diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb
index 6c6dd1ad94b..8ec585593f1 100644
--- a/app/views/common/_discourse_splash.html.erb
+++ b/app/views/common/_discourse_splash.html.erb
@@ -1,5 +1,116 @@
 <%- unless customization_disabled? %>
 <section id="d-splash">
+  <template class="splash-svg-template">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      version="1.1"
+    >
+      <style>
+        :root {
+          --animation-state: paused;
+          --primary: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
+          --secondary: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
+          --tertiary: #<%= ColorScheme.hex_for_name("tertiary", scheme_id) %>;
+          --quaternary: #<%= ColorScheme.hex_for_name("quaternary", scheme_id) %>;
+          --highlight: #<%= ColorScheme.hex_for_name("highlight", scheme_id) %>;
+          --success: #<%= ColorScheme.hex_for_name("success", scheme_id) %>;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          :root {
+            --animation-state: paused;
+            --primary: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
+            --secondary: #<%= ColorScheme.hex_for_name(
+                "secondary",
+                dark_scheme_id
+              ) %>;
+            --tertiary: #<%= ColorScheme.hex_for_name(
+                "tertiary",
+                dark_scheme_id
+              ) %>;
+            --quaternary: #<%= ColorScheme.hex_for_name(
+                "quaternary",
+                dark_scheme_id
+              ) %>;
+            --highlight: #<%= ColorScheme.hex_for_name(
+                "highlight",
+                dark_scheme_id
+              ) %>;
+            --success: #<%= ColorScheme.hex_for_name("success", dark_scheme_id) %>;
+          }
+        }
+
+        /* these styles need to live here because the SVG has a different scope */
+        .dots {
+          animation-name: loader;
+          animation-timing-function: ease-in-out;
+          animation-duration: 3s;
+          animation-iteration-count: infinite;
+          animation-play-state: var(--animation-state);
+          stroke: #fff;
+          stroke-width: 0.5px;
+          transform-origin: center;
+          opacity: 0;
+          r: max(1vw, 11px);
+          cy: 50%;
+          filter: saturate(2) opacity(0.85);
+        }
+
+        .dots:first-child {
+          fill: var(--quaternary);
+        }
+
+        .dots:nth-child(2) {
+          fill: var(--quaternary);
+          animation-delay: 0.15s;
+        }
+
+        .dots:nth-child(3) {
+          fill: var(--highlight);
+          animation-delay: 0.3s;
+        }
+
+        .dots:nth-child(4) {
+          fill: var(--tertiary);
+          animation-delay: 0.45s;
+        }
+
+        .dots:nth-child(5) {
+          fill: var(--tertiary);
+          animation-delay: 0.6s;
+        }
+
+        @keyframes loader {
+          0% {
+            opacity: 0;
+            transform: scale(1);
+          }
+          45% {
+            opacity: 1;
+            transform: scale(0.7);
+          }
+          65% {
+            opacity: 1;
+            transform: scale(0.7);
+          }
+          100% {
+            opacity: 0;
+            transform: scale(1);
+          }
+        }
+      </style>
+
+      <g class="container">
+        <circle class="dots" cx="30vw" />
+        <circle class="dots" cx="40vw" />
+        <circle class="dots" cx="50vw" />
+        <circle class="dots" cx="60vw" />
+        <circle class="dots" cx="70vw" />
+      </g>
+    </svg>
+  </template>
+
   <style>
     html {
       overflow-y: hidden !important;
@@ -9,7 +120,7 @@
       display: grid;
       place-items: center;
       backface-visibility: hidden;
-      background: var(--secondary);
+      background: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
       position: absolute;
       left: 0;
       top: 0;
@@ -30,7 +141,7 @@
       animation-delay: 1s;
       animation-fill-mode: forwards;
       animation-play-state: var(--animation-state);
-      color: var(--primary);
+      color: #<%= ColorScheme.hex_for_name("primary", scheme_id) %>;
       margin-bottom: -4em;
     }
 
@@ -70,11 +181,20 @@
         content: "...";
       }
     }
+
+    @media (prefers-color-scheme: dark) {
+      #d-splash {
+        background: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
+      }
+      #d-splash .preloader-text-wrapper {
+        color: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
+      }
+    }
   </style>
 
   <img
     class="preloader-image"
-    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%0A%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; --animation-state: paused; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-play-state: var(--animation-state); stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 0.15s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 0.3s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 0.45s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 0.6s; %7D @keyframes loader %7B 0%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 100%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw' /%3E%3Ccircle class='dots' cx='40vw' /%3E%3Ccircle class='dots' cx='50vw' /%3E%3Ccircle class='dots' cx='60vw' /%3E%3Ccircle class='dots' cx='70vw' /%3E%3C/g%3E%3C/svg%3E%0A"
+    src="data:image/svg;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     alt="<%=SiteSetting.title%>"
   />
 
@@ -98,10 +218,19 @@
     const DELAY_TARGET = 2000;
     const POLLING_INTERVAL = 50;
 
+    const splashSvgTemplate = document.querySelector(".splash-svg-template");
+    const splashTemplateClone = splashSvgTemplate.content.cloneNode(true);
+    const svgElement = splashTemplateClone.querySelector("svg");
+
+    const svgString = new XMLSerializer().serializeToString(svgElement);
+    const encodedSvg = btoa(svgString);
+
     const splashWrapper = document.querySelector("#d-splash");
     const splashImage = splashWrapper?.querySelector(".preloader-image");
 
     if (splashImage) {
+      splashImage.src = `data:image/svg+xml;base64,${encodedSvg}`;
+
       const connectStart = performance?.timing?.connectStart || 0;
       const splashDelay = connectStart ? DELAY_TARGET : 0;
       const targetTime = connectStart + DELAY_TARGET;
@@ -111,11 +240,12 @@
 
       const swapSplash = () => {
         splashWrapper?.style.setProperty("--animation-state", "running");
+        svgElement?.style.setProperty("--animation-state", "running");
 
-        splashImage.src = splashImage.src.replace(
-          "--animation-state: paused;",
-          "--animation-state: running;"
-        );
+        const newSvgString = new XMLSerializer().serializeToString(svgElement);
+        const newEncodedSvg = btoa(newSvgString);
+
+        splashImage.src = `data:image/svg+xml;base64,${newEncodedSvg}`;
 
         performance.mark("discourse-splash-visible");
 
diff --git a/public/images/preloader.svg b/public/images/preloader.svg
deleted file mode 100644
index b2319c1b2fb..00000000000
--- a/public/images/preloader.svg
+++ /dev/null
@@ -1,84 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  version="1.1"
->
-  <style>
-    /* these need to be injected dynamicly to match theme colors */
-    :root {
-      --primary: #222222;
-      --secondary: #ffffff;
-      --tertiary: #f15c21;
-      --highlight: #f0ea88;
-      --quaternary: #65ccff;
-      --success: #009900;
-      --animation-state: paused;
-    }
-
-    /* these styles need to live here because the SVG has a different scope */
-    .dots {
-      animation-name: loader;
-      animation-timing-function: ease-in-out;
-      animation-duration: 3s;
-      animation-iteration-count: infinite;
-      animation-play-state: var(--animation-state);
-      stroke: #fff;
-      stroke-width: 0.5px;
-      transform-origin: center;
-      opacity: 0;
-      r: max(1vw, 11px);
-      cy: 50%;
-    }
-
-    .dots:first-child {
-      fill: var(--tertiary);
-    }
-
-    .dots:nth-child(2) {
-      fill: var(--tertiary);
-      animation-delay: 0.15s;
-    }
-
-    .dots:nth-child(3) {
-      fill: var(--highlight);
-      animation-delay: 0.3s;
-    }
-
-    .dots:nth-child(4) {
-      fill: var(--quaternary);
-      animation-delay: 0.45s;
-    }
-
-    .dots:nth-child(5) {
-      fill: var(--quaternary);
-      animation-delay: 0.6s;
-    }
-
-    @keyframes loader {
-      0% {
-        opacity: 0;
-        transform: scale(1);
-      }
-      45% {
-        opacity: 1;
-        transform: scale(0.7);
-      }
-      65% {
-        opacity: 1;
-        transform: scale(0.7);
-      }
-      100% {
-        opacity: 0;
-        transform: scale(1);
-      }
-    }
-  </style>
-
-  <g class="container">
-    <circle class="dots" cx="30vw" />
-    <circle class="dots" cx="40vw" />
-    <circle class="dots" cx="50vw" />
-    <circle class="dots" cx="60vw" />
-    <circle class="dots" cx="70vw" />
-  </g>
-</svg>