diff --git a/index.html b/index.html
index ce23d40e..bfdbc837 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,7 +330,7 @@ <h3>Primary</h3>
             <p>Eye-catching gradient</p>
             <div id="demo-primary"></div>
           </div>
-          <div class="demo-item">
+          <div class="demo-item demo-item-light">
             <h3>Light Theme</h3>
             <p>Light backgrounds</p>
             <div id="demo-light"></div>
diff --git a/src/social-share-button.css b/src/social-share-button.css
index 0609839b..8d193a58 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 */
@@ -145,13 +149,62 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-
 /* 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..782b978c 100644
--- a/src/social-share-button.js
+++ b/src/social-share-button.js
@@ -100,9 +100,27 @@ class SocialShareButton {
     this.applyCustomColors();
   }
 
+  _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");
+      } else {
+        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}`;
+    }
+  }
+
   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 +134,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 +661,9 @@ 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
     if (this.modal) {
       const input = this.modal.querySelector(".social-share-link-input input");