Merge branch 'main' of https://gitea.local.thethomaas.net/TheThomaas/11ty-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
+{% if site.theme == "auto" %}
-  class="theme-toggle"
+  <button
-  type="button"
+    class="theme-toggle"
-  title="{{Term.Site.ToggleTheme}}"
+    type="button"
-  aria-label="{{Term.Site.ToggleTheme}}"
+    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"
   >
-    <clipPath id="theme-toggle__around__cutout">
+    <svg
-      <path d="M0 0h42v30a1 1 0 00-16 13H0Z" />
+      xmlns="http://www.w3.org/2000/svg"
-    </clipPath>
+      aria-hidden="true"
-    <g clip-path="url(#theme-toggle__around__cutout)">
+      width="1em"
-      <circle cx="16" cy="16" r="8.4" />
+      height="1em"
-      <g>
+      fill="currentColor"
-        <circle cx="16" cy="3.3" r="2.3" />
+      class="theme-toggle__around"
-        <circle cx="27" cy="9.7" r="2.3" />
+      viewBox="0 0 32 32"
-        <circle cx="27" cy="22.3" r="2.3" />
+    >
-        <circle cx="16" cy="28.7" r="2.3" />
+      <clipPath id="theme-toggle__around__cutout">
-        <circle cx="5" cy="22.3" r="2.3" />
+        <path d="M0 0h42v30a1 1 0 00-16 13H0Z" />
-        <circle cx="5" cy="9.7" r="2.3" />
+      </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>
-  </svg>
+  </button>
-</button>
+{% endif %}