🌙 BlackMagic Framework

Basic Implementation Example

Welcome to BlackMagic

This is a basic example showing how to implement the BlackMagic dark mode framework with just a few lines of code.

📋 How to Test

  1. Click the "Toggle Dark Mode" button above
  2. Notice how all colors automatically adjust
  3. Refresh the page - your preference is saved!
  4. Test with different content and see the smart color adjustments

🎨 Smart Color Adjustment

Automatically adjusts text and background colors while maintaining optimal contrast ratios for accessibility.

💾 Persistent Storage

Uses both cookies and localStorage to remember user preferences across browser sessions.

⚡ Zero Dependencies

Pure JavaScript with no external dependencies. Lightweight and fast loading.

♿ WCAG Compliant

Ensures 4.5:1 contrast ratio compliance for accessibility standards.

// Basic Implementation
const blackMagic = new BlackMagic({
    cookieName: 'my-theme',
    backgroundColor: '#1a1a1a',
    factor: 0.4,
    cookieDuration: 30
});

// Add toggle functionality
document.getElementById('toggleBtn').addEventListener('click', () => {
    blackMagic.toggle();
});

Configuration Options

The BlackMagic framework offers multiple configuration options: