Add theme switch in landing page

[danielcdz]

📘 Issue Description

Add a Theme Switch to the Landing Page

We want to introduce a theme switcher on the landing page to toggle between light and dark modes. This initial implementation will serve as a foundation, and its functionality will be replicated across other views in the future.

Task Details:

1. Research: Identify a library or tool that supports light and dark mode switching efficiently and integrates well with our tech stack.
2. Implement: Add the theme switcher to the landing page, ensuring seamless toggling between themes.
3. Design Consistency: Ensure the light and dark modes align with the existing design guidelines and aesthetics of the platform.
4. Scalability: Set up the theme switcher in a way that allows easy replication and extension to other pages in the future.

Notes:

• The implementation should prioritize performance and accessibility.
• Include documentation or comments explaining how the theme switch works to facilitate replication across other views later.

[brolag]

Hi @danielcdz, I'd like to contribute on this one.

This his how I plan to tackle it:

1) Set thems for light mode and dark mode respectively. 2) Create a global context to persist the selected theme. 3) Try to get the browser/system theme and apply it by default.

Thanks.

[lauchaves]

Hey! I'm Lau Chaves, and I would like to contribute to this issue!

I have over 5 years of experience working with JavaScript, React, and TypeScript, ruby... Im also part of Dojo Coding Costa Rica!

My primary role has been as a front-end developer, and I have a keen eye for detail and a strong focus on mobile-first approaches. I ensure the quality of my work through rigorous self- QA processes. I have a solid knowledge of CSS, Sass, and styled-components. I have worked with figma and zeplin

Feel free to check my onlydust profile here and github profile: lauchaves!

For this issue, my approach would be:

Would investigate the best approach for this could be css variables, MUI or even Tailwind CSS, would confirm with the maintainer the chosen one before apply it!

[KevinLatino]

Hello @danielcdz! My name is Kevin Latino, and I'm a frontend developer and active open-source contributor. I'm a member of Dojo Coding, a thriving Web3 community in Costa Rica. I have experience with React, Next.js, and TypeScript, also I have experience in data fetching and API integrations and I recently won the LATAM Hackathon hosted by Base. I've also contributed to projects in ecosystems like Starknet and Stellar.

I will implement a theme switcher on the landing page using TailwindCSS (because the project uses TailwindCSS), which has built-in support for dark mode. I’ll leverage the dark class and use localStorage to persist the theme preference. The switcher will be easy to replicate across other pages in the future. I’ll ensure both light and dark modes align with the existing design, prioritizing performance and accessibility. Documentation will be included for future scalability.

[BrunoAmbricca]

I would like to work on this issue

[abdegenius]

Can I try solving this issue?I can comfortably handle this issues

[Benjtalkshow]

I'd like to handle this task. I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 45 contributions to over 15 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

MY ETA is 48hrs. Thanks

[martinvibes]

Can I take care of this issue? i'm a frontend dev and a blockchain dev kindly assign :)

[josephchimebuka]

Hello I am Joseph I am a frontend developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/ May I try this one?

[Supa-mega]

I’d like to work on this.

[Unickhub]

Can I take this issue?

[Bran18]

Hello there. I’m Brandon, part of the ⛩️ Dojo Coding community, and I would love to contribute to this project! 🚀 This might be my first contribution here.

I've done quite a few theme toggles in our apps, feel free to check out the one from MB (https://masterbots.ai/) as one example xD. I would love to help out with creating the one you need and adding all the elements it needs. I will be following the strategy we use in our products:

• Create/fix Themes
• Create Context for logic
• Hooks for actions as toggles
• Setting default theme based on system
• Any other cool stuff and easy to maintain

Lmk if I can start working on it. Here’s my GitHub profile: GitHub: https://github.com/Bran18 and my OnlyDust profile: https://app.onlydust.com/u/Bran18.

BTW tks for taking the time 🙏

[ShantelPeters]

Mind if I try this one?

[RolandoDrRobot]

Hello @danielcdz do you mind If Intake this? I have implemented this is in a previous job

using this

https://nimishjn.medium.com/toggle-theme-in-reactjs-4095dd35c69d

[RolandoDrRobot]

Hello @danielcdz do you mind If Intake this? I have implemented this is in a previous job

using this

https://nimishjn.medium.com/toggle-theme-in-reactjs-4095dd35c69d

[akintewe]

Hello can i be assigned this issue, i am a new contributor with experience in typescript, would love to work on this , my ETA is >12 Hours and ill create a draft PR in 10 hours time. Thank you for this opportunity. :)

[Michaelkingsdev]

Can I be assigned to this? I am an experienced frontend developer with 3 years of experience.

[DanielEmmanuel1]

Can I attempt this issue?

How I Hope To Tackle This Issue I’ll implement a simple toggle function that will switch between the dark and light themes and ensure it aligns with the platform’s design guidelines. The solution will be scalable, so it can be easily applied to other pages later on. ETA: 24 hours.

[MullerTheScientist]

I am a full-stack developer with experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript. can i please handle this task

[gidson5]

I will follow design consistency to ensure i build optimally ETA 2 days

[emmz3230]

I am a front-end developer specializing in responsive web design, device-compatible email templates, 3D web integration, and technical writing on programming topics. I also contribute to open-source documentation and help build documentation sites.

add a toggle of dark and light but make the default light using if statement

will be glad to work on this Thanks