SpreadSheet Editor Dark Mode (dark document) 🌘 — companion to sdkjs PR

[j-base64]

Origin

Issue #117 pinpoints the lack of dark mode in the spreadsheet editor, unlike the document editor, which already has one.

Originally noticed on web-apps, the fix requires changes to both sdkjs and web-apps, plus optionally DocumentServer for e2e smoke tests.

Approach

This PR brings dark mode (dark document feature) to the spreadsheet editor with a simple starting approach, rather than full negative-inversion or full token-based re-theming:

SSE-DarkMode_ScreenCapture_300729.mp4

What this dark mode DOES ✅

• Define & Apply a dark mode colorset to background, text, and border color of cells left on automatic colors¹
• Honors print/print preview with an always light theme
• Sets automatic text to white on cells with an explicit dark background (see Design Notes)
• Handles:
  • Partially colored text
  • Merged and conditionally-formatted cells
  • Search-highlighted cells
  • Row/column guide color when resizing

Design notes 🌈

• To maximise compatibility of designed cells in light mode, the automatic text color of cells with an explicit background is computed the same way as in light mode. This led to a design choice: flip automatic text from black to white on darkened cells, so a user isn't surprised to set a black background on a cell and find its text invisible. However, users can override text color with an explicit color. Try it and see.
• In the future, it probably makes sense to simplify by merging the dark theme and dark document features into one sun/moon-style switch, like many modern products do.

What this dark mode DOESN'T DO ❌

• Affect inserted elements like images, shapes, charts
• Fix certain table templates that use transparent instead of white to draw "white" rows
• Rely on inverting colors of the document (negative method) or the UI color palette
• Ship on mobile

Known tradeoffs

• Equations are not supported yet (remains black), should be fixed on an update
• A cell being actively edited keeps its previous theme's colors until you click away. Prototyped a fix, reverted it, not worth the complexity for a small, self-correcting gap.

¹ Automatic color = different from explicit color (those explicitly set by the user or a table style template)

Basic manual testing

1. Create content and colorisations on a sheet
   • Type text in a few cells, set an explicit/custom text color on a whole cell, and on just some words or letters within another cell.
   • Add a border to two cells, set explicit/custom border color for one of the cells.
   • Add a predesigned table 5 cols x 5 rows.
2. Under View tab > Make sure the interface theme is Dark.
3. Switch Dark Document button to see differences.
4. In dark mode
   • Search for some text.
   • Resize a column or row. The drag guide should be visible against the dark background.
   • Open Print Preview.

Automated testing

• Proposed on DocumentServer see below, 13 smoke tests covering cell fill/border/text correction, merged cells, page-break-preview, gradient/pattern fill in the cell editor, print-preview, column-resize guide color, search-highlight contrast, mid-edit-toggle behavior, interface-theme interaction, and toolbar sync

Code

This PR spans BOTH sdkjs, web-apps, and optionally DocumentServer:

• YOU'LL NEED additionaly
  • This sdkjs PR: SpreadSheet Editor Dark Mode (dark document) 🌘 — companion to web-apps PR sdkjs#70.
• Optionally
  • This DocumentServer companion PR for e2e/smoketests: SpreadSheet Editor Dark Mode (dark document) 🌘 — e2e smoke tests DocumentServer#310.

AI assistance

• Developed with AI assistance (Claude Code, mainly claude-sonnet-5)

🌘 First PRs in the project, feedback and reviews welcome :)