Christian Sass
c10cf59e67
Otter's web app ships no dark mode, and heavy users read transcripts for hours at night. This proposes three shades rather than one, so the choice survives changing lighting instead of being wrong half the day. Contents: - otter-dark.css token set, one block per tier, scoped to :root[data-theme] - preview.html self-contained demo, no build, no network - PREVIEW.png rendered screenshot of the demo - userscript/ Tampermonkey stopgap that works today Contrast figures in the README are measured from the token values with the WCAG 2.1 formula, not estimated. The notable finding is that Otter's brand blue #0b57d0 fails as accent text on every dark surface (2.59:1 to 3.29:1) while remaining correct as a solid fill (6.39:1), so the tokens split accent from accent-fill. MIT licensed. No affiliation with AISense Inc. Co-authored-by: CLU <clu@binaryranch.com>
1.8 KiB
1.8 KiB
Provenance
Developed and first published: 2026-10-27 by Christian Sass, Binary Ranch.
This repository is the public record of the work: the three-tier dark theme design, the measured contrast analysis, and the working userscript were built on this date, before the proposal was sent to Otter.ai. The git history and the file digests below are the evidence.
What this claims
- The three-tier structure (Midnight / Dusk / Slate) as applied to a meeting-transcript product, with contrast held roughly constant across surface lightness.
- The split between
--ot-accent(text-safe accent) and--ot-accent-fill(solid button fill) as the resolution of a brand colour that fails contrast on dark surfaces. - The userscript technique of a shade-parameterised invert with an exact analytic inverse applied to media elements, so photographs keep their true colour.
What this does not claim
No affiliation with, endorsement by, or access to the internal codebase of Otter.ai (AISense Inc.). This is an independent design proposal offered publicly, under the MIT licence, in the hope that it is useful.
File digests (SHA-256)
| File | SHA-256 |
|---|---|
README.md |
859bc3ba8215ce1045da55266bb5c7bb75a04d61f8a1183db97bd8c0f5b0e11f |
LICENSE |
fa7a1b8b7526dbd4e866fef2f6b046ef7f24df004e4a3bb860730537b9e0ba1c |
otter-dark.css |
e584729f7770bb2729cbfdce570e60f0fb75abd7a91eab60f4d7b72607878266 |
preview.html |
94b8fd8ce7f1189fd6d79f63ab04f25b64f34382b9e8f856536459b4a8358a78 |
preview.png |
f93e9a370b0049be794480066e756404241cbd64cd3a5a368bb52718de1aeb4b |
userscript/otter-dark-mode.user.js |
af90dc3d5b174f174353a28de8054a92550cc9f1f043cafb6521d4be8962693d |
Reproduce with:
sha256sum README.md LICENSE otter-dark.css preview.html preview.png userscript/otter-dark-mode.user.js