diff --git a/src/templates/directoryListing.hbs b/src/templates/directoryListing.hbs
index 29b3363..4871452 100644
--- a/src/templates/directoryListing.hbs
+++ b/src/templates/directoryListing.hbs
@@ -1,5 +1,21 @@
 <html>
-<head><title>Index of {{pathname}}</title></head>
+<head>
+  <title>Index of {{pathname}}</title>
+  <style>   
+    @media (prefers-color-scheme: dark) {
+      body {
+        color: white;
+        background-color: #1c1b22;
+      }
+      a {
+        color: #3391ff;
+      }
+      a:visited {
+        color: #C63B65;
+      }
+    }
+  </style>
+</head>
 <body>
 <h1>Index of {{pathname}}</h1><hr><pre><a href="../">../</a>
 {{#each entries}}
diff --git a/src/templates/directoryListing.out.js b/src/templates/directoryListing.out.js
index 4ee622e..bb46f69 100644
--- a/src/templates/directoryListing.out.js
+++ b/src/templates/directoryListing.out.js
@@ -1 +1 @@
-export default{1:function(n,l,e,t,a){var r,o=n.strict,u=n.lambda;return'<a href="'+(null!=(r=u(o(l,"href",{start:{line:6,column:11},end:{line:6,column:15}}),l))?r:"")+'">'+(null!=(r=u(o(l,"name",{start:{line:6,column:21},end:{line:6,column:25}}),l))?r:"")+"</a>"+(null!=(r=u(o(l,"displayNamePaddingRight",{start:{line:6,column:33},end:{line:6,column:56}}),l))?r:"")+" "+(null!=(r=u(o(l,"lastModified",{start:{line:6,column:61},end:{line:6,column:73}}),l))?r:"")+" "+(null!=(r=u(o(l,"size",{start:{line:6,column:78},end:{line:6,column:82}}),l))?r:"")+"\r\n"},compiler:[8,">= 4.3.0"],main:function(n,l,e,t,a){var r,o=n.strict,u=n.lambda,i=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return"<!DOCTYPE html><html>\r\n<head><title>Index of "+(null!=(r=u(o(l,"pathname",{start:{line:2,column:24},end:{line:2,column:32}}),l))?r:"")+"</title></head>\r\n<body>\r\n<h1>Index of "+(null!=(r=u(o(l,"pathname",{start:{line:4,column:15},end:{line:4,column:23}}),l))?r:"")+'</h1><hr><pre><a href="../">../</a>\r\n'+(null!=(r=i(e,"each").call(null!=l?l:n.nullContext||{},i(l,"entries"),{name:"each",hash:{},fn:n.program(1,a,0),inverse:n.noop,data:a,loc:{start:{line:5,column:0},end:{line:7,column:9}}}))?r:"")+"</pre><hr /></body>\r\n</html>\r\n"},useData:!0};
+export default{1:function(n,l,e,r,t){var o,a=n.strict,i=n.lambda;return'<a href="'+(null!=(o=i(a(l,"href",{start:{line:22,column:11},end:{line:22,column:15}}),l))?o:"")+'">'+(null!=(o=i(a(l,"name",{start:{line:22,column:21},end:{line:22,column:25}}),l))?o:"")+"</a>"+(null!=(o=i(a(l,"displayNamePaddingRight",{start:{line:22,column:33},end:{line:22,column:56}}),l))?o:"")+" "+(null!=(o=i(a(l,"lastModified",{start:{line:22,column:61},end:{line:22,column:73}}),l))?o:"")+" "+(null!=(o=i(a(l,"size",{start:{line:22,column:78},end:{line:22,column:82}}),l))?o:"")+"\r\n"},compiler:[8,">= 4.3.0"],main:function(n,l,e,r,t){var o,a=n.strict,i=n.lambda,c=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return"<!DOCTYPE html><html>\r\n<head>\r\n  <title>Index of "+(null!=(o=i(a(l,"pathname",{start:{line:3,column:20},end:{line:3,column:28}}),l))?o:"")+"</title>\r\n  <style>   \r\n    @media (prefers-color-scheme: dark) {\r\n      body {\r\n        color: white;\r\n        background-color: #1c1b22;\r\n      }\r\n      a {\r\n        color: #3391ff;\r\n      }\r\n      a:visited {\r\n        color: #C63B65;\r\n      }\r\n    }\r\n  </style>\r\n</head>\r\n<body>\r\n<h1>Index of "+(null!=(o=i(a(l,"pathname",{start:{line:20,column:15},end:{line:20,column:23}}),l))?o:"")+'</h1><hr><pre><a href="../">../</a>\r\n'+(null!=(o=c(e,"each").call(null!=l?l:n.nullContext||{},c(l,"entries"),{name:"each",hash:{},fn:n.program(1,t,0),inverse:n.noop,data:t,loc:{start:{line:21,column:0},end:{line:23,column:9}}}))?o:"")+"</pre><hr /></body>\r\n</html>\r\n"},useData:!0};
diff --git a/tests/e2e/test-data/expected-html/dist.txt b/tests/e2e/test-data/expected-html/dist.txt
index 84d19b4..0b3b9c8 100644
--- a/tests/e2e/test-data/expected-html/dist.txt
+++ b/tests/e2e/test-data/expected-html/dist.txt
@@ -1,5 +1,21 @@
 <!DOCTYPE html><html>
-<head><title>Index of /dist/</title></head>
+<head>
+  <title>Index of /dist/</title>
+  <style>   
+    @media (prefers-color-scheme: dark) {
+      body {
+        color: white;
+        background-color: #1c1b22;
+      }
+      a {
+        color: #3391ff;
+      }
+      a:visited {
+        color: #C63B65;
+      }
+    }
+  </style>
+</head>
 <body>
 <h1>Index of /dist/</h1><hr><pre><a href="../">../</a>
 <a href="latest/">latest/</a>                                                           -                   -
