diff --git a/apps/static/src/assets/preloader.css b/apps/static/src/assets/preloader.css
index 9ea72991c..7abb6fa99 100644
--- a/apps/static/src/assets/preloader.css
+++ b/apps/static/src/assets/preloader.css
@@ -21,75 +21,75 @@
   display: flex;
   flex-wrap: wrap;
 }
-.loader-item:nth-child(0) {
+.pre-loader .loader-item:nth-child(0) {
   animation-delay: 0ms;
   animation-direction: reverse;
 }
-.loader-item:first-child {
-  animation-delay: -0.2s;
+.pre-loader .loader-item:first-child {
+  animation-delay: -50ms;
   animation-direction: alternate;
 }
-.loader-item:nth-child(2) {
+.pre-loader .loader-item:nth-child(2) {
+  animation-delay: 0.2s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(3) {
+  animation-delay: -0.6s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(4) {
   animation-delay: 0.4s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(3) {
-  animation-delay: -0.15s;
+.pre-loader .loader-item:nth-child(5) {
+  animation-delay: -0.5s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(4) {
-  animation-delay: 0.6s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(5) {
-  animation-delay: -1s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(6) {
+.pre-loader .loader-item:nth-child(6) {
   animation-delay: 0.3s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(7) {
-  animation-delay: -0.35s;
+.pre-loader .loader-item:nth-child(7) {
+  animation-delay: -1.4s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(8) {
+.pre-loader .loader-item:nth-child(8) {
   animation-delay: 2s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(9) {
-  animation-delay: -0.45s;
+.pre-loader .loader-item:nth-child(9) {
+  animation-delay: -0.9s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(10) {
-  animation-delay: 2s;
+.pre-loader .loader-item:nth-child(10) {
+  animation-delay: 1.5s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(11) {
+.pre-loader .loader-item:nth-child(11) {
   animation-delay: -0.55s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(12) {
+.pre-loader .loader-item:nth-child(12) {
   animation-delay: 1.2s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(13) {
-  animation-delay: -2.6s;
+.pre-loader .loader-item:nth-child(13) {
+  animation-delay: -0.65s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(14) {
-  animation-delay: 2.8s;
+.pre-loader .loader-item:nth-child(14) {
+  animation-delay: 0.7s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(15) {
-  animation-delay: -3s;
+.pre-loader .loader-item:nth-child(15) {
+  animation-delay: -3.75s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(16) {
+.pre-loader .loader-item:nth-child(16) {
   animation-delay: 1.6s;
   animation-direction: reverse;
 }
-.loader-item {
+.pre-loader .loader-item {
   animation: flickering 0.4s linear infinite alternate;
 }
 @keyframes flickering {
@@ -106,3 +106,6 @@
     opacity: 0;
   }
 }
+html.dark .pre-loader .loader-item {
+  background: #fff;
+}
diff --git a/apps/static/src/assets/theme-setter.js b/apps/static/src/assets/theme-setter.js
new file mode 100644
index 000000000..0fc7ae061
--- /dev/null
+++ b/apps/static/src/assets/theme-setter.js
@@ -0,0 +1,9 @@
+(function () {
+  var storedTheme = window.localStorage.getItem('theme');
+  if (
+    storedTheme === 'dark' ||
+    (!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    document.documentElement.classList.add('dark');
+  }
+})();
diff --git a/apps/trading/components/preloader/preloader.tsx b/apps/trading/components/preloader/preloader.tsx
index a973d590b..f5d366057 100644
--- a/apps/trading/components/preloader/preloader.tsx
+++ b/apps/trading/components/preloader/preloader.tsx
@@ -9,11 +9,15 @@ export const Preloader = () => {
             display: block;
             width: 100%;
             height: 100%;
+            margin: 0;
           }
+           html.dark body{
+             background: #000;
+           }
         `}
       </style>
       <div className="pre-loader">
-        <Loader forceTheme="light" />
+        <Loader />
       </div>
     </>
   );
diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx
index f7a58f46e..d2a2f7c37 100644
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@@ -22,7 +22,6 @@ import {
   useInitializeEnv,
 } from '@vegaprotocol/environment';
 import './styles.css';
-import './gen-styles.scss';
 import { useGlobalStore, usePageTitleStore } from '../stores';
 import { Footer } from '../components/footer';
 import { useMemo, useState } from 'react';
diff --git a/apps/trading/pages/_document.page.tsx b/apps/trading/pages/_document.page.tsx
index 2cd2bd8ba..8d42dcc68 100644
--- a/apps/trading/pages/_document.page.tsx
+++ b/apps/trading/pages/_document.page.tsx
@@ -19,12 +19,13 @@ export default function Document() {
           type="image/x-icon"
           href="https://static.vega.xyz/favicon.ico"
         />
+        <script src="/theme-setter.js" type="text/javascript" async />
         {['1', 'true'].includes(process.env['NX_USE_ENV_OVERRIDES'] || '') ? (
           /* eslint-disable-next-line @next/next/no-sync-scripts */
           <script src="/assets/env-config.js" type="text/javascript" />
         ) : null}
       </Head>
-      <body className="font-alpha">
+      <body className="font-alpha dark:bg-black dark:text-white">
         <Main />
         <NextScript />
       </body>
diff --git a/apps/trading/pages/gen-styles.scss b/apps/trading/pages/gen-styles.scss
index c25e95f6a..1891de9bf 100644
--- a/apps/trading/pages/gen-styles.scss
+++ b/apps/trading/pages/gen-styles.scss
@@ -20,32 +20,39 @@
     display: flex;
     flex-wrap: wrap;
   }
-}
-@for $i from 0 through 16 {
-  .loader-item:nth-child(#{$i}) {
-    @if $i % 2 == 0 {
-      animation-delay: #{$i * 50 * random(5)}ms;
-      animation-direction: reverse;
-    } @else {
-      animation-delay: #{$i * -50 * random(5)}ms;
-      animation-direction: alternate;
+  @for $i from 0 through 16 {
+    .loader-item:nth-child(#{$i}) {
+      @if $i % 2 == 0 {
+        animation-delay: #{$i * 50 * random(5)}ms;
+        animation-direction: reverse;
+      } @else {
+        animation-delay: #{$i * -50 * random(5)}ms;
+        animation-direction: alternate;
+      }
+    }
+  }
+  .loader-item {
+    animation: flickering 0.4s linear alternate infinite;
+  }
+  @keyframes flickering {
+    0% {
+      opacity: 1;
+    }
+    25% {
+      opacity: 1;
+    }
+    26% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
     }
   }
 }
-.loader-item {
-  animation: flickering 0.4s linear alternate infinite;
-}
-@keyframes flickering {
-  0% {
-    opacity: 1;
-  }
-  25% {
-    opacity: 1;
-  }
-  26% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
+html.dark {
+  .pre-loader {
+    .loader-item {
+      background: white;
+    }
   }
 }
diff --git a/apps/trading/public/preloader.css b/apps/trading/public/preloader.css
index 9ea72991c..a3669b3f6 100644
--- a/apps/trading/public/preloader.css
+++ b/apps/trading/public/preloader.css
@@ -21,75 +21,80 @@
   display: flex;
   flex-wrap: wrap;
 }
-.loader-item:nth-child(0) {
+@media (prefers-color-scheme: light) {
+  .pre-loader .loader-item {
+    background: #000;
+  }
+}
+.pre-loader .loader-item:nth-child(0) {
   animation-delay: 0ms;
   animation-direction: reverse;
 }
-.loader-item:first-child {
-  animation-delay: -0.2s;
+.pre-loader .loader-item:first-child {
+  animation-delay: -50ms;
   animation-direction: alternate;
 }
-.loader-item:nth-child(2) {
+.pre-loader .loader-item:nth-child(2) {
+  animation-delay: 0.2s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(3) {
+  animation-delay: -0.6s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(4) {
   animation-delay: 0.4s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(3) {
-  animation-delay: -0.15s;
+.pre-loader .loader-item:nth-child(5) {
+  animation-delay: -0.5s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(4) {
-  animation-delay: 0.6s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(5) {
-  animation-delay: -1s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(6) {
+.pre-loader .loader-item:nth-child(6) {
   animation-delay: 0.3s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(7) {
-  animation-delay: -0.35s;
+.pre-loader .loader-item:nth-child(7) {
+  animation-delay: -1.4s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(8) {
+.pre-loader .loader-item:nth-child(8) {
   animation-delay: 2s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(9) {
-  animation-delay: -0.45s;
+.pre-loader .loader-item:nth-child(9) {
+  animation-delay: -0.9s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(10) {
-  animation-delay: 2s;
+.pre-loader .loader-item:nth-child(10) {
+  animation-delay: 1.5s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(11) {
+.pre-loader .loader-item:nth-child(11) {
   animation-delay: -0.55s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(12) {
+.pre-loader .loader-item:nth-child(12) {
   animation-delay: 1.2s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(13) {
-  animation-delay: -2.6s;
+.pre-loader .loader-item:nth-child(13) {
+  animation-delay: -0.65s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(14) {
-  animation-delay: 2.8s;
+.pre-loader .loader-item:nth-child(14) {
+  animation-delay: 0.7s;
   animation-direction: reverse;
 }
-.loader-item:nth-child(15) {
-  animation-delay: -3s;
+.pre-loader .loader-item:nth-child(15) {
+  animation-delay: -3.75s;
   animation-direction: alternate;
 }
-.loader-item:nth-child(16) {
+.pre-loader .loader-item:nth-child(16) {
   animation-delay: 1.6s;
   animation-direction: reverse;
 }
-.loader-item {
+.pre-loader .loader-item {
   animation: flickering 0.4s linear infinite alternate;
 }
 @keyframes flickering {
@@ -106,3 +111,6 @@
     opacity: 0;
   }
 }
+html.dark .pre-loader .loader-item {
+  background: #fff;
+}
diff --git a/apps/trading/public/theme-setter.js b/apps/trading/public/theme-setter.js
new file mode 100644
index 000000000..0fc7ae061
--- /dev/null
+++ b/apps/trading/public/theme-setter.js
@@ -0,0 +1,9 @@
+(function () {
+  var storedTheme = window.localStorage.getItem('theme');
+  if (
+    storedTheme === 'dark' ||
+    (!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    document.documentElement.classList.add('dark');
+  }
+})();
diff --git a/libs/ui-toolkit/src/components/loader/loader.module.scss b/libs/ui-toolkit/src/components/loader/loader.module.scss
new file mode 100644
index 000000000..3eb793b8f
--- /dev/null
+++ b/libs/ui-toolkit/src/components/loader/loader.module.scss
@@ -0,0 +1,28 @@
+@for $i from 0 through 16 {
+  .loader-item:nth-child(#{$i}) {
+    @if $i % 2 == 0 {
+      animation-delay: #{$i * 50 * random(5)}ms;
+      animation-direction: reverse;
+    } @else {
+      animation-delay: #{$i * -50 * random(5)}ms;
+      animation-direction: alternate;
+    }
+  }
+}
+.loader-item {
+  animation: flickering 0.4s linear alternate infinite;
+}
+@keyframes flickering {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 1;
+  }
+  26% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/libs/ui-toolkit/src/components/loader/loader.tsx b/libs/ui-toolkit/src/components/loader/loader.tsx
index 89ada6310..475940d5b 100644
--- a/libs/ui-toolkit/src/components/loader/loader.tsx
+++ b/libs/ui-toolkit/src/components/loader/loader.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import styles from './loader.module.scss';
 
 const pseudoRandom = (seed: number) => {
   let value = seed;
@@ -15,7 +16,7 @@ export interface LoaderProps {
 }
 
 export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
-  const itemClasses = classNames('loader-item', {
+  const itemClasses = classNames('loader-item', styles['loader-item'], {
     'dark:bg-white bg-black': !forceTheme,
     'bg-white': forceTheme === 'dark',
     'bg-black': forceTheme === 'light',