diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index d3b97cf..05c0635 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -15,6 +15,12 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 
 
 
+=== Removed
+
+* The theme button in favor of theming the website through the preferred system theme.
+
+
+
 
 == [2.2.0] - 2020-11-06
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 95d060b..155d9fd 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -19,12 +19,24 @@
     --border-style: var(--foreground) solid 1px;
 }
 
-[data-theme="dark"]:root {
-    --background: #000000;
-    --background-light: #363537;
-    --foreground: #FAFAFA;
-    --foreground-light: #CCCCCC;
-    --grey: #919191;
+@media (prefers-color-scheme: light) {
+    :root {
+        --background: #FAFAFA;
+        --background-light: #E1E1E1;
+        --foreground: #000000;
+        --foreground-light: #363537;
+        --grey: #454545;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #000000;
+        --background-light: #363537;
+        --foreground: #FAFAFA;
+        --foreground-light: #CCCCCC;
+        --grey: #919191;
+    }
 }
 
 :root {
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 5995924..e70496c 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -44,13 +44,3 @@ Which means the custom stylesheet should be the last to be concatenated.
     {{ template "_internal/google_analytics_async.html" . }}
     {{ template "_internal/disqus.html" . }}
 {{- end }}
-
-
-{{- /* Persistent theme.
-It's a very small script so there's little effect on perceived performance. */ -}}
-<script>
-    const theme = window.localStorage.getItem('theme'); 
-    if (theme) {
-        document.documentElement.dataset.theme = theme;
-    }
-</script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c94bb49..896d3bb 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -6,9 +6,4 @@
         <a href="{{ .URL | absLangURL }}">{{ .Name }}</a> |
         {{ end }}
     </div>
-    <button class="site__theme-btn" aria-label="theme-toggle" onclick="const theme = window.localStorage.getItem('theme') == 'dark' ? 'light' : 'dark'; window.localStorage.setItem('theme', theme); document.documentElement.dataset.theme = theme">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-            <path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm2 0c0-5.514 4.486-10 10-10v20c-5.514 0-10-4.486-10-10z"></path>
-        </svg>
-    </button>
 </nav>