Remove theme button in favor of system themes

The support for preferred color schemes is widespread nowadays. It is
also to make this theme more different to More Contentful theme.

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
 

assets/css/main.css

@@ -19,13 +19,25 @@
     --border-style: var(--foreground) solid 1px;
 }
 
-[data-theme="dark"]:root {
+@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 {
     font-family: var(--body-family);

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>

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>