Skip to content

Conversation

@hokolomopo
Copy link
Contributor

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

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

Task: 5082659
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

Task: 5082659
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.

Task: 5082659
@robodoo
Copy link
Collaborator

robodoo commented Oct 22, 2025

Pull request status dashboard

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants