diff --git a/man/docbook5-refentry-xslt/docbook5-refentry-to-html5.xsl b/man/docbook5-refentry-xslt/docbook5-refentry-to-html5.xsl
index 77e8ea3..4106bba 100644
--- a/man/docbook5-refentry-xslt/docbook5-refentry-to-html5.xsl
+++ b/man/docbook5-refentry-xslt/docbook5-refentry-to-html5.xsl
@@ -21,7 +21,7 @@
   <xsl:variable name="reference" select="document($dbk5.reference)/dbk:reference"/>
 
   <xsl:template match="/">
-    <html>
+    <html data-color-scheme="light" data-fallback-color-scheme="light">
       <xsl:apply-templates select="/dbk:*/@xml:lang"/>
       <xsl:apply-templates select="node()"/>
     </html>
@@ -79,11 +79,45 @@
       </title>
 
       <style type="text/css" media="screen"><![CDATA[
+        html[data-color-scheme=light] {
+          --bgcolor: #fff;
+          --pre-bgcolor: #ddd;
+          --pre-color: #000;
+          --main-color: #000;
+          --h1-color: #111;
+          --h2-color: #111;
+          --h3-color: #111;
+          --dt-color: #111;
+          --link-color: blue;
+          --vlink-color: purple;
+          --alink-color: red;
+          --hash-color: #aaa;
+          --hash-hover-color: #111;
+          --code-bgcolor: transparent;
+        }
+        html[data-color-scheme=dark] {
+          --bgcolor: #111;
+          --pre-bgcolor: #000;
+          --pre-color: lightgrey;
+          --main-color: lightgrey;
+          --h1-color: lightgrey;
+          --h2-color: lightgrey;
+          --h3-color: lightgrey;
+          --dt-color: lightgrey;
+          --link-color: lightblue;
+          --vlink-color: lightpink;
+          --alink-color: lightcoral;
+          --hash-color: grey;
+          --hash-hover-color: #fff;
+          --code-bgcolor: transparent;
+        }
         html {
           margin: 0;
           padding: 0;
           font-size: 18px;  /* Set rem */
           font-family: sans-serif;
+          background-color: var(--bgcolor);
+          color: var(--main-color);
         }
         body {
           padding: 1rem 2rem;
@@ -104,7 +138,7 @@
           line-height: 1.2em;
           font-size: 2rem;
           font-weight: bold;
-          color: #111;
+          color: var(--h1-color);
         }
         h1 code.manvolnum {
           font-size: 70%;
@@ -119,13 +153,13 @@
           line-height: 1.2em;
           font-size: .9rem;
           font-weight: 600;
-          color: #111;
+          color: var(--h2-color);
           text-transform: uppercase;
         }
         dt {
           margin-bottom: -.5rem;
           font-weight: bold;
-          color: #111;
+          color: var(--dt-color);
         }
         dt .replaceable {
           text-decoration: underline;
@@ -134,28 +168,133 @@
         dd {
           margin-bottom: 2em;
         }
+        a:link {
+          color: var(--link-color);
+        }
+        a:visited {
+          color: var(--vlink-color);
+        }
         a.hash-anchor {
           margin-left: .5em;
-          color: #aaa;
+          color: var(--hash-color);
           text-decoration: none;
           font-weight: normal;
         }
         a.hash-anchor:hover {
           text-decoration: underline;
-          color: #111;
+          color: var(--hash-hover-color);
         }
         code {
+          background-color: var(--code-bgcolor);
           font-family: monospace;
           font-weight: bold;
         }
         pre.monospaced, pre.cmdsynopsis {
-          background-color: #ddd;
-          font-family: monospace;
+          background-color: var(--pre-bgcolor);
           padding: 2em 2em;
+          color: var(--pre-color);
+          font-family: monospace;
+        }
+
+        .color-scheme-switch {
+          position: fixed;
+          top: 0;
+          right: 0;
+
+          input {
+            display: none;
+          }
+          label {
+            margin: 0;
+            box-sizing: border-box;
+            display: inline-block;
+            position: relative;
+            height: 32px;
+            width: 32px;
+            font-size: 20px;
+            padding: 6px;
+            line-height: 20px;
+            cursor: pointer;
+            text-align: center;
+          }
+          input[value=""] + label {
+            background-color: transparent;
+            color: var(--main-color);
+          }
+          input[value=light] + label {
+            background-color: white;
+            color: black;
+          }
+          input[value=dark] + label {
+            background-color: black;
+            color: white;
+          }
+          input:checked + label::before {
+            content: '';
+            position: absolute;
+            bottom: -6px;
+            left: 12px;
+            width: 6px;
+            height: 6px;
+            border: 2px solid black;
+            border-radius: 50%;
+            background-color: white;
+          }
         }
       ]]></style>
     </head>
     <body>
+      <nav class="color-scheme-switch" hidden="true">
+        <input type="radio" id="color-scheme-browser-default" checked="true" name="color-scheme" value=""/><label for="color-scheme-browser-default" title="Follow browser default">A</label>
+        <input type="radio" id="color-scheme-light" name="color-scheme" value="light"/><label for="color-scheme-light" title="Change to light theme">☀</label>
+        <input type="radio" id="color-scheme-dark" name="color-scheme" value="dark"/><label for="color-scheme-dark" title="Change to dark theme">⏾</label>
+      </nav>
+      <script><![CDATA[
+      function setColorScheme(colorScheme) {
+        if (!colorScheme) {
+          localStorage.removeItem('colorScheme');
+        }
+        else {
+          localStorage.setItem('colorScheme', colorScheme);
+        }
+
+        document.querySelector('html').dataset.colorScheme = getColorScheme();
+      }
+
+      function getColorScheme() {
+        const localValue = localStorage.getItem('colorScheme');
+        if (localValue !== null) {
+          return localValue;
+        }
+
+        console.log('A');
+
+        const browserValue = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (browserValue !== null) {
+          return browserValue;
+        }
+        console.log('B');
+
+        return document.querySelector('html').dataset.fallbackColorScheme;
+      }
+
+      document.querySelectorAll('.color-scheme-switch').forEach(el => {
+        el.hidden = false;
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+          document.querySelector('html').dataset.colorScheme = getColorScheme();
+        });
+
+        el.querySelectorAll('input').forEach(input => {
+          if (input.checked) {
+            setColorScheme(input.value);
+          }
+          input.addEventListener('change', (event) => {
+            setColorScheme(event.target.value);
+          });
+        });
+      });
+      ]]></script>
       <article>
         <xsl:apply-templates select="@xml:id"/>
         <header>
diff --git a/man/flashmq.1.html b/man/flashmq.1.html
index 099b6bb..73aeabf 100644
--- a/man/flashmq.1.html
+++ b/man/flashmq.1.html
@@ -1,11 +1,45 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<html xmlns="http://www.w3.org/1999/xhtml" data-color-scheme="light" data-fallback-color-scheme="light" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>flashmq (1) – A fast light-weight scalable MQTT server</title><style type="text/css" media="screen">
+        html[data-color-scheme=light] {
+          --bgcolor: #fff;
+          --pre-bgcolor: #ddd;
+          --pre-color: #000;
+          --main-color: #000;
+          --h1-color: #111;
+          --h2-color: #111;
+          --h3-color: #111;
+          --dt-color: #111;
+          --link-color: blue;
+          --vlink-color: purple;
+          --alink-color: red;
+          --hash-color: #aaa;
+          --hash-hover-color: #111;
+          --code-bgcolor: transparent;
+        }
+        html[data-color-scheme=dark] {
+          --bgcolor: #111;
+          --pre-bgcolor: #000;
+          --pre-color: lightgrey;
+          --main-color: lightgrey;
+          --h1-color: lightgrey;
+          --h2-color: lightgrey;
+          --h3-color: lightgrey;
+          --dt-color: lightgrey;
+          --link-color: lightblue;
+          --vlink-color: lightpink;
+          --alink-color: lightcoral;
+          --hash-color: grey;
+          --hash-hover-color: #fff;
+          --code-bgcolor: transparent;
+        }
         html {
           margin: 0;
           padding: 0;
           font-size: 18px;  /* Set rem */
           font-family: sans-serif;
+          background-color: var(--bgcolor);
+          color: var(--main-color);
         }
         body {
           padding: 1rem 2rem;
@@ -26,7 +60,7 @@
           line-height: 1.2em;
           font-size: 2rem;
           font-weight: bold;
-          color: #111;
+          color: var(--h1-color);
         }
         h1 code.manvolnum {
           font-size: 70%;
@@ -41,13 +75,13 @@
           line-height: 1.2em;
           font-size: .9rem;
           font-weight: 600;
-          color: #111;
+          color: var(--h2-color);
           text-transform: uppercase;
         }
         dt {
           margin-bottom: -.5rem;
           font-weight: bold;
-          color: #111;
+          color: var(--dt-color);
         }
         dt .replaceable {
           text-decoration: underline;
@@ -56,26 +90,125 @@
         dd {
           margin-bottom: 2em;
         }
+        a:link {
+          color: var(--link-color);
+        }
+        a:visited {
+          color: var(--vlink-color);
+        }
         a.hash-anchor {
           margin-left: .5em;
-          color: #aaa;
+          color: var(--hash-color);
           text-decoration: none;
           font-weight: normal;
         }
         a.hash-anchor:hover {
           text-decoration: underline;
-          color: #111;
+          color: var(--hash-hover-color);
         }
         code {
+          background-color: var(--code-bgcolor);
           font-family: monospace;
           font-weight: bold;
         }
         pre.monospaced, pre.cmdsynopsis {
-          background-color: #ddd;
-          font-family: monospace;
+          background-color: var(--pre-bgcolor);
           padding: 2em 2em;
+          color: var(--pre-color);
+          font-family: monospace;
+        }
+
+        .color-scheme-switch {
+          position: fixed;
+          top: 0;
+          right: 0;
+
+          input {
+            display: none;
+          }
+          label {
+            margin: 0;
+            box-sizing: border-box;
+            display: inline-block;
+            position: relative;
+            height: 32px;
+            width: 32px;
+            font-size: 20px;
+            padding: 6px;
+            line-height: 20px;
+            cursor: pointer;
+            text-align: center;
+          }
+          input[value=""] + label {
+            background-color: transparent;
+            color: var(--main-color);
+          }
+          input[value=light] + label {
+            background-color: white;
+            color: black;
+          }
+          input[value=dark] + label {
+            background-color: black;
+            color: white;
+          }
+          input:checked + label::before {
+            content: '';
+            position: absolute;
+            bottom: -6px;
+            left: 12px;
+            width: 6px;
+            height: 6px;
+            border: 2px solid black;
+            border-radius: 50%;
+            background-color: white;
+          }
+        }
+      </style></head><body><nav class="color-scheme-switch" hidden="true"><input type="radio" id="color-scheme-browser-default" checked name="color-scheme" value=""></input><label for="color-scheme-browser-default" title="Follow browser default">A</label><input type="radio" id="color-scheme-light" name="color-scheme" value="light"></input><label for="color-scheme-light" title="Change to light theme">☀</label><input type="radio" id="color-scheme-dark" name="color-scheme" value="dark"></input><label for="color-scheme-dark" title="Change to dark theme">⏾</label></nav><script>
+      function setColorScheme(colorScheme) {
+        if (!colorScheme) {
+          localStorage.removeItem('colorScheme');
+        }
+        else {
+          localStorage.setItem('colorScheme', colorScheme);
         }
-      </style></head><body><article id="flashmq.1"><header><h1>flashmq<code class="manvolnum"> (1)</code></h1><h2 class="refpurpose">A fast light-weight scalable MQTT server</h2></header><section class="refsynopsisdiv"><header><h2>Synopsis</h2></header>
+
+        document.querySelector('html').dataset.colorScheme = getColorScheme();
+      }
+
+      function getColorScheme() {
+        const localValue = localStorage.getItem('colorScheme');
+        if (localValue !== null) {
+          return localValue;
+        }
+
+        console.log('A');
+
+        const browserValue = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (browserValue !== null) {
+          return browserValue;
+        }
+        console.log('B');
+
+        return document.querySelector('html').dataset.fallbackColorScheme;
+      }
+
+      document.querySelectorAll('.color-scheme-switch').forEach(el => {
+        el.hidden = false;
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+          document.querySelector('html').dataset.colorScheme = getColorScheme();
+        });
+
+        el.querySelectorAll('input').forEach(input => {
+          if (input.checked) {
+            setColorScheme(input.value);
+          }
+          input.addEventListener('change', (event) => {
+            setColorScheme(event.target.value);
+          });
+        });
+      });
+      </script><article id="flashmq.1"><header><h1>flashmq<code class="manvolnum"> (1)</code></h1><h2 class="refpurpose">A fast light-weight scalable MQTT server</h2></header><section class="refsynopsisdiv"><header><h2>Synopsis</h2></header>
     <pre class="cmdsynopsis"><code class="command">flashmq</code> [<a href="#config-file">-c</a> | <a href="#config-file">--config-file</a> <code class="replaceable">config_file_path</code>] [<a href="#test-config">-t</a> | <a href="#test-config">--test-config</a>] |
      [<a href="#help">-h</a> | <a href="#help">--help</a>] |
      [<a href="#version">-v</a> | <a href="#version">--version</a>] |
diff --git a/man/flashmq.conf.5.html b/man/flashmq.conf.5.html
index 3580915..efe00ae 100644
--- a/man/flashmq.conf.5.html
+++ b/man/flashmq.conf.5.html
@@ -1,11 +1,45 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<html xmlns="http://www.w3.org/1999/xhtml" data-color-scheme="light" data-fallback-color-scheme="light" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>flashmq.conf (5) – FlashMQ configuration file format</title><style type="text/css" media="screen">
+        html[data-color-scheme=light] {
+          --bgcolor: #fff;
+          --pre-bgcolor: #ddd;
+          --pre-color: #000;
+          --main-color: #000;
+          --h1-color: #111;
+          --h2-color: #111;
+          --h3-color: #111;
+          --dt-color: #111;
+          --link-color: blue;
+          --vlink-color: purple;
+          --alink-color: red;
+          --hash-color: #aaa;
+          --hash-hover-color: #111;
+          --code-bgcolor: transparent;
+        }
+        html[data-color-scheme=dark] {
+          --bgcolor: #111;
+          --pre-bgcolor: #000;
+          --pre-color: lightgrey;
+          --main-color: lightgrey;
+          --h1-color: lightgrey;
+          --h2-color: lightgrey;
+          --h3-color: lightgrey;
+          --dt-color: lightgrey;
+          --link-color: lightblue;
+          --vlink-color: lightpink;
+          --alink-color: lightcoral;
+          --hash-color: grey;
+          --hash-hover-color: #fff;
+          --code-bgcolor: transparent;
+        }
         html {
           margin: 0;
           padding: 0;
           font-size: 18px;  /* Set rem */
           font-family: sans-serif;
+          background-color: var(--bgcolor);
+          color: var(--main-color);
         }
         body {
           padding: 1rem 2rem;
@@ -26,7 +60,7 @@
           line-height: 1.2em;
           font-size: 2rem;
           font-weight: bold;
-          color: #111;
+          color: var(--h1-color);
         }
         h1 code.manvolnum {
           font-size: 70%;
@@ -41,13 +75,13 @@
           line-height: 1.2em;
           font-size: .9rem;
           font-weight: 600;
-          color: #111;
+          color: var(--h2-color);
           text-transform: uppercase;
         }
         dt {
           margin-bottom: -.5rem;
           font-weight: bold;
-          color: #111;
+          color: var(--dt-color);
         }
         dt .replaceable {
           text-decoration: underline;
@@ -56,26 +90,125 @@
         dd {
           margin-bottom: 2em;
         }
+        a:link {
+          color: var(--link-color);
+        }
+        a:visited {
+          color: var(--vlink-color);
+        }
         a.hash-anchor {
           margin-left: .5em;
-          color: #aaa;
+          color: var(--hash-color);
           text-decoration: none;
           font-weight: normal;
         }
         a.hash-anchor:hover {
           text-decoration: underline;
-          color: #111;
+          color: var(--hash-hover-color);
         }
         code {
+          background-color: var(--code-bgcolor);
           font-family: monospace;
           font-weight: bold;
         }
         pre.monospaced, pre.cmdsynopsis {
-          background-color: #ddd;
-          font-family: monospace;
+          background-color: var(--pre-bgcolor);
           padding: 2em 2em;
+          color: var(--pre-color);
+          font-family: monospace;
+        }
+
+        .color-scheme-switch {
+          position: fixed;
+          top: 0;
+          right: 0;
+
+          input {
+            display: none;
+          }
+          label {
+            margin: 0;
+            box-sizing: border-box;
+            display: inline-block;
+            position: relative;
+            height: 32px;
+            width: 32px;
+            font-size: 20px;
+            padding: 6px;
+            line-height: 20px;
+            cursor: pointer;
+            text-align: center;
+          }
+          input[value=""] + label {
+            background-color: transparent;
+            color: var(--main-color);
+          }
+          input[value=light] + label {
+            background-color: white;
+            color: black;
+          }
+          input[value=dark] + label {
+            background-color: black;
+            color: white;
+          }
+          input:checked + label::before {
+            content: '';
+            position: absolute;
+            bottom: -6px;
+            left: 12px;
+            width: 6px;
+            height: 6px;
+            border: 2px solid black;
+            border-radius: 50%;
+            background-color: white;
+          }
+        }
+      </style></head><body><nav class="color-scheme-switch" hidden="true"><input type="radio" id="color-scheme-browser-default" checked name="color-scheme" value=""></input><label for="color-scheme-browser-default" title="Follow browser default">A</label><input type="radio" id="color-scheme-light" name="color-scheme" value="light"></input><label for="color-scheme-light" title="Change to light theme">☀</label><input type="radio" id="color-scheme-dark" name="color-scheme" value="dark"></input><label for="color-scheme-dark" title="Change to dark theme">⏾</label></nav><script>
+      function setColorScheme(colorScheme) {
+        if (!colorScheme) {
+          localStorage.removeItem('colorScheme');
+        }
+        else {
+          localStorage.setItem('colorScheme', colorScheme);
+        }
+
+        document.querySelector('html').dataset.colorScheme = getColorScheme();
+      }
+
+      function getColorScheme() {
+        const localValue = localStorage.getItem('colorScheme');
+        if (localValue !== null) {
+          return localValue;
+        }
+
+        console.log('A');
+
+        const browserValue = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (browserValue !== null) {
+          return browserValue;
         }
-      </style></head><body><article id="flashmq.conf.5"><header><h1>flashmq.conf<code class="manvolnum"> (5)</code></h1><h2 class="refpurpose">FlashMQ configuration file format</h2></header><section class="refsynopsisdiv" id="synopsis"><header><h2>Synopsis</h2></header>
+        console.log('B');
+
+        return document.querySelector('html').dataset.fallbackColorScheme;
+      }
+
+      document.querySelectorAll('.color-scheme-switch').forEach(el => {
+        el.hidden = false;
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+          document.querySelector('html').dataset.colorScheme = getColorScheme();
+        });
+
+        el.querySelectorAll('input').forEach(input => {
+          if (input.checked) {
+            setColorScheme(input.value);
+          }
+          input.addEventListener('change', (event) => {
+            setColorScheme(event.target.value);
+          });
+        });
+      });
+      </script><article id="flashmq.conf.5"><header><h1>flashmq.conf<code class="manvolnum"> (5)</code></h1><h2 class="refpurpose">FlashMQ configuration file format</h2></header><section class="refsynopsisdiv" id="synopsis"><header><h2>Synopsis</h2></header>
     <p>
        The <code class="filename">flashmq.conf</code> file is the configuration used for configuring the FlashMQ MQTT broker.
     </p>
