From 0d5c95230e0b40e79759dd54d079456590f6ac11 Mon Sep 17 00:00:00 2001
From: Geoff Doty <n2geoff@gmail.com>
Date: Sat, 22 Mar 2025 17:31:00 -0400
Subject: [PATCH] theme-toggle component for example

---
 examples/overview.html         |  8 +++++---
 src/components/theme-toggle.js | 35 ++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/components/theme-toggle.js
diff --git a/examples/overview.html b/examples/overview.html
index 0880f82..cc94a71 100644
--- a/examples/overview.html
+++ b/examples/overview.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="">
+<html lang="en" data-theme="light">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,6 +7,7 @@
     <title>Stylelite</title>
     <link rel="stylesheet" href="../src/main.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
+    <script src="../src/components/theme-toggle.js"></script>
     <style>
         .fill {height: 100%; width: 100%}
         .grid-center {align-self: center; justify-self: center;}
@@ -30,6 +31,7 @@
                     <li><a href="#components">Components</a></li>
                     <li><a href="#utilities">Utilities</a></li>
                     <li><a href="#customize">Customize</a></li>
+                    <li><theme-toggle /></li>
                 </ul>
             </nav>
             <p>
@@ -110,7 +112,7 @@
                 <div>
                     <code>IMG</code>
                 </div>
-                <img src='http://via.placeholder.com/340x280' alt='Example image'>
+                <img src='https://placehold.co/340x280' alt='Example image'>
             </div>
         </section>
         <section>
@@ -158,7 +160,7 @@
                     <div class="group">
                         <input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
                         <label class="addon">
-                            <i class="ft-mail" style="color: #000"></i>
+                            <i class="ft-mail"></i>
                         </label>
                     </div>
                 </div>
diff --git a/src/components/theme-toggle.js b/src/components/theme-toggle.js
new file mode 100644
index 0000000..db60f0d
--- /dev/null
+++ b/src/components/theme-toggle.js
@@ -0,0 +1,35 @@
+class ThemeToggle extends HTMLElement {
+    constructor() {
+        super();
+        // this.attachShadow({ mode: 'open' });
+        this.isLight = true;
+    }
+
+    connectedCallback() {
+        this.render();
+        this.addEventListener('click', this.toggleTheme.bind(this));
+    }
+
+    toggleTheme() {
+        this.isLight = !this.isLight;
+        document.documentElement.setAttribute('data-theme', this.isLight ? 'light' : 'dark');
+        this.render();
+    }
+
+    render() {
+        this.innerHTML = `
+            <style>
+                :host {
+                    cursor: pointer;
+                    display: inline-block;
+                }
+            </style>
+            ${this.isLight
+                ? '<i class="ft-sun"></i>'
+                : '<i class="ft-moon"></i>'
+            }
+        `;
+    }
+}
+
+customElements.define('theme-toggle', ThemeToggle);
\ No newline at end of file
