diff --git a/apps/static/src/index.html b/apps/static/src/index.html
index 2ab0a6f71..b18ee58c0 100644
--- a/apps/static/src/index.html
+++ b/apps/static/src/index.html
@@ -15,6 +15,7 @@
     <ul>
       <li><a href="./fonts.css">AlphaLyrae font</a></li>
       <li><a href="./favicon.ico">Favicon</a></li>
+      <li><a href="./theme.js">Theme</a></li>
     </ul>
   </body>
 </html>
diff --git a/apps/static/src/theme.js b/apps/static/src/theme.js
new file mode 100644
index 000000000..0fc7ae061
--- /dev/null
+++ b/apps/static/src/theme.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/pages/_document.tsx b/apps/trading/pages/_document.tsx
index fb35e06da..19731f61d 100644
--- a/apps/trading/pages/_document.tsx
+++ b/apps/trading/pages/_document.tsx
@@ -17,6 +17,11 @@ export default function Document() {
           href="https://static.vega.xyz/favicon.ico"
         />
         <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
+        <script
+          src="https://static.vega.xyz/theme.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" />