🌓 Website Theme Switcher

A lightweight, framework-agnostic theme switcher that works seamlessly with Tailwind CSS, Bootstrap, or any CSS framework. Switch between light and dark themes with a simple toggle button.

✨ 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.3

• ✅ Working Theme Switcher Demo - simple-working-demo.html with self-contained, fully functional theme switcher
• ✅ Improved Toggle Functionality - Enhanced data-toggle-theme attribute detection and theme switching
• ✅ Self-Contained Demo - Created demo that works without external dependencies
• ✅ Fixed Toggle Button - Resolved issue where toggle buttons were not switching themes
• ✅ Enhanced Package - Better toggle button detection and theme switching logic

🎯 Demo

Test the working theme switcher:

• Local Demo: demo/simple-working-demo.html (fully functional)
• Package Demo: demo/package-demo.html (uses npm package)

🤝 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!