Browse categories
Explore
Fiverr Pro
English
$
USD
I will add professional dark mode and light mode to your react website
Shakeeb
About this gig
Professional Dark Mode & Theme Implementation for React/Next.js
Give your users the modern interface they expect.
I will implement a seamless, high-performance Dark Mode and Light Mode system into your React or Next.js application. Using Tailwind CSS and state-of-the-art theme providers, I ensure your site transitions smoothly between themes without that annoying "white flash" on page reload.
Whats Included:
- Smooth Theme Toggle: A custom-styled switch that fits your brand.
- Zero-Flicker Performance: Optimized specifically for Next.js SSR to ensure a perfect user experience.
- Smart Persistence: The site remembers your user's preference using LocalStorage or Cookies.
- ️ OS Detection: Automatically matches the user's system settings (Mac, Windows, iOS, or Android).
- Tailwind Configuration: Professionally set up dark: classes throughout your codebase.
Why choose me? As a React developer, I don't just "add colors"I ensure the accessibility and performance of your UI remain top-tier. Lets make your app easier on the eyes and give it that premium, modern feel.
Ready to modernize your project? Lets get started!
Delivery style preference
Please inform the freelancer of any preferences or concerns regarding the use of AI tools in the completion and/or delivery of your order.
Respect third-party rights
Please be aware that it is against Fiverr's policies for sellers to include themes, templates, or any other elements that infringe third-party rights or applicable laws in the delivered work. Read more about in our Guide to Responsible Digital Creation.
Get to know Shakeeb
Shakeeb
Associate Software Engineer
- FromSri Lanka
- Member sinceApr 2026
- Avg. response time1 hour
Languages
Tamil, English, Sinhala
I made the leap from accounting to software engineering to follow my passion for technology and problem-solving. What began as self- learning soon turned into hands-on experience. I’m driven by curiosity, a love for continuous growth, and a desire to build meaningful software that makes an impact.
FAQ
Will there be a "white flash" when the page reloads?
No. I specialize in "flicker-free" implementation. Especially in Next.js, I use advanced theme providers to ensure the correct theme is applied on the server side or immediately upon mounting, so your users aren't blinded by a white screen during page transitions.
Can you add a custom toggle button that matches my design?
Definitely. I can build a custom toggle component (Sun/Moon icons, sliding switches, etc.) that fits your brand’s UI perfectly using Lucide-React icons or custom SVG animations.
Does this work with Tailwind CSS?
Yes, this is the most efficient way to do it. I will configure your tailwind.config.js to enable the 'selector' or 'class' strategy and apply dark: variant classes across your components for a seamless look.
Will the website remember the user's preference?
Yes. I implement persistent storage (LocalStorage or Cookies). Once a user selects a theme, the website will "remember" it the next time they visit, even if they close their browser.
Can it automatically match the user's system settings?
Yes. I can set it up to detect if the user is using Dark Mode on their Windows, macOS, or mobile OS settings and automatically apply that theme to your site as the default.
