Two whole categories of colored elements had no dark: variant at all,
so they rendered as glaring white boxes or invisible near-black text
against the dark background:
- Native <input>/<select> elements with no explicit bg-* class at all
(just relied on the browser's default white background) - search bar,
login/reset password fields, share/download link fields, mover search,
change-password fields. The first class-sweep only added dark: variants
next to *existing* color classes, so these were invisible to it.
- Hardcoded hex colors (text-[#212b36], text-[#637381], text-[#919eab],
bg-[#f6f5fd], bg-[#ebe9f9], bg-[#F4F4F6]) used as arbitrary Tailwind
values across headings, file list details, and the login/reset pages -
same blind spot, since the sweep only searched for known class names.
Mapped each to the same dark palette already used elsewhere (gray-900/800/700
surfaces, gray-100/300/400 text) for consistency.
Dark mode: CSS custom properties + .dark class toggled via Redux/localStorage,
with a theme toggle in the Header and Settings page. Foundation didn't exist
yet despite prior assumption, so it was built from scratch.
SQLite: new DB_ENGINE=mongo|sqlite env var selects the metadata backend at
runtime (Mongo stays default, no behavior change unless opted in). File/thumbnail
bytes continue to use the existing fs/S3 storage path. Implemented via a shared
DB interface (dbTypes.ts) with parallel mongoDB/ and sqliteDB/ implementations,
selected through dbFactory.ts, with JWT/encryption logic extracted into
userCrypto.ts so both engines share it.
oxmc
subnub