Add lightmode for accessibility

[GreenMan36]

Personally, I'm not a fan of lightmode. I am however, a fan of accessibility, and I know a few people with contrast loss or partial blindness.

Lightmode is an accessibility option for those so I've implemented that. This paves the way for other improvements in the future.

Some notes:

• The background isn't pure white to reduce eye strain.
• We perceive brightness exponentially, not linearly, thus the colors account for that.

[netlify]

✅ Deploy Preview for quicksnip ready!

Name	Link
🔨 Latest commit	5f7d833
🔍 Latest deploy log	https://app.netlify.com/sites/quicksnip/deploys/6772a44df8bdaf0008b4a6e7
😎 Deploy Preview	https://deploy-preview-31--quicksnip.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[GreenMan36]

Additional note: I was also looking into theming the code preview, but I think that would work best with a second setting. As some might still prefer to have their code in dark or lightmode regardless of the site theme. Maybe we could add another toggle similar to the clipboard button?

[technoph1le]

@GreenMan36 Adding light mode is a great idea. Later on, we can play around with the colors for the better contrast and accessibility. I am thinking to refactor the custom properties for the specific elements instead of general --neutral colors.

Side Note: Initial design of this project was in light mode. Since developers hate light mode, I had switched to dark mode. 😅

[GreenMan36]

I actually just got the theming for the code preview, I just can't figure out how the hover color is done.