DEV Community: Saad Ahmad

Building a Lightweight Dark/Light Mode System in React with use-theme-mode

Saad Ahmad — Tue, 14 Apr 2026 13:44:50 +0000

Dark mode has become a standard expectation in modern web applications. But implementing it correctly—with persistence, system preference detection, and clean separation of logic and styles—is often more complicated than it should be.

That’s exactly why I built use-theme-mode, a lightweight React hook that handles theme state for you—without enforcing any styling system.

✨ Why Another Theme Hook?

Most theme solutions today fall into one of two categories:

Too opinionated (UI framework–specific)
Too heavy for simple use cases

I wanted something that:

✅ Works with any CSS solution
✅ Persists user preference
✅ Respects system theme
✅ Is SSR‑safe
✅ Has zero runtime dependencies

That became use-theme-mode.

📦 Installation

npm install use-theme-mode

🚀 Basic Usage

import { useTheme } from "use-theme-mode";

function App() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  );
}

That’s it. Behind the scenes, the hook:

Detects system preference
Saves the theme to localStorage
Updates the <html data-theme="..."> attribute
Syncs changes across tabs

🎨 Styling Is 100% in Your Control

use-theme-mode does not inject styles. Instead, it gives you a single source of truth via data-theme.

CSS Implementation

:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
}

:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s ease, color 0.3s ease;
}

This approach works beautifully with:

Tailwind
CSS variables
Styled-components
MUI / Chakra
Vanilla CSS

🔄 Works Great with Tailwind Too

JavaScript Configuration:

// tailwind.config.js
module.exports = {
  darkMode: ["attribute", "data-theme"],
};

JSX Usage:

<div className="bg-white text-black dark:bg-black dark:text-white">
  Hello world
</div>

🌍 Live Demo

I’ve deployed a live demo showcasing:

Real theme switching
Persistent state
Code examples synced with UI

👉 View Live Demo

🧩 API Reference

const { theme, toggleTheme, setLight, setDark } = useTheme();

theme → "light" | "dark"
toggleTheme() → switch modes
setLight() → force light mode
setDark() → force dark mode

🛡️ SSR Safe & Production Ready

The hook:

Avoids direct window access during render.
Works in Next.js and other SSR frameworks.
Synchronizes changes across tabs automatically.

🔮 What’s Coming Next?

Plans for future versions:

✅ TypeScript-first API
✅ Optional context provider
✅ ESM build support
✅ Custom storage keys

🔗 Links

npm: use-theme-mode
GitHub: saadahmad888/use-theme-mode
Live Demo: Vercel Demo

If you find this useful, I’d love feedback or contributions!

Digging Deep into the Core of Frontend Development

Saad Ahmad — Sat, 08 Mar 2025 14:35:15 +0000

Frontend development is more than just writing HTML, CSS, and JavaScript. It’s about creating seamless user experiences, ensuring performance, and writing maintainable code. If you truly want to master frontend development, you need to dig deep into its core concepts.

1. HTML - The Backbone

HTML (HyperText Markup Language) structures the web. Understanding semantic HTML is crucial for accessibility and SEO. Don't just use <div> for everything; use <article>, <section>, <header>, and <footer> where appropriate.

2. CSS - The Art of Styling

CSS (Cascading Style Sheets) is what makes the web beautiful. Mastering:

Flexbox & Grid for layout
Variables for maintainability
Transitions & animations for better UX
Responsive design techniques

will help you create pixel-perfect designs.

3. JavaScript - The Brain

JavaScript brings life to your UI. Core concepts to master:

ES6+ features (let, const, arrow functions, destructuring)
DOM Manipulation
Event Handling
Fetch API & Async/Await
Functional Programming principles

4. Frameworks & Libraries

While JavaScript is powerful, frameworks like React, Vue, or Angular make development faster and more scalable. For React.js enthusiasts, understanding Hooks, Context API, and performance optimizations is key.

5. State Management

State management is the heart of modern web apps. Whether you use React’s Context API, Redux, Zustand, or Recoil, understanding state flow and performance optimization will set you apart.

6. Performance Optimization

A fast website means a better user experience. Optimize:

Image loading (WebP, lazy loading)
Code splitting & tree shaking
Server-side rendering (SSR) & Static Site Generation (SSG)
Caching strategies

7. Version Control (Git/GitHub)

A good frontend developer knows Git. You should be comfortable with branching, merging, rebasing, and handling pull requests. Speaking of GitHub, let’s connect! 😃

📌 Follow me on GitHub: saadahmad888

8. Testing & Debugging

Don’t just write code—test it! Get familiar with:

Console debugging
Unit testing (Jest, React Testing Library)
End-to-end testing (Cypress, Playwright)

9. Understanding APIs

Frontend isn't just UI. Learning how to consume RESTful and GraphQL APIs will help you build dynamic applications.

10. Soft Skills & Community Contribution

Being a great frontend developer is not just about coding. It’s about collaboration, problem-solving, and sharing knowledge.

🖥️ Want to see my work? Visit my portfolio: isaadahmad.com

🔥 If you're passionate about frontend and want to stay updated, let’s connect on GitHub and build something awesome together! 🚀

Drop a comment below—what's your favorite frontend concept? 😊

🚀 How AI is Revolutionizing Frontend Development 🤖

Saad Ahmad — Thu, 06 Mar 2025 10:55:19 +0000

Artificial Intelligence (AI) is transforming every industry, and frontend development is no exception. With AI-powered tools and frameworks, developers can now create faster, more efficient, and highly personalized user experiences. Let’s dive into how AI is reshaping frontend development and what it means for developers. 🛠️

1️⃣ AI-Powered Code Generation ✨

Tools like GitHub Copilot, Tabnine, and Codeium are helping developers write code faster and with fewer errors. These AI-powered assistants suggest code snippets, complete functions, and even generate entire components based on context. This not only speeds up development but also reduces cognitive load. ⚡

2️⃣ Automated UI/UX Design 🎨

AI is making UI/UX design more intuitive with tools like Figma AI and Adobe Sensei. These tools analyze user behavior and suggest design improvements, color palettes, and layouts, making it easier for developers to create visually appealing interfaces. 🖌️

3️⃣ AI for Accessibility and Responsiveness 📱

AI-driven tools can analyze websites and ensure accessibility compliance with standards like WCAG. They also help in making layouts responsive by predicting how elements should adjust for different screen sizes and devices. 🔍

4️⃣ AI-Based Testing and Debugging 🛠️

AI-powered testing frameworks like Selenium AI, TestCraft, and Applitools can automate UI testing, detect anomalies, and provide insights on how to fix them. This saves time in debugging and ensures a smooth user experience. ✅

5️⃣ Personalized User Experiences 🎯

AI enables real-time personalization based on user behavior, preferences, and interactions. Recommendation engines, dynamic content rendering, and chatbot integrations are all powered by AI to enhance user engagement. 🤝

🔮 What’s Next?

As AI continues to evolve, we can expect more intelligent automation in frontend development. From AI-generated animations to real-time code optimizations, the possibilities are endless. While AI won't replace frontend developers, it will certainly enhance their capabilities and streamline workflows. 💡

What are your thoughts on AI in frontend development? Are you using any AI-powered tools in your projects? Let’s discuss in the comments! 🚀

🚀 My Journey in Frontend Development & Building with the Community

Saad Ahmad — Thu, 13 Feb 2025 06:10:55 +0000

Hey Dev.to! 👋 I'm excited to share my journey as a frontend developer and how I keep up with the ever-evolving world of web development. From building innovative tools to engaging with the dev community, here’s my story.

🛠 Who Am I?

I'm a frontend developer passionate about crafting high-performance user interfaces with React, Next.js, and modern web technologies. I love solving problems, optimizing performance, and exploring new trends in frontend development. My journey has been fueled by curiosity, continuous learning, and a deep love for coding.

💡 Things I’m Working On:

Open-Source Projects → I maintain npm packages like stack-on-scroll, helping developers create better UI experiences.
Frontend Innovation → I’m building a Skeleton Screen Generator, making it easier for developers to create seamless loading states.
Speech-to-Text & Text-to-Speech in Urdu → I’m working on implementing this feature to enhance accessibility in apps.

🔥 Staying Updated with Frontend Trends

Frontend development is always changing! Here’s how I stay ahead:

✅ Exploring New Features → React Server Components (RSC), Next.js advancements, and modern UI patterns.

✅ Experimenting with Tech → Trying new tools and frameworks to build better web apps.

✅ Engaging in the Dev Community → Writing blogs, sharing knowledge, and connecting with like-minded developers.

🏗 How I Build & Share

One of my goals is to share my knowledge with others. Writing blogs, building open-source tools, and contributing to the dev community help me grow as a developer.

✍️ Topics I Write About:

Modern Frontend Trends → React, Next.js, and emerging frameworks.
Performance Optimization → Making apps faster and more efficient.
Developer Tools & Productivity → Tips and tricks for better frontend development.

🚀 Let’s Connect & Grow Together!

I’d love to hear from you! Whether it's discussing frontend trends, performance hacks, or open-source projects, let’s build together. Drop a comment, share your thoughts, or connect with me on isaadahmad.com.