fix: dark theme support

epoll31 commented 1 month ago

Description

I added in dark theme support to the site :)

Related Issue

Fixes #175

Proposed Changes

cleaned up src/app/providers.tsx by removing the ThemeWatcher component
- this stopped dark theme from being applied
added ThemeToggle back into src/components/Header.tsx
added a new Card component to ui-group that is used in all ui-groups and GradientCards
- this same format is used for all of the cards around the site so I grouped it so that I only had to add the dark-theme support for all cards in one place
i also modified many of the showcase items to add dark theme support
- primarily changes container items (headers, features, footers, tabs, etc) where white background and black borders are set directly
- most component items (buttons, toggles, text, etc) were left alone because they are not generally themed items
- i changed SkewedInfiniteScroll and ImageFade to use maskImage which fades to transparency instead of span gradients which fade to white

Checklist

Please check the boxes that apply:

[x] I have rebased my branch on top of the latest main branch.
[x] I have tested the changes locally
[x] I ran npm run build and build is successful
[x] I have added necessary documentation (if applicable)
[x] I have updated the credits.md file (if applicable)

Additional Notes

The typography.ts file has a lot of say over how things are styled when in dark theme (specifically the --tw-prose-invert-... section). We should decide what we would like to use this for.

vercel[bot] commented 1 month ago

@epoll31 is attempting to deploy a commit to the SyntaxUI Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 1 month ago

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

Name	Status	Preview	Comments	Updated (UTC)
syntax-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 6:04am

Ansub commented 1 month ago

is this a mirage or toggles appears to be broken in dark mode

https://github.com/SyntaxUI/syntaxui/assets/12985873/9c23ae80-b571-4644-a45f-3f3c4c12023a

epoll31 commented 1 month ago

is this a mirage or toggles appears to be broken in dark mode

To me, the only one the looks broken is the neobrutalism one since the border and backdrop are so dark.

I was refraining from making dramatic styling updates to specific components so i didn't change that.

What do you think we should do?

Ansub commented 1 month ago

is this a mirage or toggles appears to be broken in dark mode

To me, the only one the looks broken is the neobrutalism one since the border and backdrop are so dark.

I was refraining from making dramatic styling updates to specific components so i didn't change that.

What do you think we should do?

makes sense, let's merge it and make fixes otw

SyntaxUI / syntaxui