feat: add border to switch styles

[lukewarlow]

Dark Before:

Dark After:

Light Before:

Light After:

This is added to improve the contrast. It's still not great but a follow-up can change the actual border colour when in prefers-contrast: more, with this change that's at least some contrast.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 1, 2026 9:55pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 1, 2026 9:55pm
npmx-lunaria	Ignored		Feb 1, 2026 9:55pm

[garthdw]

Should active take into account accent color for border?

[trueberryless]

I personally do not 100% agree with the design of the toggles with those outlines. Another idea to increase the contrast could be to change the background color of a inactive toggle to something lighter (in dark mode) and respectively darker (in light mode). IMO we should keep the little shadow, it creates a nice little effect. But that's just my humble opinion. Great catch! 🙌

[lukewarlow]

Should active take into account accent color for border?

Good catch this should probably changed so that its border-transparent when checked.

[lukewarlow]

Now the border is transparent when checked but shows when it's not. I suspect this was the intent of the original code.

[lukewarlow]

IMO we should keep the little shadow, it creates a nice little effect. But that's just my humble opinion. Great catch!

I don't feel too strongly about this, I think it can look weird to have the border and shadow, but like above I've changed this so it's shadowed only when checked. I think that gives the best overall look.