diff --git a/apps/server/src/assets/views/login.ejs b/apps/server/src/assets/views/login.ejs
index 4ffab51011..91e764ba21 100644
--- a/apps/server/src/assets/views/login.ejs
+++ b/apps/server/src/assets/views/login.ejs
@@ -12,8 +12,8 @@
             display: none;
         }
     </style>
-    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
-    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
+    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-light.css" media="(prefers-color-scheme: light)">
+    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-dark.css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
     <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 </head>
diff --git a/apps/server/src/assets/views/set_password.ejs b/apps/server/src/assets/views/set_password.ejs
index 2610716474..10bef8af10 100644
--- a/apps/server/src/assets/views/set_password.ejs
+++ b/apps/server/src/assets/views/set_password.ejs
@@ -6,8 +6,8 @@
     <title><%= t("set_password.title") %></title>
     <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
-    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
+    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-light.css" media="(prefers-color-scheme: light)">
+    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-dark.css" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
     <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
     <style>
diff --git a/apps/server/src/assets/views/setup.ejs b/apps/server/src/assets/views/setup.ejs
index 79e41b4672..5485e605b9 100644
--- a/apps/server/src/assets/views/setup.ejs
+++ b/apps/server/src/assets/views/setup.ejs
@@ -171,8 +171,8 @@
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
 <script src="<%= appPath %>/setup.js" crossorigin type="module"></script>
-<link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet" />
-<link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet" />
+<link href="<%= assetPath %>/stylesheets/theme-next-light.css" rel="stylesheet" media="(prefers-color-scheme: light)" />
+<link href="<%= assetPath %>/stylesheets/theme-next-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)" />
 <link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
 </body>
 </html>