Add selector for site theme

src/_data/site.js

@@ -12,6 +12,7 @@ module.exports = {
   title: "SuperMinimalCSS",
   description: "Superminimal Superminimal",
   lang: "fr",
+  theme: "auto", // "light", "dark" or "auto"
   feed: "feed.xml",
   url: "http://localhost:8080"
 }

src/_includes/partials/metas.html

@@ -53,9 +53,12 @@
 <link rel="icon" href="/images/meta/favicon.ico" sizes="any">
 <link rel="icon" href="/images/meta/favicon.svg" type="image/svg+xml">
 
+{% if site.theme == "auto" %}
 <meta name="color-scheme" content="light dark">
-
 <script>{% include "js/theme-toggle.js" %}</script>
+{% else %}
+<meta name="color-scheme" content={{site.theme}}>
+{% endif %}
 
 <style>
   {% fetch "https://cdn.jsdelivr.net/npm/theme-toggles@4.10.1/css/around.min.css", "css" %}

src/_includes/partials/theme-toggle.html

@@ -1,31 +1,33 @@
-<button
-  class="theme-toggle"
-  type="button"
-  title="{{Term.Site.ToggleTheme}}"
-  aria-label="{{Term.Site.ToggleTheme}}"
->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    width="1em"
-    height="1em"
-    fill="currentColor"
-    class="theme-toggle__around"
-    viewBox="0 0 32 32"
+{% if site.theme == "auto" %}
+  <button
+    class="theme-toggle"
+    type="button"
+    title="{{Term.Site.ToggleTheme}}"
+    aria-label="{{Term.Site.ToggleTheme}}"
   >
-    <clipPath id="theme-toggle__around__cutout">
-      <path d="M0 0h42v30a1 1 0 00-16 13H0Z" />
-    </clipPath>
-    <g clip-path="url(#theme-toggle__around__cutout)">
-      <circle cx="16" cy="16" r="8.4" />
-      <g>
-        <circle cx="16" cy="3.3" r="2.3" />
-        <circle cx="27" cy="9.7" r="2.3" />
-        <circle cx="27" cy="22.3" r="2.3" />
-        <circle cx="16" cy="28.7" r="2.3" />
-        <circle cx="5" cy="22.3" r="2.3" />
-        <circle cx="5" cy="9.7" r="2.3" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      class="theme-toggle__around"
+      viewBox="0 0 32 32"
+    >
+      <clipPath id="theme-toggle__around__cutout">
+        <path d="M0 0h42v30a1 1 0 00-16 13H0Z" />
+      </clipPath>
+      <g clip-path="url(#theme-toggle__around__cutout)">
+        <circle cx="16" cy="16" r="8.4" />
+        <g>
+          <circle cx="16" cy="3.3" r="2.3" />
+          <circle cx="27" cy="9.7" r="2.3" />
+          <circle cx="27" cy="22.3" r="2.3" />
+          <circle cx="16" cy="28.7" r="2.3" />
+          <circle cx="5" cy="22.3" r="2.3" />
+          <circle cx="5" cy="9.7" r="2.3" />
+        </g>
       </g>
-    </g>
-  </svg>
-</button>
+    </svg>
+  </button>
+{% endif %}