materialize-dark-compare

English · 中文 · 日本語

A tool to compare multiple Materialize 1.0.0 dark-mode CSS overlays side by side. The same set of Materialize components renders in isolated iframes, each with a different overlay, so you can eyeball the differences — plus a computed-color diff panel that lists how each component renders across overlays.

Part of the nodeapp WebApp family.

Features

• Side-by-side panes — each pane has a dropdown to pick an overlay (or native Materialize); add / remove columns.
• Isolated rendering — each overlay loads in its own iframe (materialize.css + overlay + a shared component gallery), so overlays never clash.
• Light / dark toggle for the previewed gallery, plus synced scrolling.
• Computed-color diff — probes ~27 components/properties in each pane and highlights where the computed colors differ (yellow), with color swatches.
• Drop-in themes — put any .css into public/apps/materialize-dark-compare/themes/ and it appears in the pickers (auto-listed via the API).

Quick start

Requires Node.js 18+.

npm install
npm start   # → http://localhost:3000/apps/materialize-dark-compare/

Override the port with PORT=8080 npm start.

Project structure

materialize-dark-compare/
├─ app.js                              # Express entry: static + API + redirect; port 3000
├─ routes/materialize-dark-compare.js  # GET /api/materialize-dark-compare/themes
└─ public/apps/materialize-dark-compare/
   ├─ index.html                       # control bar + comparison panes + diff panel
   ├─ materialize-dark-compare.css     # the tool's own (dark) chrome
   ├─ materialize-dark-compare.js      # controller (DOM glue)
   ├─ materialize-dark-compare-lib.js  # pure core (probes, diff logic) → window.MdCompareLib
   ├─ gallery.html                     # shared Materialize component showcase (?css= & ?mode=)
   └─ themes/                          # the dark overlays being compared

API

Method	Path	Description
GET	/api/materialize-dark-compare/themes	List the .css overlays under themes/ as { ok, files }

Notes — deliberate deviations from the family canon

This is a developer utility; two family conventions are intentionally skipped:

• No i18n — UI is Chinese-only (the content is English CSS / component names; trilingual probe labels add little value).
• Dark-only chrome, no side-tool — the tool's chrome is a fixed-dark control bar, not the family's light/dark toggle + side-tool FAB, because the meaningful light/dark toggle here applies to the previewed gallery, not the chrome.

License

MIT © 2026 Scott G.F. Hong