diff --git a/snaplets/heist/templates/frontpage.tpl b/snaplets/heist/templates/frontpage.tpl
index b7045c1447bbbac6c1c21f44c4b2c5aaa702788c..8b14c02db963e03d0239a8d5053de2bd41cb4c52 100644
--- a/snaplets/heist/templates/frontpage.tpl
+++ b/snaplets/heist/templates/frontpage.tpl
@@ -6,7 +6,7 @@
   <title>Curr(y)gle</title>
   <meta name="description" content="Curr(y)gle is an API search engine for the functional logic programming language Curry.">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
-  <link rel="stylesheet" href="./static/currygle.css" integrity="sha384-obTPKU14zA+k5XYYF1uXpSbg3dUD7dZ6if4WeFHQjT9X+icx+3uVPPmEf5M0gB9c" crossorigin="anonymous" />
+  <link rel="stylesheet" href="./static/currygle.css" integrity="sha384-5yGZwwWngRSxXW55ZOQ72eAdq4A1MC/uUjjQo7aVwIbRR5mnn/p/HfinYn3cN4/e" crossorigin="anonymous" />
   <script src="https://code.jquery.com/jquery-3.3.1.min.js" defer integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
   <script src="./static/typeahead.bundle.min.js" defer integrity="sha384-BdjsH97+KNxfKcYg/6SnokfwHP6QlMxt/Feedfq5IhIM7QHtYve/dYyKz0sc84fD" crossorigin="anonymous"></script>
   <script src="./static/searching.js" defer integrity="sha384-lnXehGZlwQGcE17lq1i856iVFXCcjuzK9wCtM3gYZSDcgA3pI136yyQTxSbRTMsJ" crossorigin="anonymous"></script>
diff --git a/static/currygle.css b/static/currygle.css
index d3d6f5271e8f828a86ccda90f362a8f8c23294b4..16f7b80399c340464a16fc1158bf90ec8496659b 100644
--- a/static/currygle.css
+++ b/static/currygle.css
@@ -6,12 +6,14 @@
   --currygle-primary-color: hsl(264, 34%, 36%);
   --currygle-secondary-color: hsl(264, 39%, 81%);
   --currygle-secondary-light-color: hsla(264, 39%, 81%, .25);
+  --footer-bg-color: hsl(0, 0%, 96%);
   --header-bg-color: var(--currygle-primary-color);
   --link-color: var(--currygle-primary-color);
-  --main-bg-color: hsl(0, 0%, 96%);
+  --main-bg-color: white;
   --margin: 1.5rem;
   --padding: 1.5rem;
   --padding-2x: calc(var(--padding) * 2);
+  --primary: hsl(210, 11%, 15%);
 }
 
 a {
@@ -24,24 +26,27 @@ a:visited {
 }
 
 a:hover {
-  color: var(--link-color);
   text-decoration: underline;
 }
 
 body {
+  background: var(--main-bg-color);
+  color: var(--primary);
   font-size: .75rem;
   min-width: 320px;
 }
 
 code {
-  background-color: var(--main-bg-color);
+  background-color: var(--footer-bg-color);
   border-radius: var(--border-radius);
   padding: .2rem .4rem;
 }
 
 input[type="text"].form-control {
+  background-color: var(--main-bg-color) !important;
   border: var(--border);
   border-color: var(--currygle-secondary-color);
+  color: var(--primary);
   font-weight: 500;
   padding: .375rem .75rem;
   width: 100%;
@@ -52,7 +57,9 @@ input[type="text"].form-control:focus {
 }
 
 kbd {
+  background-color: var(--gray);
   border-radius: var(--border-radius);
+  padding: .2rem .4rem;
 }
 
 .author,
@@ -103,7 +110,7 @@ kbd {
 
 .footer {
   align-items: center;
-  background-color: var(--main-bg-color);
+  background-color: var(--footer-bg-color);
   display: flex;
   flex-direction: column;
   margin-top: var(--margin);
@@ -143,6 +150,10 @@ kbd {
   text-align: center;
 }
 
+.list-group-item {
+  background-color: var(--main-bg-color);
+}
+
 .module {
   word-break: break-all !important;
 }
@@ -162,7 +173,7 @@ kbd {
 }
 
 .option-title {
-  background-color: var(--main-bg-color);
+  background-color: var(--footer-bg-color);
   border: var(--border);
   border-radius: var(--border-radius);
   font-size: .9rem;
@@ -176,11 +187,12 @@ kbd {
 }
 
 .page-item > .page-link {
+  background-color: var(--main-bg-color);
   border: var(--border);
 }
 
 .page-item > .page-link:hover {
-  background-color: var(--main-bg-color);
+  background-color: var(--footer-bg-color);
   color: var(--link-color);
 }
 
@@ -194,7 +206,9 @@ kbd {
 }
 
 .page-item.disabled > .page-link {
+  background-color: var(--main-bg-color);
   border: var(--border);
+  color: var(--secondary);
 }
 
 .pagination {
@@ -291,7 +305,7 @@ kbd {
 }
 
 .search-result-item-title {
-  color: var(--currygle-primary-color);
+  color: var(--link-color);
   font-family: var(--font-family-monospace);
   font-size: 1rem;
   font-weight: bold;
@@ -335,7 +349,7 @@ kbd {
 }
 
 .tt-menu {
-  background-color: white;
+  background-color: var(--main-bg-color);
   border: var(--border);
   border-radius: var(--border-radius);
   box-shadow: 0 .5rem 1rem hsla(0, 0%, 0%, .175);
@@ -352,15 +366,11 @@ kbd {
   white-space: nowrap;
 }
 
-.tt-suggestion:hover {
-  background-color: var(--currygle-primary-color);
-  color: white;
-  cursor: pointer;
-}
-
+.tt-suggestion:hover,
 .tt-suggestion.tt-cursor {
   background-color: var(--currygle-primary-color);
   color: white;
+  cursor: pointer;
 }
 
 .twitter-typeahead {
@@ -418,4 +428,28 @@ kbd {
   .footer {
     padding-bottom: max(var(--padding), env(safe-area-inset-bottom));
   }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --footer-bg-color: hsl(120, 2%, 5%);
+    --link-color: hsl(264, 34%, 55%);
+    --main-bg-color: hsl(120, 2%, 10%);
+    --primary: hsl(240, 2%, 80%);
+    --secondary: hsl(240, 2%, 80%);
+  }
+
+  kbd {
+    background-color: var(--footer-bg-color);
+  }
+
+  .page-item.active > .page-link,
+  .page-item.active > .page-link:hover {
+    border: var(--border);
+    color: var(--secondary);
+  }
+
+  .tt-menu {
+    box-shadow: none;
+  }
 }
\ No newline at end of file