search

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
8.64k stars 2.01k forks source link

Newsletter Color Scheme Change for Light and Dark mode. [Accessibility] #853

Closed EpistemicPolymath closed 7 months ago

EpistemicPolymath commented 7 months ago

Describe the bug This isn't a bug specifically, but I am trying to figure out how to change the Newsletter button color scheme for dark and light mode. I updated to version 2.0 and now I am not sure how to only change the Newsletter button for light and dark mode separately like I was before. Using the Tailwind.css colors without customization usually results in color contrast issues. I just would like an explanation on how to change that now with the implementation of plini for maintaining the Newsletter. I am trying my best to make this website and template as accessible as possible.

I am still learning about JAMStack and Next.js as I go along so, be please be patient.

For instance, I am trying to make this button customized differently for light and dark mode. Currently in neither mode is it accessible and I am unsure how to access this component directly after the update:

Light Mode: chrome_omuOZIGkqh

Dark Mode: chrome_Bxcc5J83Od

brohvis commented 7 months ago

Hey there, bear with me, as I'm learning too, but - I got around this by taking a look in the repository for Pliny and when I saw this note on the Pliny page.

Note: The previous cli and starter template have been deprecated. Please use the new components directly in your favourite Next 13 websites.

I then (believe the term is "scaffolded"?), took the source "NewsletterForm" that was being imported, (from here)and then added use client and I was able to call and use the form and verify that it still works, as well as style the button and divs inline with tailwind. Can't speak to the "correct"ness or anything as I'm just getting started but it works and it's pretty!

EpistemicPolymath commented 7 months ago

Thank you for responding I will look into this solution. I appreciate you sharing it. I was discussing this in a Discord and I think this feels more like a solution that I am comfy exploring.

EpistemicPolymath commented 7 months ago

This fix did work and it seems to be the best solution currently. For more context I followed @brohvis suggestion and copied the NewletterForm source code from (https://github.com/timlrx/pliny/blob/main/packages/pliny/src/ui/NewsletterForm.tsx) and added it to my app directory with use client at the top. Then in Main.tsx I simply changed it to import to that file instead of from pliny.