Theme Support

[zachstence]

Description

Adds support for a dark theme, and customization of light/dark themes

Does not include any work to replace hardcoded colors (e.g. text-green-500) with semantic color tokens (e.g. text-success).

2024-09-17.14-07-19.mov

Checklist

• For UI or styling changes, I have added a screenshot or gif showing before & after
• I have added a changeset
• I have added to the docs where applicable
• I have added to the VS Code extension where applicable

[changeset-bot]

🦋 Changeset detected

Latest commit: 743db1e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@evidence-dev/tailwind	Patch
@evidence-dev/sdk	Patch
@evidence-dev/core-components	Patch
my-evidence-project	Patch
@evidence-dev/evidence	Patch
@evidence-dev/components	Patch
evidence-test-environment	Patch
@evidence-dev/component-utilities	Patch
e2e-spa	Patch
e2e-themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 19, 2024 3:27pm
next-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 19, 2024 3:27pm

[netlify]

✅ Deploy Preview for evidence-test-env ready!

Name	Link
🔨 Latest commit	743db1e
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-test-env/deploys/66ec40d20aaf57000876f70c
😎 Deploy Preview	https://deploy-preview-2520--evidence-test-env.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.

[netlify]

✅ Deploy Preview for next-docs-evidence ready!

Name	Link
🔨 Latest commit	743db1e
🔍 Latest deploy log	https://app.netlify.com/sites/next-docs-evidence/deploys/66ec40d25ef8c20008f44faa
😎 Deploy Preview	https://deploy-preview-2520--next-docs-evidence.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.

[netlify]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	743db1e
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/66ec40d2b4bcd80007f8c4f7
😎 Deploy Preview	https://deploy-preview-2520--evidence-development-workspace.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.

[archiewood]

add Sparkles for system?

[archiewood]

works with both system wide and browser-level dark / light / system toggles 👍🏼

CleanShot.2024-09-17.at.21.30.19.mp4

Something about this seems like the text in the two labels "Appearance System" seems misaligned. I think the "System" either needs to be exactly the same text size, or else a size down from current

[ItsMeBrianD]

This looks good me. Do we need tests for any of this?

[zachstence]

This looks good me. Do we need tests for any of this?

I created e2e/themes which tests the whole flow. I feel there isn't much logic to unit test, I think the E2E test covers it pretty well

[ItsMeBrianD]