Add Dark Mode Guide for Vite with React

[CarlosZiegler]

This PR adds a guide for implementing dark mode in a Vite project with React. The guide includes the following steps:

1. Creating a theme provider using React's Context API.
2. Wrapping the root layout with the ThemeProvider.
3. Adding a mode toggle to switch between light and dark mode.

The guide is intended to be clear and easy to follow, allowing developers to implement dark mode in their Vite and React projects effectively.

Please review and let me know if any changes are required.

PS: Added a GIF but I am not so familiar to put it into MDX when work on github CODESPACES :(

[changeset-bot]

⚠️ No Changeset found

Latest commit: 509fcb6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel]

@CarlosZiegler is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[dan5py]

Please keep the same layout with the Tabs as the vite-docs (check this PR #714). Also remove the ThemeVite.gif and the package-lock.json.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 3, 2023 3:10pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-template	⬜️ Ignored (Inspect)			Aug 3, 2023 3:10pm

[CarlosZiegler]

@dan5py updated.

[dan5py]

Could you please remove the titles from the tabs content?

[CarlosZiegler]

@dan5py updated

[NikharPandya]

@dan5py and @CarlosZiegler , rather than this being on the installation page what if we make the dark mode page similar to instalation page and show tabs for next.js remix and vite dark mode configuration ?

[dan5py]

@NikharPandya I was thinking the same thing.

[NikharPandya]

@dan5py I could help to implement that.

[NikharPandya]

@dan5py #814 Resolves this pr with a new grid layout (similar to the installation page), we could close this.

[ap-1]

@dan5py and @CarlosZiegler , rather than this being on the installation page what if we make the dark mode page similar to instalation page and show tabs for next.js remix and vite dark mode configuration ?

Is there a PR open for this? I recommend using the existing next-themes package for the next.js configuration

[raghavjindalll]

Can we implement the dark mode using react and javascript?

[CarlosZiegler]

Can we implement the dark mode using react and javascript?

Here the docs :
https://ui.shadcn.com/docs/dark-mode/vite