The world's first truly automatic dark mode framework. Zero configuration, perfect accessibility, works everywhere.
Works instantly out of the box. No CSS variables, no manual color definitions. Just import and toggle.
Automatically ensures 4.5:1 contrast ratios for all text elements. Perfect accessibility without the work.
Uses advanced color science to maintain brand identity and visual hierarchy in dark mode.
Color calculations complete in under 50ms. 8KB minified with zero dependencies.
Dual storage system (cookies + localStorage) ensures theme preferences never get lost.
Works with any website, framework, or CMS. Chrome 60+, Firefox 60+, Safari 12+, Edge 79+.
/* Manual color definitions for everything */
.dark-mode .button {
color: #ffffff;
background: #333333;
}
.dark-mode .text {
color: #e0e0e0;
}
.dark-mode .card {
background: #2a2a2a;
border: 1px solid #444444;
}
.dark-mode .link {
color: #60a5fa;
}
/* ...hundreds more lines... */
/* Still breaks accessibility */
/* Still looks terrible */// Everything just works
const blackMagic = new BlackMagic();
// Toggle between themes
blackMagic.toggle();
// That's it!
// ✅ Perfect contrast ratios
// ✅ Preserved brand colors
// ✅ No CSS needed
// ✅ Works everywhereClick the buttons below to see BlackMagic.js in action. Notice how all colors automatically adjust while maintaining perfect readability.
This is what your website looks like with BlackMagic.js. Notice how all text remains perfectly readable while maintaining the visual hierarchy and brand colors.
Cards and containers automatically get proper backgrounds and borders that work in both light and dark modes.
Link with preserved brand color# Install via NPM
npm install blackmagic-js
# Import and use
import BlackMagic from 'blackmagic-js';
const darkMode = new BlackMagic({
backgroundColor: '#1a1a1a',
factor: 0.4
});
// Add to any button
button.addEventListener('click', () => {
darkMode.toggle();
});<!-- Include via CDN -->
<script src="https://cdn.jsdelivr.net/npm/blackmagic-js@latest"></script>
<script>
// Initialize
const blackMagic = new BlackMagic();
// Add to toggle button
document.getElementById('toggle')
.addEventListener('click', () => {
blackMagic.toggle();
});
</script>