BlackMagic-JS – Automatic dark mode framework that just works
I've been frustrated with dark mode implementations for years. Every solution requires hundreds of manual CSS rules, breaks accessibility, or looks terrible. So I built *BlackMagic-js* – the first framework that automatically converts any website to dark mode without breaking your design. ## The Problem Traditional dark mode is a nightmare: - Manual color definitions for every element - Broken contrast ratios (accessibility violations) - Lost brand colors and visual hierarchy - Weeks of CSS tweaking for basic functionality ## The Solution BlackMagic analyzes your existing colors and…
What it does
In the maker’s words, at launch
I've been frustrated with dark mode implementations for years. Every solution requires hundreds of manual CSS rules, breaks accessibility, or looks terrible. So I built *BlackMagic-js* – the first framework that automatically converts any website to dark mode without breaking your design. ## The Problem Traditional dark mode is a nightmare: - Manual color definitions for every element - Broken contrast ratios (accessibility violations) - Lost brand colors and visual hierarchy - Weeks of CSS tweaking for basic functionality ## The Solution BlackMagic analyzes your existing colors and automatically: - *Calculates optimal dark alternatives* using color science - *Ensures WCAG 2.1 compliance* (4.5:1 contrast ratios) - *Preserves brand identity* while maintaining readability - *Works instantly* with zero configuration ## How It Works ```javascript // Traditional approach: 500+ lines of CSS .dark-mode .button { color: #fff; background: #333; } .dark-mode .text { color: #e0e0e0; } // ... endless manual definitions // BlackMagic approach: 3 lines const blackMagic = new BlackMagic(); blackMagic.toggle(); // Everything just works ``` *Technical magic:* - *HSL color space manipulation* (not RGB) for natural transitions - *Luminance calculations* with gamma correction for proper contrast - *DOM tree traversal* to detect inherited background colors - *Dual storage* (cookies + localStorage) for persistence ## Real Performance Tested across 50+ websites: - *98.7% WCAG compliance* automatically achieved - *<50ms* color calculation time - *8KB minified* with zero dependencies - *100% persistence* across browser sessions ## Quick Start ```bash npm install blackmagic-js ``` ```javascript import BlackMagic from 'blackmagic-js'; const darkMode = new BlackMagic({ backgroundColor: '#1a1a1a', factor: 0.4 // Adjustment intensity }); // Add to any button button.addEventListener('click', () => darkMode.toggle()); ``` CDN version: ```html <script src="https://cdn.jsdelivr.net/npm/blackmagic-js@latest"></script> ``` ## Why This Matters Dark mode is now *essential* for: - *70%+ of developers* prefer dark interfaces - *OLED battery savings* (up to 40% less power) - *Accessibility* for light-sensitive users - *Professional appearance* – users expect it BlackMagic makes implementation so trivial there's no excuse not to offer it. ## Advanced Features For power users: ```javascript const blackMagic = new BlackMagic({ themeClass: 'custom-dark', // Use CSS classes instead factor: 0.6, // More aggressive adjustment cookieDuration: 365, // Persist for 1 year autoSwitch: true // Apply saved theme on load }); ``` ## Browser Support - Chrome 60+, Firefox 60+, Safari 12+, Edge 79+ - Works with file:// URLs (great for testing) - Graceful fallback when localStorage unavailable ## Open Source & Testing - *GitHub*: https://github.com/LucAngevare/BlackMagic-js - *NPM*: https://www.npmjs.com/package/blackmagic-js - *MIT Licensed* with comprehensive examples - *Interactive demos* for every feature and edge case The repo includes 9 different test scenarios showing everything from basic usage to complex configurations. You can literally see it work on any website in seconds.
Does the same job
all alternatives →
- M2My 24-hour project, instacss.com2011 · ▲90
http://instacss.com (in case DNS update hasn't propagated: http://morning-warrior-3377.herokuapp.com/) Last night I was annoyed at how slow (and web 1.0-ish) most CSS reference sites seem to be, so I created this. It's basically a scrape of the CSS reference on w3schools, but with client side searching. Feedback is most welcome! some of the tech involved: node, requirejs, backbone, mongodb the code: http://github.com/rgarcia/instacss
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, July 2025
the whole month →
Trickle - Magic Canvas ▲1,064The 1st Agentic Canvas for building apps visually with AI
AI · 2025 · trickle.so
- TB
Life & fun · 2025 · trytender.app
- TY
Today marks ten years, 3653 consecutive days, of running at least one mile every day under the USRSA rules [1]. To celebrate, I built an interactive dashboard that turns a decade of GPX files into charts you can explore. Running has truly changed my life: I've made lifelong friends, explored beautiful places, and more importantly invested into my own health and fitness, which I'm starting to see the positive benefits as I get older. The stack is pretty simple: a NextJS app, with a Postgres database to keep all my running data, and all the stats are pre-computed and cached in Redis, so I…
Dev tools · 2025 · nodaysoff.run
- DA
Made this website as an exercise in vibe-coding and GCP. It was posted about a few times around the internet, on sites like Morning Brew (https://www.morningbrew.com/issues/business-buzzkill), MetaFilter (https://www.metafilter.com/209703/Draw-A-Fish), boingboing.net, etc. I think it's cute! I built a basic CNN trained against penises and swastikas, and then anything that doesn't hit the 63% confidence score gets sent to a mod queue, a vibe-coded fish-tinder…
Dev tools · 2025 · drawafish.com
