🌓 Website Theme Switcher

A lightweight, framework-agnostic theme switcher that seamlessly integrates with any website to provide smooth light/dark theme switching. Perfect for React, Vue, Angular, Svelte, and vanilla JavaScript projects.

🎥 Demo Video

🎬 Auto-Play Feature: The demo video automatically plays and loops continuously to showcase the smooth theme switching experience. The video demonstrates the instant theme changes, smooth transitions, and responsive design of the theme switcher.

✨ Features

• 🎯 Simple Toggle Button - One button to switch between light and dark themes
• 🚀 Framework Agnostic - Works with React, Vue, Angular, or vanilla JavaScript
• 🎨 CSS Framework Compatible - Integrates with Tailwind CSS, Bootstrap, or custom CSS
• 💾 Automatic Persistence - Saves theme preference to localStorage
• 📱 Mobile Friendly - Touch gestures and responsive design
• ⚡ Lightweight - Only 16.6 kB minified
• 🔧 Easy to Use - Simple HTML attributes, no complex setup

🎯 Quick Start (5 minutes)

1. Install the Package

npm install website-theme-switcher

2. Add Toggle Button to Your Navbar

<button class="theme-toggle" data-toggle-theme="dark,light">
    🌓 Toggle Theme
</button>

3. Add CSS Variables

:root {
  /* Light theme (your existing website - unchanged) */
  --bg-color: #ffffff;        /* White background */
  --text-color: #333333;      /* Dark text */
}

[data-theme="dark"] {
  /* Dark theme (minimal changes) */
  --bg-color: #000000;        /* Black background */
  --text-color: #ffffff;      /* White text for readability */
}

4. Replace Hardcoded Colors

body {
  background-color: var(--bg-color);    /* Only this changes */
  color: var(--text-color);             /* Only this changes */
}

5. Initialize Theme Switcher

<script src="https://unpkg.com/website-theme-switcher@latest/dist/index.js"></script>
<script>
  WebsiteThemeSwitcher.init();
</script>

🧪 Test It

Open demo/simple-working-demo.html in your browser to see the working toggle button!

🎨 HTML Attributes

The package automatically detects these HTML attributes:

Toggle Between Themes

<button data-toggle-theme="dark,light">🌓 Toggle</button>

Set Specific Theme

<button data-set-theme="dark">🌙 Dark</button>
<button data-set-theme="light">☀️ Light</button>

Select Dropdown

<select data-choose-theme>
  <option value="light">☀️ Light</option>
  <option value="dark">🌙 Dark</option>
</select>

Custom Storage Key

<button data-toggle-theme="dark,light" data-key="my-theme">Toggle</button>

Active Class

<button data-set-theme="dark" data-act-class="active">Dark</button>

🚀 Framework Examples

React

import { useEffect } from 'react';
import { WebsiteThemeSwitcher } from 'website-theme-switcher';

function App() {
  useEffect(() => {
    WebsiteThemeSwitcher.init();
  }, []);

  return (
    <nav>
      <button data-toggle-theme="dark,light">🌓 Toggle</button>
    </nav>
  );
}

Vue 3

<template>
  <nav>
    <button data-toggle-theme="dark,light">🌓 Toggle</button>
  </nav>
</template>

<script setup>
import { onMounted } from 'vue';
import { WebsiteThemeSwitcher } from 'website-theme-switcher';

onMounted(() => {
  WebsiteThemeSwitcher.init();
});
</script>

Angular

import { Component, OnInit } from '@angular/core';
import { WebsiteThemeSwitcher } from 'website-theme-switcher';

@Component({
  selector: 'app-navbar',
  template: `
    <nav>
      <button data-toggle-theme="dark,light">🌓 Toggle</button>
    </nav>
  `
})
export class NavbarComponent implements OnInit {
  ngOnInit() {
    WebsiteThemeSwitcher.init();
  }
}

⚙️ Configuration

WebsiteThemeSwitcher.init({
  defaultTheme: 'light',           // Default theme
  storageKey: 'theme',             // localStorage key
  enableSystemPreference: false,   // Use system preference
  transitionDuration: 300,         // CSS transition duration
  themes: ['light', 'dark'],       // Available themes
  onThemeChange: (theme) => {},    // Theme change callback
  debug: false,                    // Enable debug logging
  enableTouchGestures: false,      // Enable touch gestures
  touchThreshold: 50               // Touch gesture threshold
});

🎨 Custom Themes

Load Custom Theme

const themeSwitcher = WebsiteThemeSwitcher.getInstance();
themeSwitcher.loadTheme('custom', {
  '--bg-color': '#1a1a2e',
  '--text-color': '#ffffff',
  '--accent-color': '#0f3460'
});

Use Custom Theme

<button data-set-theme="custom">🎨 Custom</button>

📱 Mobile Support

Touch Gestures

WebsiteThemeSwitcher.init({
  enableTouchGestures: true,
  touchThreshold: 50
});

• Swipe Right: Previous theme
• Swipe Left: Next theme

🔧 API Methods

Get Instance

const themeSwitcher = WebsiteThemeSwitcher.getInstance();

Set Theme

themeSwitcher.setTheme('dark');

Toggle Theme

themeSwitcher.toggleTheme(['light', 'dark']);

Get Current Theme

const currentTheme = themeSwitcher.getCurrentTheme();

Check Dark Mode

const isDark = themeSwitcher.isDarkMode();

Remove Theme

themeSwitcher.removeTheme();

📊 Version Comparison

🧪 Testing

Run Tests

npm test

Build Package

npm run build

Check Bundle Size

npm run size

📦 Installation

npm

npm install website-theme-switcher

CDN

<script src="https://unpkg.com/website-theme-switcher@latest/dist/index.js"></script>

Download

• Latest Release
• Source Code

🌟 What's New in v1.2.8

• ✅ Video Demo Restored - Auto-playing video that loops continuously to showcase theme switching
• ✅ Simple Working Demo - Reverted the working demo with beautiful UI and smooth animations
• ✅ Enhanced Styles - Comprehensive CSS with responsive design and theme-specific styling
• ✅ Updated Version Table - Complete feature comparison from v1.0.0 to v1.2.8
• ✅ Cleaner Package - Removed unused demo files while keeping essential working demos
• ✅ Video Controls - Added video controls for better user experience

🚀 Demo

Experience the theme switcher in action with our auto-playing demo video above and interactive demo below! The demos showcase:

• 🎬 Instant Theme Switching: See how themes change instantly between light and dark modes
• ✨ Smooth Transitions: Watch the beautiful animations and transitions
• 💾 localStorage Persistence: Observe how theme preferences are saved
• 📱 Responsive Design: See the theme switcher working across different screen sizes
• 🔄 Auto-Loop: The video automatically plays and loops to continuously demonstrate features

🎯 Simple Working Demo - A minimal, focused demo that demonstrates the core theme switching functionality with a beautiful UI and smooth animations.

🎬 Video Demo: The demo video above automatically plays and loops to showcase the theme switcher in action. Watch how smoothly themes transition and how the interface adapts to different themes.

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Creator: Muhammad Nazmul Ahsan
• Company: Triotrix Tech Solutions
• Live Demo: Portfolio

📞 Contact

• GitHub: mnahsanofficial/website-theme-switcher
• Company: Triotrix Tech Solutions

⭐ Star this repository if you find it helpful!