diff --git a/documentation/themes/beastie/assets/js/theme-chooser.js b/documentation/themes/beastie/assets/js/theme-chooser.js
--- a/documentation/themes/beastie/assets/js/theme-chooser.js
+++ b/documentation/themes/beastie/assets/js/theme-chooser.js
@@ -41,9 +41,12 @@
   } else if (theme === "theme-high-contrast") {
     setTheme('theme-high-contrast');
     themeChooser.value = 'theme-high-contrast';
-  } else {
+  } else if (theme === "theme-light") {
     setTheme('theme-light');
     themeChooser.value = 'theme-light';
+  } else {
+    setTheme('theme-system');
+    themeChooser.value = 'theme-system';
   }
 
   themeChooser.addEventListener('change', function() {
@@ -53,13 +56,24 @@
       setTheme('theme-dark');
     } else if (theme === "theme-high-contrast") {
       setTheme('theme-high-contrast');
-    } else {
+    } else if (theme === "theme-light") {
       setTheme('theme-light');
+    } else {
+      setTheme('theme-system');
     }
   });
 
   function setTheme(themeName) {
     localStorage.setItem('theme', themeName);
-    document.documentElement.className = themeName;
+
+    if (themeName === 'theme-system') {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.className = 'theme-dark';
+      } else {
+        document.documentElement.className = 'theme-light';
+      }
+    } else {
+      document.documentElement.className = themeName;
+    }
   }
 })();
diff --git a/documentation/themes/beastie/i18n/bn-bd.toml b/documentation/themes/beastie/i18n/bn-bd.toml
--- a/documentation/themes/beastie/i18n/bn-bd.toml
+++ b/documentation/themes/beastie/i18n/bn-bd.toml
@@ -115,6 +115,8 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/da.toml b/documentation/themes/beastie/i18n/da.toml
--- a/documentation/themes/beastie/i18n/da.toml
+++ b/documentation/themes/beastie/i18n/da.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/de.toml b/documentation/themes/beastie/i18n/de.toml
--- a/documentation/themes/beastie/i18n/de.toml
+++ b/documentation/themes/beastie/i18n/de.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/el.toml b/documentation/themes/beastie/i18n/el.toml
--- a/documentation/themes/beastie/i18n/el.toml
+++ b/documentation/themes/beastie/i18n/el.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/en.toml b/documentation/themes/beastie/i18n/en.toml
--- a/documentation/themes/beastie/i18n/en.toml
+++ b/documentation/themes/beastie/i18n/en.toml
@@ -199,6 +199,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/es.toml b/documentation/themes/beastie/i18n/es.toml
--- a/documentation/themes/beastie/i18n/es.toml
+++ b/documentation/themes/beastie/i18n/es.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Claro"
 
diff --git a/documentation/themes/beastie/i18n/fr.toml b/documentation/themes/beastie/i18n/fr.toml
--- a/documentation/themes/beastie/i18n/fr.toml
+++ b/documentation/themes/beastie/i18n/fr.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Clair"
 
diff --git a/documentation/themes/beastie/i18n/hu.toml b/documentation/themes/beastie/i18n/hu.toml
--- a/documentation/themes/beastie/i18n/hu.toml
+++ b/documentation/themes/beastie/i18n/hu.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/it.toml b/documentation/themes/beastie/i18n/it.toml
--- a/documentation/themes/beastie/i18n/it.toml
+++ b/documentation/themes/beastie/i18n/it.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/ja.toml b/documentation/themes/beastie/i18n/ja.toml
--- a/documentation/themes/beastie/i18n/ja.toml
+++ b/documentation/themes/beastie/i18n/ja.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/ko.toml b/documentation/themes/beastie/i18n/ko.toml
--- a/documentation/themes/beastie/i18n/ko.toml
+++ b/documentation/themes/beastie/i18n/ko.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/mn.toml b/documentation/themes/beastie/i18n/mn.toml
--- a/documentation/themes/beastie/i18n/mn.toml
+++ b/documentation/themes/beastie/i18n/mn.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/nl.toml b/documentation/themes/beastie/i18n/nl.toml
--- a/documentation/themes/beastie/i18n/nl.toml
+++ b/documentation/themes/beastie/i18n/nl.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/pl.toml b/documentation/themes/beastie/i18n/pl.toml
--- a/documentation/themes/beastie/i18n/pl.toml
+++ b/documentation/themes/beastie/i18n/pl.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/pt-br.toml b/documentation/themes/beastie/i18n/pt-br.toml
--- a/documentation/themes/beastie/i18n/pt-br.toml
+++ b/documentation/themes/beastie/i18n/pt-br.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/ru.toml b/documentation/themes/beastie/i18n/ru.toml
--- a/documentation/themes/beastie/i18n/ru.toml
+++ b/documentation/themes/beastie/i18n/ru.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/tr.toml b/documentation/themes/beastie/i18n/tr.toml
--- a/documentation/themes/beastie/i18n/tr.toml
+++ b/documentation/themes/beastie/i18n/tr.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/zh-cn.toml b/documentation/themes/beastie/i18n/zh-cn.toml
--- a/documentation/themes/beastie/i18n/zh-cn.toml
+++ b/documentation/themes/beastie/i18n/zh-cn.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "Light"
 
diff --git a/documentation/themes/beastie/i18n/zh-tw.toml b/documentation/themes/beastie/i18n/zh-tw.toml
--- a/documentation/themes/beastie/i18n/zh-tw.toml
+++ b/documentation/themes/beastie/i18n/zh-tw.toml
@@ -115,6 +115,9 @@
 # ---------------------------------------------------
 # Footer
 # ---------------------------------------------------
+[system]
+other = "System"
+
 [light]
 other = "淺色"
 
diff --git a/documentation/themes/beastie/layouts/partials/site-footer.html b/documentation/themes/beastie/layouts/partials/site-footer.html
--- a/documentation/themes/beastie/layouts/partials/site-footer.html
+++ b/documentation/themes/beastie/layouts/partials/site-footer.html
@@ -17,6 +17,7 @@
           {{ end }}
           <div class="theme-container">
             <select id="theme-chooser">
+	      <option value="theme-system">{{ i18n "system" }}</option>
               <option value="theme-light">{{ i18n "light" }}</option>
               <option value="theme-dark">{{ i18n "dark" }}</option>
               <option value="theme-high-contrast">{{ i18n "high-contrast" }}</option>
diff --git a/documentation/themes/beastie/layouts/partials/site-head.html b/documentation/themes/beastie/layouts/partials/site-head.html
--- a/documentation/themes/beastie/layouts/partials/site-head.html
+++ b/documentation/themes/beastie/layouts/partials/site-head.html
@@ -9,7 +9,7 @@
   <title>{{ with .Params.Title }}{{ . }} | {{ end }} {{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
 
   <meta name="theme-color" content="#790000">
-  <meta name="color-scheme" content="light dark high-contrast">
+  <meta name="color-scheme" content="system light dark high-contrast">
 
   {{ if $.Site.Params.isOnline }}
     <link rel="shortcut icon" href="{{ absLangURL ($.Site.BaseURL) }}favicon.ico">