o-spreadsheet icon indicating copy to clipboard operation
o-spreadsheet copied to clipboard

[IMP] spreadsheet: implement dark mode for UI

Open hokolomopo opened this issue 2 months ago • 1 comments

Description:

[IMP] spreadsheet: implement dark mode for UI

This commit implements a dark mode for spreadsheet for the whole UI, excluding the canvas and the figures.

It is mostly implemented using the light-dark() CSS function, which allows to define colors for both light and dark modes. The style color-scheme: dark/light is set on the main spreadsheet component based on its props.

Some notes/limitations:

  • the composer token colors stay the same for dark/light mode, the colors were simply a bit tweaked to look okay in both modes. Having them change based on the mode would be hard mostly because we need to sync the token colors with the highlight colors, but the highlight are drawn on the canvas, which does not support light-dark().
  • box-shadow colors were not changed for dark mode. Maybe they should be white instead of dark-gray, but they are not in odoo. That means that we have mostly invisible shadows in dark mode, and need to add a border to the popover to separate it from the background.

[REF] composer: use opacity rather than color alpha

For the dark mode, we will start using colors using light-dark() CSS variables. Those colors do not work with the toHex method.

To prepare for this change:

  • compare raw color string in content_editable_helper instead of hex value
  • use opacity style rather then changing the color alpha value

[FIX] demo: log something when catching global errors

We have a external listener listening on window.error, but we don't log anything when catching an error.

Task: 5082659

review checklist

  • [ ] feature is organized in plugin, or UI components
  • [ ] support of duplicate sheet (deep copy)
  • [ ] in model/core: ranges are Range object, and can be adapted (adaptRanges)
  • [ ] in model/UI: ranges are strings (to show the user)
  • [ ] undo-able commands (uses this.history.update)
  • [ ] multiuser-able commands (has inverse commands and transformations where needed)
  • [ ] new/updated/removed commands are documented
  • [ ] exportable in excel
  • [ ] translations (_t("qmsdf %s", abc))
  • [ ] unit tested
  • [ ] clean commented code
  • [ ] track breaking changes
  • [ ] doc is rebuild (npm run doc)
  • [ ] status is correct in Odoo

hokolomopo avatar Oct 22 '25 13:10 hokolomopo

Pull request status dashboard

robodoo avatar Oct 22 '25 13:10 robodoo

@hokolomopo @pro-odoo because this PR has multiple commits, I need to know how to merge it:

  • merge to merge directly, using the PR as merge commit message
  • rebase-merge to rebase and merge, using the PR as merge commit message
  • rebase-ff to rebase and fast-forward

robodoo avatar Nov 12 '25 10:11 robodoo

robodoo rebase-ff

pro-odoo avatar Nov 12 '25 10:11 pro-odoo

Merge method set to rebase and fast-forward.

robodoo avatar Nov 12 '25 10:11 robodoo