AdvanceToolbox

Dark Mode Toggle

Preview

Light Mode
<!-- Dark Mode Toggle Button -->
<button class="dark-mode-toggle" aria-label="Toggle dark mode">
  <!-- Sun icon for dark mode -->
  <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="5"></circle>
    <line x1="12" y1="1" x2="12" y2="3"></line>
    <line x1="12" y1="21" x2="12" y2="23"></line>
    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
    <line x1="1" y1="12" x2="3" y2="12"></line>
    <line x1="21" y1="12" x2="23" y2="12"></line>
    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
  </svg>
  
  <!-- Moon icon for light mode -->
  <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
  </svg>
</button>

<!-- Add these to your HTML file -->
<link rel="stylesheet" href="dark-mode.css">
<script src="dark-mode.js"></script>

<!-- Optional: Add this to your <head> to respect system preference -->
<script>
  // Apply dark mode immediately if user preference is dark to avoid flash
  if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark-mode');
  }
</script>

Toggle Style

Implementation Guide

To add dark mode to your website, follow these steps:

  1. Copy the HTML code for the toggle button and add it to your website.
  2. Create a CSS file (e.g., dark-mode.css) and add the CSS code.
  3. Create a JavaScript file (e.g., dark-mode.js) and add the JavaScript code.
  4. Link both files in your HTML.
Tip: For better user experience, add the optional script in the HTML to avoid the flash of incorrect theme when the page loads.

This implementation:

  • Automatically detects and respects user's system preference
  • Saves the user's chosen theme in localStorage
  • Provides smooth transitions between themes
  • Works with CSS variables for easy customization

Related Tools

Date Calculator

Calculate the difference between two dates, or add/subtract days easily.

Go to Tool

Time Calculator

Add or subtract time, or calculate time duration instantly.

Go to Tool

World Clock

Check current time in different timezones worldwide.

Go to Tool

Dark Mode Toggle: Your Complete Solution

Easily add a dark mode toggle switch to your website or app. Let users switch between light and dark themes instantly to enhance readability and reduce eye strain in low light.

Why is it Useful?

Dark mode has become a popular feature that improves user experience by:

  • Reducing eye strain in dim environments
  • Saving device battery life on OLED screens
  • Providing a sleek and modern look to apps and websites
  • Allowing users to personalize their interface
  • Improving readability especially at night

Key Features

  • Easy toggle switch: Users can switch themes with a click
  • Automatic detection: Detect system dark mode preference
  • Smooth transition: Animations for seamless theme changes
  • Customizable styles: Adjust colors for both light and dark themes
  • Persistent preference: Saves user choice in local storage

How to Use?

  1. Include the dark mode toggle component in your UI
  2. Set default theme based on system preference or user choice
  3. Click the toggle to switch between light and dark themes
  4. Customize colors and styles if desired via CSS variables
  5. Ensure the toggle state is saved to remember user preference

Use Cases

This tool is ideal for:

  • Websites and blogs: Enhance user comfort with theme choice
  • Web apps: Improve accessibility and usability
  • Mobile apps: Support dark mode preferences
  • Design portfolios: Showcase modern UI features
  • Developers: Quickly add dark mode without coding from scratch

Benefits

  • Improves user experience: Comfortable viewing in any lighting
  • Reduces eye fatigue: Easier on eyes during night or low light
  • Supports accessibility: Makes content readable for more users
  • Enhances design flexibility: Offers multiple theme options
  • Easy integration: Simple to add and customize

Frequently Asked Questions

Does it automatically detect system theme?

Yes, it can set default based on user’s system preference.

Can I customize the dark mode colors?

Absolutely, you can adjust the styles to match your branding.

Is the toggle state remembered after refresh?

Yes, user preference is saved in local storage.

Can this be used in any web project?

Yes, it works with any HTML/CSS/JS-based project.

Is this tool free?

Yes, it is freely available for all users.