Show HN: BlackMagic-JS – Automatic dark mode framework that just works

3 months ago 4

A powerful JavaScript framework for implementing intelligent dark mode with automatic color adjustment and WCAG-compliant contrast optimization.

🎨 Smart Color Adjustment - Automatically adjusts colors while maintaining readability
♿ WCAG Compliant - Ensures 4.5:1 contrast ratio for accessibility
💾 Dual Storage - Uses both cookies and localStorage for maximum compatibility
🎭 Theme Class Support - Works with CSS-based themes or dynamic color conversion
⚙️ Highly Configurable - Multiple options for customization
⚡ Zero Dependencies - Pure JavaScript, no external libraries
🌐 Cross-Browser - Works on all modern browsers

npm install blackmagic-js

// Initialize BlackMagic const blackMagic = new BlackMagic({ cookieName: 'my-theme', backgroundColor: '#1a1a1a', factor: 0.4 }); // Add toggle functionality document.getElementById('toggleBtn').addEventListener('click', () => { blackMagic.toggle(); });

Option Type Default Description

cookieName	string	'darkmode'	Cookie name for storing theme preference
backgroundColor	string	'#000'	Dark mode background color
localStorageKey	string	'darkmode'	localStorage key for theme storage
themeClass	string	undefined	CSS class to toggle instead of dynamic colors
cookieDuration	number	365	Cookie expiration time in days
autoSwitch	boolean	true	Automatically apply saved theme on page load
factor	number	0.4	Intensity of color adjustments (0.1-0.8)

Switches between light and dark themes.

Returns the current theme ('light' or 'dark').

Applies a specific theme.

theme (string): Either 'light' or 'dark'

Returns the stored theme preference from cookies or localStorage.

const blackMagic = new BlackMagic({ themeClass: 'dark-theme', autoSwitch: true });

const blackMagic = new BlackMagic({ backgroundColor: '#2d2d2d', factor: 0.6, // More dramatic color changes cookieDuration: 30 // Remember for 30 days });

This repository includes comprehensive examples demonstrating various use cases:

Basic Example - Simple implementation
Comprehensive Test - Full feature testing with complex UI
Theme Class Mode - Using CSS classes instead of dynamic colors
Factor Testing - High/low intensity color adjustments
Settings Tests - Auto-switch, custom backgrounds, cookie duration
Debug Tools - Persistence testing and troubleshooting

# Clone the repository git clone https://github.com/LucANgevare/BlackMagic-js.git cd BlackMagic-js # Start local server npm run dev # Open examples open http://localhost:8000/examples/

BlackMagic-js/ ├── src/ │ └── blackmagic.js # Source code ├── dist/ │ ├── blackmagic.js # UMD build │ └── blackmagic.esm.js # ES Module ├── examples/ │ ├── basic/ # Basic usage examples │ ├── comprehensive/ # Full feature tests │ ├── theme-class/ # CSS class mode │ ├── factors/ # Color adjustment tests │ ├── settings/ # Configuration tests │ └── debug/ # Debug tools ├── package.json └── README.md

Intelligent Color Adjustment

BlackMagic uses advanced algorithms to:

Analyze Text Colors - Detects current text colors in the DOM
Calculate Backgrounds - Walks up the DOM tree to find actual background colors
Ensure Contrast - Calculates contrast ratios using WCAG standards
Optimize Colors - Adjusts colors to maintain 4.5:1 contrast ratio
Preserve Semantics - Keeps important UI colors (buttons, alerts) unchanged

The framework uses a dual storage approach: