🌙 Dark Mode in React, Angular & Vue – A Must-Have for Modern Apps!

Dark mode is no longer just a "cool feature"—it’s an essential part of modern UI/UX.

It improves readability, reduces eye strain, and even helps save battery on OLED screens.

But how do you implement it in React, Angular, and Vue? Let’s dive in and build a seamless dark mode switcher in each of these frameworks!

🎯 Why Dark Mode?

Before we start coding, here’s why you should consider adding dark mode to your app:

✅ User Preference: Many users prefer dark mode for extended reading.

✅ Battery Efficiency: OLED screens consume less power in dark mode.

✅ Modern Aesthetics: Apps with dark mode look sleek and future-ready.

✅ Accessibility: Helps users with light sensitivity or visual impairments.

⚛️ Implementing Dark Mode in React

React’s useState & localStorage make it easy to toggle dark mode.

🔹 Steps:

1. Store theme preference in localStorage.

2. Toggle dark mode using CSS classes.

3. Update state based on the saved preference.

🔹 React Dark Mode Code:

import React, { useState, useEffect } from "react"; 

const App = () => { 
  const [darkMode, setDarkMode] = useState( 
    localStorage.getItem("theme") === "dark" 
  ); 

  useEffect(() => { 
    document.body.classList.toggle("dark-mode", darkMode); 
    localStorage.setItem("theme", darkMode ? "dark" : "light"); 
  }, [darkMode]); 

  return ( 
    <div> 
      <button onClick={() => setDarkMode(!darkMode)}> 
        {darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"} 
      </button> 
    </div> 
  ); 
}; 

export default App; 

🔹 CSS for Dark Mode:

body.dark-mode { 
  background-color: #121212; 
  color: #ffffff; 
} 

📌 Explore more React dark mode techniques: https://react.dev/

🅰️ Implementing Dark Mode in Angular

Angular allows you to toggle dark mode using services and CSS variables.

🔹 Steps:

1. Create a Theme Service to handle mode switching.

2. Store the user preference in localStorage.

3. Apply the selected theme dynamically using CSS variables.

🔹 Angular Dark Mode Code:

theme.service.ts 

import { Injectable } from '@angular/core'; 

@Injectable({ 
  providedIn: 'root' 
}) 
export class ThemeService { 
  private darkMode = false; 

  constructor() { 
    this.darkMode = localStorage.getItem("theme") === "dark"; 
    this.updateTheme(); 
  } 

  toggleTheme() { 
    this.darkMode = !this.darkMode; 
    localStorage.setItem("theme", this.darkMode ? "dark" : "light"); 
    this.updateTheme(); 
  } 

  updateTheme() { 
    document.body.classList.toggle("dark-mode", this.darkMode); 
  } 
} 

app.component.ts

import { Component } from '@angular/core'; 
import { ThemeService } from './theme.service'; 

@Component({ 
  selector: 'app-root', 
  template: ` 
    <button (click)="toggleTheme()">Toggle Dark Mode</button> 
  ` 
}) 
export class AppComponent { 
  constructor(private themeService: ThemeService) {} 

  toggleTheme() { 
    this.themeService.toggleTheme(); 
  } 
} 

styles.css

body.dark-mode { 
  --bg-color: #121212; 
  --text-color: #ffffff; 
} 

body { 
  background-color: var(--bg-color); 
  color: var(--text-color); 
} 

📌 Angular Dark Mode Best Practices: https://angular.io/guide/theming

🔷 Implementing Dark Mode in Vue

Vue’s reactive properties and Vuex make dark mode integration simple.

🔹 Steps:

1. Store the theme preference in localStorage.

2. Use Vue’s reactive state to track theme changes.

3. Apply dark mode using CSS classes.

🔹 Vue Dark Mode Code:

<template> 
  <div :class="{ 'dark-mode': isDarkMode }"> 
    <button @click="toggleTheme"> 
      {{ isDarkMode ? "Switch to Light Mode" : "Switch to Dark Mode" }} 
    </button> 
  </div> 
</template> 

<script> 
export default { 
  data() { 
    return { 
      isDarkMode: localStorage.getItem("theme") === "dark" 
    }; 
  }, 
  methods: { 
    toggleTheme() { 
      this.isDarkMode = !this.isDarkMode; 
      localStorage.setItem("theme", this.isDarkMode ? "dark" : "light"); 
      document.body.classList.toggle("dark-mode", this.isDarkMode); 
    } 
  } 
}; 
</script> 

<style> 
.dark-mode { 
  background-color: #121212; 
  color: #ffffff; 
} 
</style> 

📌 Learn more about Vue theming: https://vuejs.org/guide/scaling-up/theming.html

🔥 Pro Tips for a Better Dark Mode Experience

**✅ Use CSS Variables – **Makes it easier to switch themes dynamically.

✅ Save User Preferences – Use localStorage to persist dark mode settings.

✅ Provide a Toggle Button – Users should easily switch between light & dark.

✅ Test Accessibility – Ensure proper contrast for readability.

🔗 Want to explore more advanced theming? Check out this CSS Dark Mode Guide.

💡 Which Framework Handles Dark Mode Best?

✅ Use React if you want a simple hook-based approach.

✅ Choose Angular for enterprise apps with structured theming.

✅ Go with Vue for a lightweight and reactive dark mode switcher.

💬 Which framework do you prefer for dark mode?

Share your thoughts in the comments!

📢 Stay Updated with More Frontend Insights!

🔔 Follow DCT Technology for web development tips, design trends, and UI/UX guides! 🚀

React #Angular #Vue #WebDevelopment #DarkMode #Frontend #UIUX #CSS #JavaScript #DevCommunity