Add theme toggle - Githubissues

abhrajit2004 / Twitter-Landing-Page

I am currently developing a production ready Twitter Home Page using Tailwind CSS though you can always contribute here.

https://twitter-landing-page-for-developers.netlify.app/

14 stars 33 forks source link

Add theme toggle #14

Closed kartikey369-ind closed 1 month ago

kartikey369-ind commented 1 month ago

Implement Light/Dark Theme Toggle

This pull request introduces a light/dark theme toggle feature to the website.

The main enhancements include:

Theme Switching: Added functionality to toggle between a black background with white text (dark mode) and a white background with black text (light mode).
Custom Toggle Switch: Implemented a visually appealing toggle switch with smooth transitions. The switch changes its background color and moves when toggled.
Responsive Design: Ensured the toggle switch is positioned on the right side of the page for easy access while maintaining the overall layout integrity.
Accessibility Considerations: The button text changes based on the active theme, providing clear feedback to users.

Testing:

Verified that the theme switch works correctly on various screen sizes.
Confirmed that the toggle switch behaves as expected when clicked, with smooth transitions.

netlify[bot] commented 1 month ago

Deploy Preview for melodic-squirrel-5146fe failed. Why did it fail? →

Name	Link
Latest commit	5b2d27bfa2a552c827eff439c0420bb043ad57a7
Latest deploy log	https://app.netlify.com/sites/melodic-squirrel-5146fe/deploys/66fd2042cd5fe80008807785

netlify[bot] commented 1 month ago

Deploy Preview for bejewelled-tiramisu-07dd5f failed. Why did it fail? →

Name	Link
Latest commit	5b2d27bfa2a552c827eff439c0420bb043ad57a7
Latest deploy log	https://app.netlify.com/sites/bejewelled-tiramisu-07dd5f/deploys/66fd2042f9034d00088246f1

netlify[bot] commented 1 month ago

Deploy Preview for incredible-faloodeh-f6df18 failed. Why did it fail? →

Name	Link
Latest commit	5b2d27bfa2a552c827eff439c0420bb043ad57a7
Latest deploy log	https://app.netlify.com/sites/incredible-faloodeh-f6df18/deploys/66fd204259d0c20008599cac

netlify[bot] commented 1 month ago

Deploy Preview for twitter-landing-page-by-abhrajit failed. Why did it fail? →

Name	Link
Latest commit	5b2d27bfa2a552c827eff439c0420bb043ad57a7
Latest deploy log	https://app.netlify.com/sites/twitter-landing-page-by-abhrajit/deploys/66fd2042a151d20008be593a

netlify[bot] commented 1 month ago

Deploy Preview for twitter-landing-page-for-developers ready!

Name	Link
Latest commit	5b2d27bfa2a552c827eff439c0420bb043ad57a7
Latest deploy log	https://app.netlify.com/sites/twitter-landing-page-for-developers/deploys/66fd2042381c340008668404
Deploy Preview	https://deploy-preview-14--twitter-landing-page-for-developers.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.

5h0ov commented 1 month ago

@kartikey369-ind hm cool cool! But like can you fix it in these portions as well?:

and like make the toggle more readable you know? Like either make it sun/moon emoji or say it is a theme toggle switch

kartikey369-ind commented 1 month ago

Ok sure will do it by the end of the day...