Mastering Dark Mode in React: The Power of Custom Hooks for Theming

5 min read Aldawsari
5 min read

Unlocking Dynamic Theming: The Power of React Custom Hooks

In modern web development, providing a flexible and user-friendly experience is paramount. One feature that has gained immense popularity is dark mode. Beyond being a mere aesthetic choice, dark mode offers significant benefits, including reduced eye strain, improved accessibility, and potential battery savings on OLED screens. Implementing dark mode efficiently across a React application can be challenging without a structured approach. This is where React Custom Hooks shine, offering an elegant solution to encapsulate and reuse complex logic.

What are Custom React Hooks?

At its core, a Custom Hook is a JavaScript function whose name starts with “use” and that can call other Hooks (like useState and useEffect). Their primary purpose is to extract component logic into reusable functions. Instead of duplicating stateful logic or side effects across multiple components, you can centralize it within a custom hook, making your codebase cleaner, more maintainable, and easier to test.

The benefits of using custom hooks are manifold:

  • Code Reusability: Write logic once and use it anywhere.
  • Separation of Concerns: Isolate stateful logic and side effects from your UI components.
  • Cleaner Components: Components become purely responsible for rendering, improving readability.
  • Improved Testability: Logic can be tested independently of the components that consume it.

The Architectural Concept: The useDarkMode Hook

The provided code snippet demonstrates a perfect use case for a custom hook: managing dark mode. The useDarkMode hook encapsulates all the necessary logic for detecting, setting, and persisting the user’s preferred theme. Let’s break down its architectural components:

  • State Management with useState: The hook uses useState to manage the current theme (e.g., ‘light’ or ‘dark’). This is the single source of truth for the theme within the application.
  • Side Effects with useEffect: Two useEffect hooks are employed to handle side effects:
    • Initialization: The first useEffect runs once on component mount to check for a previously saved theme in localStorage or to detect the system’s preferred color scheme using window.matchMedia. This ensures the theme is correctly set when the application loads.
    • Persistence and DOM Manipulation: The second useEffect listens for changes to the theme state. Whenever the theme changes, it updates the class attribute on the <html> element (the document root) and saves the new preference to localStorage. This ensures the theme is visually applied and remembered across sessions.
  • Exposed API: The hook returns an array containing the current theme state and a toggleTheme function. This simple API allows any consuming component to easily access the current theme and switch it.

Real-World Use Cases for Dynamic Theming

Implementing a robust dark mode solution like useDarkMode opens up a world of possibilities for your applications:

  • Personalized User Experiences: Users can customize their viewing preference, leading to increased satisfaction and engagement.
  • Accessibility Enhancements: Dark mode can significantly reduce eye strain, especially in low-light environments, making your application more accessible to a wider audience.
  • Branding and UI Consistency: Maintain a consistent look and feel across your application, even with dynamic themes.
  • Themed Content: Beyond just dark/light, this pattern can be extended to support multiple themes (e.g., ‘blue’, ‘green’, ‘high-contrast’) based on user roles, subscriptions, or seasonal events.

Why Developers Use This Approach

The custom hook pattern for dark mode is favored by developers for several compelling reasons:

  • DRY (Don’t Repeat Yourself): The dark mode logic is defined once, preventing code duplication across various components that might need to interact with the theme.
  • Maintainability: All theme-related logic is centralized. If you need to change how themes are saved, applied, or detected, you only modify the hook, not every component.
  • Readability: Components that consume useDarkMode remain concise and focused on their primary rendering responsibilities, as the theme logic is abstracted away.
  • Testability: The useDarkMode hook can be tested in isolation, ensuring its logic works correctly without needing to render an entire component tree.
💡 Developer Tip: When implementing dark mode, be mindful of FOUC (Flash of Unstyled Content) or FOIT (Flash of Invisible Text). If your theme logic relies solely on React rendering, users might briefly see the default (light) theme before the dark theme is applied. To mitigate this, consider injecting a small script high in your HTML <head> that reads localStorage and applies the appropriate class to <html> *before* React loads.

FAQ

What is the difference between useState and useEffect?

useState is a React Hook that lets you add state to functional components. It returns a stateful value and a function to update it. useEffect is a React Hook that lets you perform side effects in functional components. Side effects include data fetching, subscriptions, or manually changing the DOM. It runs after every render by default, but its execution can be controlled by a dependency array.

How does window.matchMedia work?

window.matchMedia() is a Web API method that returns a MediaQueryList object representing the results of a specified CSS media query string. In the context of dark mode, window.matchMedia('(prefers-color-scheme: dark)') checks if the user’s operating system or browser is configured to prefer a dark color scheme.

Can I extend this hook to support multiple themes beyond dark and light?

Absolutely! You can modify the useState to hold a string representing any theme name (e.g., ‘corporate’, ‘ocean’, ‘high-contrast’). The toggleTheme function would then need to cycle through these themes or accept a specific theme name as an argument. The useEffect that applies classes to document.documentElement would also need to be updated to remove all possible theme classes before adding the new one.

🔗 Next Step: Go to the Practical Application and test the code yourself here.

1 comment

  1. Pingback: Building a Reusable Dark Mode Toggle in React: A Line-by-Line Code Walkthrough - Qeevs

Leave a Reply

Your email address will not be published. Required fields are marked *