Close Menu
Arunangshu Das Blog
  • SaaS Tools
    • Business Operations SaaS
    • Marketing & Sales SaaS
    • Collaboration & Productivity SaaS
    • Financial & Accounting SaaS
  • Web Hosting
    • Types of Hosting
    • Domain & DNS Management
    • Server Management Tools
    • Website Security & Backup Services
  • Cybersecurity
    • Network Security
    • Endpoint Security
    • Application Security
    • Cloud Security
  • IoT
    • Smart Home & Consumer IoT
    • Industrial IoT
    • Healthcare IoT
    • Agricultural IoT
  • Software Development
    • Frontend Development
    • Backend Development
    • DevOps
    • Adaptive Software Development
    • Expert Interviews
      • Software Developer Interview Questions
      • Devops Interview Questions
    • Industry Insights
      • Case Studies
      • Trends and News
      • Future Technology
  • AI
    • Machine Learning
    • Deep Learning
    • NLP
    • LLM
    • AI Interview Questions
  • Startup

Subscribe to Updates

Subscribe to our newsletter for updates, insights, tips, and exclusive content!

What's Hot

Shared Hosting vs VPS vs Dedicated Hosting Explained

June 11, 2025

Future Trends in Adaptive Software Development to Watch Out For

January 30, 2025

6 Types of Neural Networks You Should Know

February 8, 2025
X (Twitter) Instagram LinkedIn
Arunangshu Das Blog Wednesday, June 25
  • Write For Us
  • Blog
  • Gallery
  • Contact Me
  • Newsletter
Facebook X (Twitter) Instagram LinkedIn RSS
Subscribe
  • SaaS Tools
    • Business Operations SaaS
    • Marketing & Sales SaaS
    • Collaboration & Productivity SaaS
    • Financial & Accounting SaaS
  • Web Hosting
    • Types of Hosting
    • Domain & DNS Management
    • Server Management Tools
    • Website Security & Backup Services
  • Cybersecurity
    • Network Security
    • Endpoint Security
    • Application Security
    • Cloud Security
  • IoT
    • Smart Home & Consumer IoT
    • Industrial IoT
    • Healthcare IoT
    • Agricultural IoT
  • Software Development
    • Frontend Development
    • Backend Development
    • DevOps
    • Adaptive Software Development
    • Expert Interviews
      • Software Developer Interview Questions
      • Devops Interview Questions
    • Industry Insights
      • Case Studies
      • Trends and News
      • Future Technology
  • AI
    • Machine Learning
    • Deep Learning
    • NLP
    • LLM
    • AI Interview Questions
  • Startup
Arunangshu Das Blog
  • Write For Us
  • Blog
  • Gallery
  • Contact Me
  • Newsletter
Home»Software Development»Frontend Development»Implementing Dark Mode in Your Website
Frontend Development

Implementing Dark Mode in Your Website

Arunangshu DasBy Arunangshu DasJuly 23, 2024Updated:February 26, 2025No Comments3 Mins Read
Facebook Twitter Pinterest Telegram LinkedIn Tumblr Copy Link Email Reddit Threads WhatsApp
Follow Us
Facebook X (Twitter) LinkedIn Instagram
Share
Facebook Twitter LinkedIn Pinterest Email Copy Link Reddit WhatsApp Threads

In the world of web development, enhancing user experience is paramount. One significant trend that has gained traction is the implementation of dark mode. Dark mode not only reduces eye strain in low-light environments but also conserves battery life on OLED and AMOLED screens. T

1. Understanding Dark Mode

Dark mode is a display setting where the background is dark and the text is light. This inverse color scheme helps in reducing the blue light emitted from screens, thus minimizing eye strain.

2. Basic Implementation of Dark Mode

Step 1: Setting Up Your HTML and CSS

To start, we need a basic HTML structure and some CSS to toggle between light and dark modes.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to Dark Mode Example</h1>
<button id="theme-toggle">Toggle Dark Mode</button>
</div>
<script src="script.js"></script>
</body>
</html>

CSS:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

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

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

.container {
  text-align: center;
  margin-top: 20%;
}

button {
  padding: 10px 20px;
  cursor: pointer;
}

Step 2: Adding JavaScript for Theme Toggle

To toggle between light and dark modes, we can use JavaScript to add or remove a class on the <body> element.

JavaScript:

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
});

3. Syncing with System-Wide Dark Mode

Modern operating systems allow users to set a system-wide preference for dark or light mode. We can use CSS media queries to detect this preference and apply it automatically.

Step 1: Using CSS Media Queries

CSS:

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff;
    --text-color: #000000;
  }
}

Step 2: Enhancing JavaScript to Respect System Preferences

To ensure our JavaScript respects the system preference on page load, we can modify our script as follows:

JavaScript:

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

// Check for system preference
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
}

toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
});

4. Persisting User Preference

To provide a consistent experience, we should save the user’s theme preference in local storage so that it persists across sessions.

JavaScript:

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference or system preference
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
  body.classList.add('dark-mode');
}

toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

Conclusion

Implementing dark mode on your website enhances user experience by providing a comfortable viewing option and conserving battery life. This feature not only makes your website more user-friendly but also shows your attention to detail and commitment to modern web standards.

CSS Dark Mode Design
Follow on Facebook Follow on X (Twitter) Follow on LinkedIn Follow on Instagram
Share. Facebook Twitter Pinterest LinkedIn Telegram Email Copy Link Reddit WhatsApp Threads
Previous ArticleExploring the Latest Features in React
Next Article GraphQL vs REST: Which is Better for Frontend Development?

Related Posts

Speed Up Your Site: A Practical Guide to Frontend Performance Optimization Tool

June 16, 2025

The Next Frontier: Exploring the Future of Frontend Development

June 13, 2025

Choosing the Right Frontend Development Frameworks for Your Web Project

May 25, 2025
Add A Comment
Leave A Reply Cancel Reply

Top Posts

What are Single Page Applications (SPAs), and why are they popular?

November 8, 2024

What is Software as a Service? An Ultimate Beginner’s Guide to Innovative SaaS

June 3, 2025

What is backend development?

February 17, 2025

10 Common Mistakes in AI Model Development

February 8, 2025
Don't Miss

10 Use Cases for SQL and NoSQL Databases

February 22, 20256 Mins Read

When it comes to databases, one of the biggest debates in the tech world revolves…

10 Common Mistakes in AI Model Development

February 8, 2025

VGG Architecture Explained: How It Revolutionized Deep Neural Networks

December 18, 2024

Which Large Language Model developed by Microsoft?

June 25, 2021
Stay In Touch
  • Facebook
  • Twitter
  • Pinterest
  • Instagram
  • LinkedIn

Subscribe to Updates

Subscribe to our newsletter for updates, insights, and exclusive content every week!

About Us

I am Arunangshu Das, a Software Developer passionate about creating efficient, scalable applications. With expertise in various programming languages and frameworks, I enjoy solving complex problems, optimizing performance, and contributing to innovative projects that drive technological advancement.

Facebook X (Twitter) Instagram LinkedIn RSS
Don't Miss

YOLO Algorithm: An Introduction to You Only Look Once

May 13, 2024

7 Ways Generative AI is Transforming Content Creation

February 13, 2025

What Artificial Intelligence can do?

February 28, 2024
Most Popular

How CNN Works

April 9, 2024

Bridging the Gap Between Artificial Intelligence and Human Cognition: The Role of Deep Learning

January 1, 2025

7 Advantages of Using GraphQL Over REST

February 23, 2025
Arunangshu Das Blog
  • About Me
  • Contact Me
  • Write for Us
  • Privacy Policy
  • Terms & Conditions
  • Disclaimer
  • Article
  • Blog
  • Newsletter
  • Media House
© 2025 Arunangshu Das. Designed by Arunangshu Das.

Type above and press Enter to search. Press Esc to cancel.

Ad Blocker Enabled!
Ad Blocker Enabled!
Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.