Explore real-world examples of BlackMagic.js in action. Each example demonstrates different features and use cases.
This is a sample website that demonstrates how BlackMagic.js automatically adjusts colors for perfect dark mode. Notice how all elements mastertain proper contrast and readability.
Cards and containers automatically get proper backgrounds and borders that work in both light and dark modes.
<!-- Include BlackMagic -->
<script src="https://cdn.jsdelivr.net/npm/blackmagic-js@latest"></script>
<script>
// Initialize BlackMagic
const blackMagic = new BlackMagic();
// Add to any button
document.getElementById('darkToggle')
.addEventListener('click', () => {
blackMagic.toggle();
});
</script>// Custom configuration
const blackMagic = new BlackMagic({
backgroundColor: '#1a1a2e', // Custom dark background
factor: 0.6, // More aggressive adjustment
themeClass: 'dark-theme', // Use CSS classes
cookieDuration: 365, // Persist for 1 year
autoSwitch: true // Apply saved theme on load
});
// Check current theme
console.log(blackMagic.getCurrentTheme());
// Apply specific theme
blackMagic.applyTheme('dark');