1 files changed, 66 insertions, 0 deletions
diff --git a/htmx/static/pico-1.5.11/docs/src/themes.html b/htmx/static/pico-1.5.11/docs/src/themes.html
new file mode 100644
index 0000000..1f6cb99
--- /dev/null
+++ b/htmx/static/pico-1.5.11/docs/src/themes.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    ${require('./_head.html') 
+      title=`Themes` 
+      description=`Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark').`
+      canonical=`themes.html`
+    }
+  </head>
+
+  <body>
+    ${require('./_nav.html')}
+    
+    <main class="container" id="docs">
+      ${require('./_sidebar.html') active=`themes-link`}
+      
+      <div role="document">
+        <section id="themes">
+          <hgroup>
+            <h1>Themes</h1>
+            <h2>Pico is shipped with 2 consistent themes: Light & Dark.</h2>
+          </hgroup>
+          <p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
+          <article aria-label="Theme switcher">
+            <button class="contrast theme-switcher">…</button>
+          </article>
+          <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
+          <article data-theme="light" aria-label="Forced light theme example">
+            <h3>Light theme</h3>
+            <form class="grid">
+              <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
+              <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
+              <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
+            </form>
+            <footer class="code">
+
+<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
+  …
+&lt;/<b>article</b>&gt;</code></pre>
+
+            </footer>
+          </article>
+          <article data-theme="dark" aria-label="Forced dark theme example">
+            <h3>Dark theme</h3>
+            <form class="grid">
+              <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
+              <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
+              <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
+            </form>
+            <footer class="code">
+
+<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
+  …
+&lt;/<b>article</b>&gt;</code></pre>
+
+            </footer>
+          </article>
+        </section>
+
+        ${require('./_footer.html')}
+
+      </div>
+    </main>
+    <script src="js/commons.min.js"></script>
+  </body>
+</html>