UX: Makes splash dots use theme colors (#17388)

The dots in the splash were previously hard-coded (v1). This PR makes progress towards making them be based on current theme colors.

Note that this is an improvement and not the "final" version. We're going to dynamically generate the splash file and the base64 URL later on.

public/images/preloader.svg

@@ -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>