diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8d25598..104fea7 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,8 +2,8 @@
 <html>
 {{- partial "head.html" . -}}
 
-<body>
-    <nav class="w:full h:90 fixed bg:white">
+<body class="bg:gray-90@dark font:gray-15@dark">
+    <nav class="w:full h:90 fixed bg:gray-88@dark bg:white">
         <div class="
             h:full
             w:full
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1408447..e7705ee 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -51,6 +51,7 @@
     r:8_:where(pre)
     overflow:auto_:where(pre)
     bg:gray-3_:where(pre,code:not(.highlight_*))
+    bg:gray-93_:where(pre,code:not(.highlight_*))@dark
     p:2;4_:where(code:not(.highlight_*))
     r:4_:where(code:not(.highlight_*))
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3f91a0d..0b32d4c 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -17,4 +17,8 @@
     <link href="https://unpkg.com/@master/normal.css" rel="stylesheet">
     <script src="https://unpkg.com/@master/style"></script>
     <script src="https://unpkg.com/@master/styles"></script>
+
+    <script>
+        window.matchMedia('(prefers-color-scheme: dark)').matches && document.documentElement.classList.add("dark");
+    </script>
 </head>
