From 69f3d2ac9459215218604053b9044af478ad11fe Mon Sep 17 00:00:00 2001
From: PrithvijitBose <prithvijit@example.com>
Date: Tue, 4 Aug 2026 13:21:05 +0530
Subject: [PATCH 1/3] fix(theme): optimize light mode trigger button and modal
 contrast

---
 index.html                  |  6 +--
 src/social-share-button.css | 76 ++++++++++++++++++++++++++++++++-----
 src/social-share-button.js  | 24 +++++++++++-
 3 files changed, 92 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index ce23d40e..8ce3d171 100644
--- a/index.html
+++ b/index.html
@@ -317,9 +317,9 @@ <h3>Primary</h3>
             <p>Eye-catching gradient</p>
             <div id="demo-primary"></div>
           </div>
-          <div class="demo-item">
-            <h3>Light Theme</h3>
-            <p>Light backgrounds</p>
+          <div class="demo-item" style="background: #ffffff; color: #1a1a1a">
+            <h3 style="color: #111827">Light Theme</h3>
+            <p style="color: #4b5563">Optimized for light backgrounds</p>
             <div id="demo-light"></div>
           </div>
           <div class="demo-item">
diff --git a/src/social-share-button.css b/src/social-share-button.css
index 0609839b..f55c720c 100644
--- a/src/social-share-button.css
+++ b/src/social-share-button.css
@@ -61,16 +61,20 @@
   background: linear-gradient(135deg, #7c8ff0 0%, #8a5bb5 100%);
 }
 
-/* Light: Clean white style for dark backgrounds */
-.social-share-btn.light {
-  background: #fff;
-  color: #333;
-  border-color: #ddd;
+/* Light: Clean high-contrast style for light backgrounds */
+.social-share-btn.light,
+.social-share-btn.theme-light {
+  background: #ffffff;
+  color: #1a1a1a;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 
-.social-share-btn.light:hover {
-  background: #f5f5f5;
-  border-color: #ccc;
+.social-share-btn.light:hover,
+.social-share-btn.theme-light:hover {
+  background: #f3f4f6;
+  border-color: rgba(0, 0, 0, 0.35);
+  color: #111827;
 }
 
 /* Compact: Smaller padding and font for tight spaces */
@@ -146,12 +150,66 @@
   border-bottom-right-radius: 0;
 }
 
+/* -----------------------------------------------------------------------------
+   THEMES: LIGHT, GLASSMORPHISM, CYBERPUNK, DRACULA, NORD
+   ----------------------------------------------------------------------------- */
+
 /* Light Theme */
+.social-share-modal-overlay.light {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
 .social-share-modal-overlay.light .social-share-modal-content {
   background: #ffffff;
-  color: #333;
+  color: #1a1a1a;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+}
+
+.social-share-modal-overlay.light .social-share-modal-header {
+  border-bottom-color: #e5e7eb;
+}
+
+.social-share-modal-overlay.light .social-share-modal-header h3 {
+  color: #111827;
+}
+
+.social-share-modal-overlay.light .social-share-modal-close {
+  color: #4b5563;
+}
+
+.social-share-modal-overlay.light .social-share-modal-close:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.social-share-modal-overlay.light .social-share-platform-btn span {
+  color: #374151;
+}
+
+.social-share-modal-overlay.light .social-share-link-container {
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+}
+
+.social-share-modal-overlay.light .social-share-link-input {
+  background: #ffffff;
+  border-color: #d1d5db;
 }
 
+.social-share-modal-overlay.light .social-share-link-input input {
+  color: #2563eb;
+}
+
+.social-share-modal-overlay.light .social-share-copy-btn {
+  background: #2563eb;
+  color: #ffffff;
+}
+
+.social-share-modal-overlay.light .social-share-copy-btn:hover {
+  background: #1d4ed8;
+}
+
+
 /* -----------------------------------------------------------------------------
    MODAL HEADER
    ----------------------------------------------------------------------------- */
diff --git a/src/social-share-button.js b/src/social-share-button.js
index 2dd6dd57..f4fd4cb5 100644
--- a/src/social-share-button.js
+++ b/src/social-share-button.js
@@ -100,9 +100,25 @@ class SocialShareButton {
     this.applyCustomColors();
   }
 
+  _applyThemeClasses() {
+    const theme = this.options.theme || "dark";
+    if (this.button) {
+      if (theme === "light") {
+        this.button.classList.add("theme-light");
+      } else {
+        this.button.classList.remove("theme-light");
+      }
+    }
+    if (this.modal) {
+      const activeState = this.modal.classList.contains("active") ? " active" : "";
+      this.modal.className = `social-share-modal-overlay ${theme}${activeState}`;
+    }
+  }
+
   createButton() {
     const button = document.createElement("button");
-    button.className = `social-share-btn ${this.options.buttonStyle} ${this.options.customClass}`;
+    const themeClass = this.options.theme === "light" ? "theme-light" : "";
+    button.className = `social-share-btn ${this.options.buttonStyle} ${this.options.customClass} ${themeClass}`.trim();
     button.setAttribute("aria-label", "Share");
     button.innerHTML = `
       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="share-icon">
@@ -116,9 +132,11 @@ class SocialShareButton {
       this._containerEl.appendChild(button);
     }
   }
+
   createModal() {
     const modal = document.createElement("div");
-    modal.className = `social-share-modal-overlay ${this.options.theme}`;
+    const themeClass = this.options.theme || "dark";
+    modal.className = `social-share-modal-overlay ${themeClass}`;
     modal.style.display = "none";
     modal.innerHTML = `
       <div class="social-share-modal-content ${this.options.modalPosition}">
@@ -641,6 +659,8 @@ class SocialShareButton {
 
     this.options = { ...this.options, ...options };
 
+    this._applyThemeClasses();
+
     // Update URL in modal if it exists
     if (this.modal) {
       const input = this.modal.querySelector(".social-share-link-input input");

From 8d4b87d14c99578a53b74b5df30b82f65935a54b Mon Sep 17 00:00:00 2001
From: PrithvijitBose <prithvijit@example.com>
Date: Tue, 4 Aug 2026 13:37:53 +0530
Subject: [PATCH 2/3] docs(core,demo): extract demo-item-light CSS class and
 add theme helper comments

---
 index.html                 | 19 ++++++++++++++++---
 src/social-share-button.js |  3 +++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 8ce3d171..5536d6f7 100644
--- a/index.html
+++ b/index.html
@@ -127,6 +127,19 @@
         color: rgba(255, 255, 255, 0.8);
       }
 
+      .demo-item-light {
+        background: #ffffff;
+        color: #1a1a1a;
+      }
+
+      .demo-item-light h3 {
+        color: #111827;
+      }
+
+      .demo-item-light p {
+        color: #4b5563;
+      }
+
       .feature-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -317,9 +330,9 @@ <h3>Primary</h3>
             <p>Eye-catching gradient</p>
             <div id="demo-primary"></div>
           </div>
-          <div class="demo-item" style="background: #ffffff; color: #1a1a1a">
-            <h3 style="color: #111827">Light Theme</h3>
-            <p style="color: #4b5563">Optimized for light backgrounds</p>
+          <div class="demo-item demo-item-light">
+            <h3>Light Theme</h3>
+            <p>Optimized for light backgrounds</p>
             <div id="demo-light"></div>
           </div>
           <div class="demo-item">
diff --git a/src/social-share-button.js b/src/social-share-button.js
index f4fd4cb5..782b978c 100644
--- a/src/social-share-button.js
+++ b/src/social-share-button.js
@@ -102,6 +102,7 @@ class SocialShareButton {
 
   _applyThemeClasses() {
     const theme = this.options.theme || "dark";
+    // Toggle light theme class on trigger button
     if (this.button) {
       if (theme === "light") {
         this.button.classList.add("theme-light");
@@ -109,6 +110,7 @@ class SocialShareButton {
         this.button.classList.remove("theme-light");
       }
     }
+    // Replace modal overlay theme classes while preserving active visibility state
     if (this.modal) {
       const activeState = this.modal.classList.contains("active") ? " active" : "";
       this.modal.className = `social-share-modal-overlay ${theme}${activeState}`;
@@ -659,6 +661,7 @@ class SocialShareButton {
 
     this.options = { ...this.options, ...options };
 
+    // Reapply theme classes to button and modal after merging updated options
     this._applyThemeClasses();
 
     // Update URL in modal if it exists

From c35c9e7204dd2b412b3065d23ac3fa9aa92bc458 Mon Sep 17 00:00:00 2001
From: PrithvijitBose <prithvijit@example.com>
Date: Thu, 6 Aug 2026 13:10:08 +0530
Subject: [PATCH 3/3] changed things

---
 index.html                  | 2 +-
 src/social-share-button.css | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 5536d6f7..bfdbc837 100644
--- a/index.html
+++ b/index.html
@@ -332,7 +332,7 @@ <h3>Primary</h3>
           </div>
           <div class="demo-item demo-item-light">
             <h3>Light Theme</h3>
-            <p>Optimized for light backgrounds</p>
+            <p>Light backgrounds</p>
             <div id="demo-light"></div>
           </div>
           <div class="demo-item">
diff --git a/src/social-share-button.css b/src/social-share-button.css
index f55c720c..8d193a58 100644
--- a/src/social-share-button.css
+++ b/src/social-share-button.css
@@ -149,11 +149,6 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-
-/* -----------------------------------------------------------------------------
-   THEMES: LIGHT, GLASSMORPHISM, CYBERPUNK, DRACULA, NORD
-   ----------------------------------------------------------------------------- */
-
 /* Light Theme */
 .social-share-modal-overlay.light {
   background-color: rgba(0, 0, 0, 0.6);