Implement System-Aware Dark Mode with ThemeToggle.js

Preview:

Description:

ThemeToggle.js a lightweight JavaScript library that provides a simple way to integrate dark mode into your website.

This library can detect user system preferences for light or dark modes and apply the appropriate theme automatically.

For those who prefer manual control, it also includes a theme toggle button that enables switching between dark and light modes with a single click.

Furthermore, you have full control over CSS variable settings for both light and dark modes. This maintains consistency across components and enables smooth transitions.

How to use it:

1. Download the library and add the themeToggler.js script to your webpage.

<script src="themeToggler.js"></script>

2. Create a container to hold the theme toggle button.

<div id="theme-toggle"></div>

3. Initialize the library to create a default toggle button (a sun or moon icon) on your webpage.

ThemeToggler.init();

4. Override the default select of the toggle button.

ThemeToggler.init({
  targetId: 'theme-toggle',
});

5. Override the default CSS variables for light and dark modes.

ThemeToggler.init({
  lightTheme: {
    '--background-color': '#ffffff',
    '--text-color': '#333333',
    '--primary-color': '#2563eb',
    '--secondary-color': '#e5e7eb',
    '--tertiary-color': '#f3f4f6',
    '--sun-color': '#ffa500',
    '--moon-color': '#1a1a1a'
  },
  darkTheme: {
    '--background-color': '#1a1a1a',
    '--text-color': '#ffffff',
    '--primary-color': '#3b82f6',
    '--secondary-color': '#374151',
    '--tertiary-color': '#262626',
    '--sun-color': '#ffcc00',
    '--moon-color': '#ffffff'
  },
  themeButton: {
    '--button-position': 'fixed',
    '--button-top': '10px',
    '--button-right': '20px',
    '--button-bottom': 'auto',
    '--button-left': 'auto',
    '--icon-size': '24px',
    '--icon-rotation': '180deg'
  }
});

6. API methods:

// Manually switches themes.
ThemeToggler.toggleTheme();
// Applies a specific theme ('light' or 'dark').
ThemeToggler.applyTheme(theme);