From 9d42b7be2b2b42416a231e918dffd2bb9a8906ca Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Fri, 29 Oct 2021 11:15:00 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20dark=20mode=20toggle=20but?=
 =?UTF-8?q?ton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/compiled/main.css | 679 +++++++++++++++--------------------
 assets/icons/moon.svg        |   1 +
 assets/icons/sun.svg         |   1 +
 layouts/partials/footer.html |  64 ++--
 layouts/partials/head.html   |  18 +
 tailwind.config.js           |   2 +-
 6 files changed, 350 insertions(+), 415 deletions(-)
 create mode 100644 assets/icons/moon.svg
 create mode 100644 assets/icons/sun.svg

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index d2acda6b..d4b87fe5 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1057,10 +1057,8 @@ body a, body button {
   color: var(--color-primary-700);
 }
 
-@media (prefers-color-scheme: dark) {
-  .article-pagination a:hover .article-pagination-direction {
-    color: var(--color-primary-400);
-  }
+.dark .article-pagination a:hover .article-pagination-direction {
+  color: var(--color-primary-400);
 }
 
 /* -- Chroma Highlight -- */
@@ -1073,14 +1071,9 @@ body a, body button {
   color: var(--color-neutral-700);
 }
 
-@media (prefers-color-scheme: dark) {
-  .prose .chroma {
-    background-color: var(--color-neutral-700);
-  }
-
-  .prose .chroma {
-    color: var(--color-neutral-200);
-  }
+.dark .prose .chroma {
+  background-color: var(--color-neutral-700);
+  color: var(--color-neutral-200);
 }
 
 /* Other */
@@ -1129,10 +1122,8 @@ body a, body button {
   padding-right: 1rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .hl {
-    background-color: var(--color-primary-900);
-  }
+.dark .chroma .hl {
+  background-color: var(--color-primary-900);
 }
 
 .chroma .lntd .hl {
@@ -1146,10 +1137,8 @@ body a, body button {
   color: var(--color-neutral-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .lnt {
-    color: var(--color-neutral-300);
-  }
+.dark .chroma .lnt {
+  color: var(--color-neutral-300);
 }
 
 .chroma .lnt {
@@ -1163,10 +1152,8 @@ body a, body button {
   color: var(--color-neutral-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .ln {
-    color: var(--color-neutral-300);
-  }
+.dark .chroma .ln {
+  color: var(--color-neutral-300);
 }
 
 .chroma .ln {
@@ -1180,10 +1167,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .k {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .k {
+  color: var(--color-primary-300);
 }
 
 /* KeywordConstant */
@@ -1193,10 +1178,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .kc {
-    color: var(--color-secondary-500);
-  }
+.dark .chroma .kc {
+  color: var(--color-secondary-500);
 }
 
 /* KeywordDeclaration */
@@ -1205,10 +1188,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .kd {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .kd {
+  color: var(--color-primary-300);
 }
 
 /* KeywordNamespace */
@@ -1217,10 +1198,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .kn {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .kn {
+  color: var(--color-primary-300);
 }
 
 /* KeywordPseudo */
@@ -1229,10 +1208,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .kp {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .kp {
+  color: var(--color-primary-300);
 }
 
 /* KeywordReserved */
@@ -1241,10 +1218,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .kr {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .kr {
+  color: var(--color-primary-300);
 }
 
 /* KeywordType */
@@ -1253,10 +1228,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .kt {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .kt {
+  color: var(--color-secondary-600);
 }
 
 /* Name */
@@ -1265,10 +1238,8 @@ body a, body button {
   color: var(--color-secondary-900);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .n {
-    color: var(--color-secondary-200);
-  }
+.dark .chroma .n {
+  color: var(--color-secondary-200);
 }
 
 /* NameAttribute */
@@ -1277,10 +1248,8 @@ body a, body button {
   color: var(--color-secondary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .na {
-    color: var(--color-secondary-300);
-  }
+.dark .chroma .na {
+  color: var(--color-secondary-300);
 }
 
 /* NameBuiltin */
@@ -1289,10 +1258,8 @@ body a, body button {
   color: var(--color-secondary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nb {
-    color: var(--color-secondary-300);
-  }
+.dark .chroma .nb {
+  color: var(--color-secondary-300);
 }
 
 /* NameBuiltinPseudo */
@@ -1301,10 +1268,8 @@ body a, body button {
   color: var(--color-secondary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .bp {
-    color: var(--color-secondary-300);
-  }
+.dark .chroma .bp {
+  color: var(--color-secondary-300);
 }
 
 /* NameClass */
@@ -1313,10 +1278,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nc {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .nc {
+  color: var(--color-primary-300);
 }
 
 /* NameConstant */
@@ -1326,10 +1289,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .no {
-    color: var(--color-secondary-500);
-  }
+.dark .chroma .no {
+  color: var(--color-secondary-500);
 }
 
 /* NameDecorator */
@@ -1338,10 +1299,8 @@ body a, body button {
   color: var(--color-secondary-900);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nd {
-    color: var(--color-secondary-200);
-  }
+.dark .chroma .nd {
+  color: var(--color-secondary-200);
 }
 
 /* NameEntity */
@@ -1350,10 +1309,8 @@ body a, body button {
   color: var(--color-secondary-900);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .ni {
-    color: var(--color-secondary-200);
-  }
+.dark .chroma .ni {
+  color: var(--color-secondary-200);
 }
 
 /* NameException */
@@ -1363,10 +1320,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .ne {
-    color: var(--color-secondary-500);
-  }
+.dark .chroma .ne {
+  color: var(--color-secondary-500);
 }
 
 /* NameFunction */
@@ -1375,10 +1330,8 @@ body a, body button {
   color: var(--color-secondary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nf {
-    color: var(--color-secondary-500);
-  }
+.dark .chroma .nf {
+  color: var(--color-secondary-500);
 }
 
 /* NameFunctionMagic */
@@ -1387,10 +1340,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .fm {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .fm {
+  color: var(--color-primary-300);
 }
 
 /* NameLabel */
@@ -1399,10 +1350,8 @@ body a, body button {
   color: var(--color-secondary-900);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nl {
-    color: var(--color-secondary-200);
-  }
+.dark .chroma .nl {
+  color: var(--color-secondary-200);
 }
 
 /* NameNamespace */
@@ -1411,10 +1360,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nn {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .nn {
+  color: var(--color-primary-300);
 }
 
 /* NameOther */
@@ -1423,10 +1370,8 @@ body a, body button {
   color: var(--color-secondary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nx {
-    color: var(--color-secondary-300);
-  }
+.dark .chroma .nx {
+  color: var(--color-secondary-300);
 }
 
 /* NameProperty */
@@ -1441,10 +1386,8 @@ body a, body button {
   color: var(--color-secondary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nt {
-    color: var(--color-secondary-300);
-  }
+.dark .chroma .nt {
+  color: var(--color-secondary-300);
 }
 
 /* NameVariable */
@@ -1453,10 +1396,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .nv {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .nv {
+  color: var(--color-secondary-600);
 }
 
 /* NameVariableClass */
@@ -1465,10 +1406,8 @@ body a, body button {
   color: var(--color-primary-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .vc {
-    color: var(--color-primary-300);
-  }
+.dark .chroma .vc {
+  color: var(--color-primary-300);
 }
 
 /* NameVariableGlobal */
@@ -1478,10 +1417,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .vg {
-    color: var(--color-secondary-500);
-  }
+.dark .chroma .vg {
+  color: var(--color-secondary-500);
 }
 
 /* NameVariableInstance */
@@ -1490,10 +1427,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .vi {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .vi {
+  color: var(--color-secondary-600);
 }
 
 /* NameVariableMagic */
@@ -1502,10 +1437,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .vm {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .vm {
+  color: var(--color-secondary-600);
 }
 
 /* Literal */
@@ -1514,10 +1447,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .l {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .l {
+  color: var(--color-primary-400);
 }
 
 /* LiteralDate */
@@ -1526,10 +1457,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .ld {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .ld {
+  color: var(--color-primary-400);
 }
 
 /* LiteralString */
@@ -1538,10 +1467,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .s {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .s {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringAffix */
@@ -1550,10 +1477,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .sa {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .sa {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringBacktick */
@@ -1562,10 +1487,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .sb {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .sb {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringChar */
@@ -1574,10 +1497,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .sc {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .sc {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringDelimiter */
@@ -1586,10 +1507,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .dl {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .dl {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringDoc */
@@ -1598,10 +1517,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .sd {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .sd {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringDouble */
@@ -1610,10 +1527,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .s2 {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .s2 {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringEscape */
@@ -1623,10 +1538,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .se {
-    color: var(--color-secondary-500);
-  }
+.dark .chroma .se {
+  color: var(--color-secondary-500);
 }
 
 /* LiteralStringHeredoc */
@@ -1635,10 +1548,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .sh {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .sh {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringInterpol */
@@ -1647,10 +1558,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .si {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .si {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringOther */
@@ -1659,10 +1568,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .sx {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .sx {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringRegex */
@@ -1672,10 +1579,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .sr {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .sr {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringSingle */
@@ -1684,10 +1589,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .s1 {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .s1 {
+  color: var(--color-primary-400);
 }
 
 /* LiteralStringSymbol */
@@ -1697,10 +1600,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .ss {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .ss {
+  color: var(--color-primary-400);
 }
 
 /* LiteralNumber */
@@ -1709,10 +1610,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .m {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .m {
+  color: var(--color-secondary-600);
 }
 
 /* LiteralNumberBin */
@@ -1721,10 +1620,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .mb {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .mb {
+  color: var(--color-secondary-600);
 }
 
 /* LiteralNumberFloat */
@@ -1733,10 +1630,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .mf {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .mf {
+  color: var(--color-secondary-600);
 }
 
 /* LiteralNumberHex */
@@ -1745,10 +1640,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .mh {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .mh {
+  color: var(--color-secondary-600);
 }
 
 /* LiteralNumberInteger */
@@ -1757,10 +1650,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .mi {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .mi {
+  color: var(--color-secondary-600);
 }
 
 /* LiteralNumberIntegerLong */
@@ -1769,10 +1660,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .il {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .il {
+  color: var(--color-secondary-600);
 }
 
 /* LiteralNumberOct */
@@ -1781,10 +1670,8 @@ body a, body button {
   color: var(--color-secondary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .mo {
-    color: var(--color-secondary-600);
-  }
+.dark .chroma .mo {
+  color: var(--color-secondary-600);
 }
 
 /* Operator */
@@ -1800,10 +1687,8 @@ body a, body button {
   color: var(--color-primary-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .ow {
-    color: var(--color-primary-600);
-  }
+.dark .chroma .ow {
+  color: var(--color-primary-600);
 }
 
 /* Punctuation */
@@ -1818,10 +1703,8 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .c {
-    color: var(--color-neutral-500);
-  }
+.dark .chroma .c {
+  color: var(--color-neutral-500);
 }
 
 /* CommentHashbang */
@@ -1832,10 +1715,8 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .ch {
-    color: var(--color-neutral-500);
-  }
+.dark .chroma .ch {
+  color: var(--color-neutral-500);
 }
 
 /* CommentMultiline */
@@ -1845,10 +1726,8 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .cm {
-    color: var(--color-neutral-500);
-  }
+.dark .chroma .cm {
+  color: var(--color-neutral-500);
 }
 
 /* CommentSingle */
@@ -1858,10 +1737,8 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .c1 {
-    color: var(--color-neutral-500);
-  }
+.dark .chroma .c1 {
+  color: var(--color-neutral-500);
 }
 
 /* CommentSpecial */
@@ -1871,10 +1748,8 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .cs {
-    color: var(--color-neutral-500);
-  }
+.dark .chroma .cs {
+  color: var(--color-neutral-500);
 }
 
 /* CommentPreproc */
@@ -1884,10 +1759,8 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .cp {
-    color: var(--color-neutral-500);
-  }
+.dark .chroma .cp {
+  color: var(--color-neutral-500);
 }
 
 /* CommentPreprocFile */
@@ -1897,10 +1770,8 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .cpf {
-    color: var(--color-neutral-500);
-  }
+.dark .chroma .cpf {
+  color: var(--color-neutral-500);
 }
 
 /* Generic */
@@ -1937,10 +1808,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .gi {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .gi {
+  color: var(--color-primary-400);
 }
 
 /* GenericOutput */
@@ -1949,10 +1818,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .go {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .go {
+  color: var(--color-primary-400);
 }
 
 /* GenericPrompt */
@@ -1961,10 +1828,8 @@ body a, body button {
   color: var(--color-primary-800);
 }
 
-@media (prefers-color-scheme: dark) {
-  .chroma .gp {
-    color: var(--color-primary-400);
-  }
+.dark .chroma .gp {
+  color: var(--color-primary-400);
 }
 
 /* GenericStrong */
@@ -2191,6 +2056,10 @@ body a, body button {
   cursor: default;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .list-none {
   list-style-type: none;
 }
@@ -2263,6 +2132,14 @@ body a, body button {
   border-color: var(--color-primary-400);
 }
 
+.border-neutral-200 {
+  border-color: var(--color-neutral-200);
+}
+
+.border-neutral-700 {
+  border-color: var(--color-neutral-700);
+}
+
 .bg-neutral {
   background-color: var(--color-neutral);
 }
@@ -2507,6 +2384,14 @@ body a, body button {
   margin-top: 2rem;
 }
 
+.hover\:border-primary-400:hover {
+  border-color: var(--color-primary-400);
+}
+
+.hover\:border-primary-500:hover {
+  border-color: var(--color-primary-500);
+}
+
 .hover\:bg-primary-600:hover {
   background-color: var(--color-primary-600);
 }
@@ -2527,14 +2412,14 @@ body a, body button {
   color: var(--color-primary-400);
 }
 
-.hover\:text-neutral:hover {
-  color: var(--color-neutral);
-}
-
 .hover\:text-primary-500:hover {
   color: var(--color-primary-500);
 }
 
+.hover\:text-neutral:hover {
+  color: var(--color-neutral);
+}
+
 .hover\:underline:hover {
   text-decoration: underline;
 }
@@ -2562,165 +2447,171 @@ body a, body button {
   text-decoration-thickness: 2px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:prose-light {
-    color: var(--color-neutral-400);
-  }
+.dark .dark\:prose-light {
+  color: var(--color-neutral-400);
+}
 
-  .dark\:prose-light a {
-    color: var(--color-primary-400);
-    -webkit-text-decoration-color: var(--color-neutral-500);
-            text-decoration-color: var(--color-neutral-500);
-  }
+.dark .dark\:prose-light a {
+  color: var(--color-primary-400);
+  -webkit-text-decoration-color: var(--color-neutral-500);
+          text-decoration-color: var(--color-neutral-500);
+}
 
-  .dark\:prose-light strong {
-    color: var(--color-neutral);
-  }
+.dark .dark\:prose-light strong {
+  color: var(--color-neutral);
+}
 
-  .dark\:prose-light ol > li::before {
-    color: var(--color-neutral-400);
-  }
+.dark .dark\:prose-light ol > li::before {
+  color: var(--color-neutral-400);
+}
 
-  .dark\:prose-light ul > li::before {
-    background-color: var(--color-neutral-600);
-  }
+.dark .dark\:prose-light ul > li::before {
+  background-color: var(--color-neutral-600);
+}
 
-  .dark\:prose-light hr {
-    border-color: var(--color-neutral-500);
-  }
+.dark .dark\:prose-light hr {
+  border-color: var(--color-neutral-500);
+}
 
-  .dark\:prose-light blockquote {
-    color: var(--color-neutral-200);
-    border-left-color: var(--color-primary-900);
-  }
+.dark .dark\:prose-light blockquote {
+  color: var(--color-neutral-200);
+  border-left-color: var(--color-primary-900);
+}
 
-  .dark\:prose-light h1 {
-    color: var(--color-neutral);
-  }
+.dark .dark\:prose-light h1 {
+  color: var(--color-neutral);
+}
 
-  .dark\:prose-light h2 {
-    color: var(--color-neutral);
-  }
+.dark .dark\:prose-light h2 {
+  color: var(--color-neutral);
+}
 
-  .dark\:prose-light h3 {
-    color: var(--color-neutral);
-  }
+.dark .dark\:prose-light h3 {
+  color: var(--color-neutral);
+}
 
-  .dark\:prose-light h4 {
-    color: var(--color-neutral);
-  }
+.dark .dark\:prose-light h4 {
+  color: var(--color-neutral);
+}
 
-  .dark\:prose-light figure figcaption {
-    color: var(--color-neutral-400);
-  }
+.dark .dark\:prose-light figure figcaption {
+  color: var(--color-neutral-400);
+}
 
-  .dark\:prose-light code {
-    color: var(--color-secondary-400);
-  }
+.dark .dark\:prose-light code {
+  color: var(--color-secondary-400);
+}
 
-  .dark\:prose-light a code {
-    color: var(--color-neutral);
-  }
+.dark .dark\:prose-light a code {
+  color: var(--color-neutral);
+}
 
-  .dark\:prose-light pre {
-    color: var(--color-neutral-200);
-    background-color: var(--color-neutral-700);
-  }
+.dark .dark\:prose-light pre {
+  color: var(--color-neutral-200);
+  background-color: var(--color-neutral-700);
+}
 
-  .dark\:prose-light pre code {
-    color: var(--color-neutral-200);
-  }
+.dark .dark\:prose-light pre code {
+  color: var(--color-neutral-200);
+}
 
-  .dark\:prose-light thead {
-    color: var(--color-neutral);
-    border-bottom-color: var(--color-neutral-500);
-  }
+.dark .dark\:prose-light thead {
+  color: var(--color-neutral);
+  border-bottom-color: var(--color-neutral-500);
+}
 
-  .dark\:prose-light tbody tr {
-    border-bottom-color: var(--color-neutral-700);
-  }
+.dark .dark\:prose-light tbody tr {
+  border-bottom-color: var(--color-neutral-700);
+}
 
-  .dark\:prose-light kbd {
-    background-color: var(--color-neutral-700);
-    color: var(--color-neutral-300);
-  }
+.dark .dark\:prose-light kbd {
+  background-color: var(--color-neutral-700);
+  color: var(--color-neutral-300);
+}
 
-  .dark\:prose-light mark {
-    background-color: var(--color-secondary-400);
-  }
+.dark .dark\:prose-light mark {
+  background-color: var(--color-secondary-400);
+}
 
-  .dark\:border-neutral-600 {
-    border-color: var(--color-neutral-600);
-  }
+.dark .dark\:inline {
+  display: inline;
+}
 
-  .dark\:border-primary-600 {
-    border-color: var(--color-primary-600);
-  }
+.dark .dark\:hidden {
+  display: none;
+}
 
-  .dark\:bg-neutral-800 {
-    background-color: var(--color-neutral-800);
-  }
+.dark .dark\:border-neutral-600 {
+  border-color: var(--color-neutral-600);
+}
 
-  .dark\:bg-primary-400 {
-    background-color: var(--color-primary-400);
-  }
+.dark .dark\:border-primary-600 {
+  border-color: var(--color-primary-600);
+}
 
-  .dark\:bg-neutral-700 {
-    background-color: var(--color-neutral-700);
-  }
+.dark .dark\:bg-neutral-800 {
+  background-color: var(--color-neutral-800);
+}
 
-  .dark\:bg-primary-900 {
-    background-color: var(--color-primary-900);
-  }
+.dark .dark\:bg-primary-400 {
+  background-color: var(--color-primary-400);
+}
 
-  .dark\:bg-primary-800 {
-    background-color: var(--color-primary-800);
-  }
+.dark .dark\:bg-neutral-700 {
+  background-color: var(--color-neutral-700);
+}
 
-  .dark\:text-neutral-500 {
-    color: var(--color-neutral-500);
-  }
+.dark .dark\:bg-primary-900 {
+  background-color: var(--color-primary-900);
+}
 
-  .dark\:text-neutral {
-    color: var(--color-neutral);
-  }
+.dark .dark\:bg-primary-800 {
+  background-color: var(--color-primary-800);
+}
 
-  .dark\:text-neutral-300 {
-    color: var(--color-neutral-300);
-  }
+.dark .dark\:text-neutral-500 {
+  color: var(--color-neutral-500);
+}
 
-  .dark\:text-primary-400 {
-    color: var(--color-primary-400);
-  }
+.dark .dark\:text-neutral {
+  color: var(--color-neutral);
+}
 
-  .dark\:text-neutral-600 {
-    color: var(--color-neutral-600);
-  }
+.dark .dark\:text-neutral-300 {
+  color: var(--color-neutral-300);
+}
 
-  .dark\:text-neutral-800 {
-    color: var(--color-neutral-800);
-  }
+.dark .dark\:text-primary-400 {
+  color: var(--color-primary-400);
+}
 
-  .dark\:underline-neutral-600 {
-    -webkit-text-decoration-color: var(--color-neutral-600);
-            text-decoration-color: var(--color-neutral-600);
-  }
+.dark .dark\:text-neutral-600 {
+  color: var(--color-neutral-600);
+}
 
-  .dark\:hover\:bg-primary-400:hover {
-    background-color: var(--color-primary-400);
-  }
+.dark .dark\:text-neutral-800 {
+  color: var(--color-neutral-800);
+}
 
-  .dark\:hover\:\!bg-primary-700:hover {
-    background-color: var(--color-primary-700) !important;
-  }
+.dark .dark\:underline-neutral-600 {
+  -webkit-text-decoration-color: var(--color-neutral-600);
+          text-decoration-color: var(--color-neutral-600);
+}
 
-  .dark\:hover\:text-primary-400:hover {
-    color: var(--color-primary-400);
-  }
+.dark .dark\:hover\:bg-primary-400:hover {
+  background-color: var(--color-primary-400);
+}
 
-  .dark\:hover\:text-neutral-800:hover {
-    color: var(--color-neutral-800);
-  }
+.dark .dark\:hover\:\!bg-primary-700:hover {
+  background-color: var(--color-primary-700) !important;
+}
+
+.dark .dark\:hover\:text-primary-400:hover {
+  color: var(--color-primary-400);
+}
+
+.dark .dark\:hover\:text-neutral-800:hover {
+  color: var(--color-neutral-800);
 }
 
 @media (min-width: 640px) {
diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg
new file mode 100644
index 00000000..9fbb0a34
--- /dev/null
+++ b/assets/icons/moon.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
\ No newline at end of file
diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg
new file mode 100644
index 00000000..1a586124
--- /dev/null
+++ b/assets/icons/sun.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d95c02ce..f0122e77 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -16,26 +16,50 @@
       </ul>
     </nav>
   {{ end }}
-  {{/* Copyright */}}
-  <p class="text-sm text-neutral-400 dark:text-neutral-500">
-    {{- with .Site.Copyright }}
-      {{ . | emojify | markdownify }}
-    {{- else }}
-      &copy;
-      {{ now.Format "2006" }}
-      {{ .Site.Author.name | markdownify | emojify }}
-    {{- end }}
-  </p>
-  {{/* Theme attribution */}}
-  {{ if .Site.Params.attribution | default true }}
-    <p class="text-xs text-neutral-300 dark:text-neutral-600">
-      {{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
-        href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
-      }}
-      {{ $congo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
-      {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
-    </p>
-  {{ end }}
+  <div class="flex justify-between">
+    <div>
+      {{/* Copyright */}}
+      <p class="text-sm text-neutral-400 dark:text-neutral-500">
+        {{- with .Site.Copyright }}
+          {{ . | emojify | markdownify }}
+        {{- else }}
+          &copy;
+          {{ now.Format "2006" }}
+          {{ .Site.Author.name | markdownify | emojify }}
+        {{- end }}
+      </p>
+      {{/* Theme attribution */}}
+      {{ if .Site.Params.attribution | default true }}
+        <p class="text-xs text-neutral-300 dark:text-neutral-600">
+          {{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
+            href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
+          }}
+          {{ $congo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
+          {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
+        </p>
+      {{ end }}
+    </div>
+    <div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
+      <button
+        id="dark-toggle"
+        onclick="setPreferredScheme('dark');"
+        oncontextmenu="setPreferredScheme('default'); return false;"
+        class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
+        title="Switch to dark mode"
+      >
+        {{ partial "icon.html" "moon" }}
+      </button>
+      <button
+        id="light-toggle"
+        onclick="setPreferredScheme('light');"
+        oncontextmenu="setPreferredScheme('default'); return false;"
+        class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
+        title="Switch to light mode"
+      >
+        {{ partial "icon.html" "sun" }}
+      </button>
+    </div>
+  </div>
   {{/* Extend footer - eg. for extra scripts, etc. */}}
   {{ if templates.Exists "partials/extend-footer.html" }}
     {{ partialCached "extend-footer.html" . }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f9eb9534..3ab0bb23 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -62,6 +62,24 @@
       integrity="{{ $customStyles.Data.Integrity }}"
     />
   {{ end }}
+  <script>
+    function loadPreferredScheme() {
+      if (localStorage.preferredScheme === 'dark' || (!('preferredScheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    }
+    function setPreferredScheme(scheme) {
+      if (scheme == "default") {
+        localStorage.removeItem("preferredScheme");
+      } else {
+        localStorage.preferredScheme = scheme;
+      }
+      loadPreferredScheme();
+    }
+    loadPreferredScheme();
+  </script>
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 33f31476..5c1de438 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
       "./themes/congo/content/**/*.{html,md}",
     ],
   },
-  darkMode: "media",
+  darkMode: "class",
   theme: {
     colors: {
       transparent: "transparent",