Optimize light mode trigger button and modal contrast

[PrithvijitBose]

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Summary by CodeRabbit

• New Features

  • Added a complete light theme for the social sharing button and modal.
  • Light-themed controls now include improved contrast, borders, shadows, hover states, labels, inputs, and copy actions.
  • Theme styling stays synchronized when settings change, with dark mode used by default when no theme is specified.

• Style

  • Updated the light-theme demo card with a white background, dark text, and gray description text.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 476055ff-0cc9-4013-8348-e45bbef63344

📥 Commits

Reviewing files that changed from the base of the PR and between 69f3d2a and c35c9e7.

📒 Files selected for processing (3)

• index.html
• src/social-share-button.css
• src/social-share-button.js

💤 Files with no reviewable changes (1)

• src/social-share-button.css

---

Walkthrough

The light theme now synchronizes button and modal classes during creation and option updates. CSS defines light-theme styling for controls and modal elements. The demo card uses a white background and dark text.

Changes

Light theme support

Layer / File(s)	Summary
Runtime theme synchronization src/social-share-button.js	_applyThemeClasses() updates button and modal theme classes. Button creation adds the light class. Modal creation defaults to the dark theme. Option updates reapply theme classes.
Light theme visual styling src/social-share-button.css, index.html	Light button and modal styles define contrast, borders, shadows, states, and surfaces. The demo card uses white and dark styling.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested labels: Typescript Lang

Suggested reviewers: kpj2006, amankv1234

Poem

A rabbit checks the colors bright,
Buttons and modals now match light.
White cards rest with shadows mild,
Dark text guides each demo child.
Hop, hop—the theme is right!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change to light-mode trigger button and modal contrast.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@index.html`:
- Around line 320-322: Move the light theme presentation from the inline styles
on the “Light Theme” demo item into a reusable class in the demo stylesheet,
then apply that class to the relevant container and heading/paragraph elements.
Remove the inline style attributes while preserving the existing colors and
visual appearance.

In `@src/social-share-button.js`:
- Around line 103-116: Update the _applyThemeClasses() method with concise
inline comments documenting the button theme-class toggle and the modal
class-list replacement that preserves the active state; also document the
updateOptions() call that reapplies theme classes after merging options, without
changing behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 3f4fb292-ab5b-4bdc-9721-c61b7433352c

📥 Commits

Reviewing files that changed from the base of the PR and between 4715415 and 69f3d2a.

📒 Files selected for processing (3)

• index.html
• src/social-share-button.css
• src/social-share-button.js

[PrithvijitBose]

🛠️ Coderabbit Update Summary

1. Refactored Demo Item Styles (index.html): Extracted inline Light Theme styles into a reusable .demo-item-light CSS class in the demo stylesheet, removing inline style attributes while preserving exact colors and appearance.
2. Added Inline Documentation (src/social-share-button.js): Added concise comments to _applyThemeClasses() and updateOptions() documenting the button class toggling, active-state preservation, and option-refresh logic.

[PrithvijitBose]

@CodeRabbit Complete the Vue CDN lifecycle guidance.

The CDN section tells the model to instantiate window.SocialShareButton in onMounted, but it omits Vue lifecycle handling. Add cleanup in onUnmounted and guard initialization when window.SocialShareButton is not available...explain and whats fixed

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '== Candidate documentation files =='
fd -t f -i 'readme|guide|docs|documentation' . \
  -E node_modules -E dist -E build || true

printf '%s\n' '== Vue CDN references =='
rg -n -i -C 4 'vue|cdn|window\.SocialShareButton|onMounted|onUnmounted' \
  -g '!node_modules/**' -g '!dist/**' -g '!build/**' .

printf '%s\n' '== SocialShareButton lifecycle methods =='
ast-grep outline src/social-share-button.js --items all --view expanded 2>/dev/null || true
rg -n -C 3 '\b(destroy|dispose|remove|unmount)\s*\(' src/social-share-button.js

Length of output: 201110

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '== Text files that contain Vue CDN lifecycle guidance =='
rg -n -i -l \
  -g '!*.svg' -g '!*.png' -g '!*.jpg' -g '!*.jpeg' -g '!*.gif' \
  -g '!node_modules/**' -g '!dist/**' -g '!build/**' \
  'window\.SocialShareButton|onMounted|Vue.*CDN|CDN.*Vue' .

printf '%s\n' '== Context for the Vue CDN example =='
rg -n -i -C 12 \
  -g '!*.svg' -g '!*.png' -g '!*.jpg' -g '!*.jpeg' -g '!*.gif' \
  -g '!node_modules/**' -g '!dist/**' -g '!build/**' \
  'window\.SocialShareButton|onMounted|Vue.*CDN|CDN.*Vue' .

printf '%s\n' '== SocialShareButton.destroy() =='
sed -n '560,650p' src/social-share-button.js

Length of output: 22503

---

@PrithvijitBose I confirmed the required cleanup API. The Vue CDN guidance should use SocialShareButton.destroy() in onUnmounted.

What the update fixes

• It initializes only after Vue mounts the container.
• It checks containerRef.value before initialization.
• It checks window.SocialShareButton before calling the constructor.
• It prevents a runtime error when the CDN script is unavailable.
• It retains the created instance for cleanup.
• It calls destroy() when Vue unmounts the component.
• destroy() removes the button and modal, event listeners, pending timeouts, and the instance-owned body scroll lock.
• It clears the retained instance reference after cleanup.

_{You are interacting with an AI system.}