odoo · hokolomopo · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/.husky/css_check.js b/.husky/css_check.js
@@ -21,7 +21,7 @@ for (const file of files) {
   content = content.replace(commentPattern, "");
   // look for first level selectors
   const firstLevelSelectors = content.match(firstLevelSelectorPattern) || [];
-  if (!firstLevelSelectors.every((line) => line.startsWith(".o-spreadsheet "))) {
+  if (!firstLevelSelectors.every((line) => line.startsWith(".o-spreadsheet ") || line.startsWith(".o-spreadsheet."))) {
     faultyFiles.push(file);
   }
 }
@@ -38,7 +38,7 @@ Every css selector should be encompassed within .o-spreadsheet. For example:
 .o-spreadsheet {
     ...
 }
-or 
+or
 .o-spreadsheet .foo {
     ...
 }

diff --git a/demo/main.js b/demo/main.js
@@ -70,7 +70,7 @@ let start;
 
 class Demo extends Component {
   setup() {
-    this.state = useState({ key: 0, displayHeader: false });
+    this.state = useState({ key: 0, displayHeader: false, colorScheme: "light" });
     this.stateUpdateMessages = [];
     this.client = {
       id: uuidGenerator.uuidv4(),
@@ -108,6 +108,15 @@ class Demo extends Component {
       icon: "o-spreadsheet-Icon.OPEN_DASHBOARD",
     });
 
+    topbarMenuRegistry.addChild("dark_mode", ["file"], {
+      name: "Toggle dark mode",
+      sequence: 12.5,
+      isReadonlyAllowed: true,
+      execute: () =>
+        (this.state.colorScheme = this.state.colorScheme === "dark" ? "light" : "dark"),
+      icon: "o-spreadsheet-Icon.DARK_MODE",
+    });
+
     topbarMenuRegistry.addChild("read_write", ["file"], {
       name: "Open with write access",
       sequence: 13,
@@ -215,7 +224,10 @@ class Demo extends Component {
 
     useExternalListener(window, "beforeunload", this.leaveCollaborativeSession.bind(this));
     useExternalListener(window, "unhandledrejection", this.notifyError.bind(this));
-    useExternalListener(window, "error", this.notifyError.bind(this));
+    useExternalListener(window, "error", (ev) => {
+      console.error("Global error caught: ", ev.error || ev.message);
+      this.notifyError();
+    });
 
     onWillStart(() => this.initiateConnection());
 
@@ -331,11 +343,11 @@ Demo.template = xml/* xml */ `
   <div t-if="state.displayHeader" class="d-flex flex flex-column justify-content">
     <div class="p-3 border-bottom">A header</div>
     <div class="flex-fill" style="height: 100dvh !important;width: 100dvw !important;">
-      <Spreadsheet model="model" notifyUser="notifyUser" t-key="state.key"/>
+      <Spreadsheet model="model" notifyUser="notifyUser" colorScheme="state.colorScheme" t-key="state.key"/>
     </div>
   </div>
   <div t-else="" style="height: 100dvh !important;width: 100dvw !important;">
-    <Spreadsheet model="model" t-key="state.key" notifyUser="notifyUser"/>
+    <Spreadsheet model="model" t-key="state.key" notifyUser="notifyUser" colorScheme="state.colorScheme"/>
   </div>
 `;
 Demo.components = { Spreadsheet };

diff --git a/packages/o-spreadsheet-engine/src/constants.ts b/packages/o-spreadsheet-engine/src/constants.ts
@@ -277,7 +277,7 @@ export const DEFAULT_CAROUSEL_TITLE_STYLE: ChartStyle = {
   color: TEXT_BODY,
 };
 
-export const DEFAULT_TOKEN_COLOR: Color = "#000000";
+export const DEFAULT_TOKEN_COLOR: Color = "light-dark(#000000, #ffffff)";
 const functionColor = DEFAULT_TOKEN_COLOR;
 const operatorColor = "#3da4ab";
 

diff --git a/packages/o-spreadsheet-engine/src/helpers/color.ts b/packages/o-spreadsheet-engine/src/helpers/color.ts
@@ -15,12 +15,10 @@ export const colors = [
   "#00a3a3",
   "#f012be",
   "#3d9970",
-  "#111111",
   "#62A300",
   "#ff4136",
   "#949494",
-  "#85144b",
-  "#001f3f",
+  "#ff5c9d",
 ];
 
 /*

diff --git a/src/components/border_editor/border_editor.css b/src/components/border_editor/border_editor.css
@@ -1,7 +1,6 @@
 .o-spreadsheet {
   .o-border-selector {
     padding: 4px;
-    background-color: white;
 
     .o-divider {
       border-right: 1px solid var(--os-gray-300);
@@ -30,27 +29,26 @@
   }
 
   .o-border-style-dropdown {
-    background: #ffffff;
     padding: 4px;
     .o-style-preview {
       margin: 7px 5px 7px 5px;
       width: 60px;
       height: 5px;
     }
     .o-style-thin {
-      border-bottom: 1px solid #000000;
+      border-bottom: 1px solid var(--os-black);
     }
     .o-style-medium {
-      border-bottom: 2px solid #000000;
+      border-bottom: 2px solid var(--os-black);
     }
     .o-style-thick {
-      border-bottom: 3px solid #000000;
+      border-bottom: 3px solid var(--os-black);
     }
     .o-style-dashed {
-      border-bottom: 1px dashed #000000;
+      border-bottom: 1px dashed var(--os-black);
     }
     .o-style-dotted {
-      border-bottom: 1px dotted #000000;
+      border-bottom: 1px dotted var(--os-black);
     }
     .o-dropdown-border-type {
       cursor: pointer;

diff --git a/src/components/border_editor/border_editor.xml b/src/components/border_editor/border_editor.xml
@@ -3,7 +3,7 @@
     <t t-set="border_color">Border Color</t>
     <Popover t-props="popoverProps">
       <div
-        class="d-flex o-border-selector"
+        class="d-flex o-border-selector bg-white"
         t-on-click.stop=""
         t-att-class="props.class ? props.class : ''">
         <div class="o-border-selector-section">
@@ -52,7 +52,7 @@
             <Popover
               t-props="lineStylePickerPopoverProps"
               t-if="state.activeTool === 'borderTypeTool'">
-              <div class="o-border-style-dropdown">
+              <div class="o-border-style-dropdown bg-white">
                 <t t-foreach="borderStyles" t-as="borderStyle" t-key="borderStyle">
                   <div
                     t-att-title="borderStyle"

diff --git a/src/components/bottom_bar/bottom_bar.css b/src/components/bottom_bar/bottom_bar.css
@@ -8,7 +8,7 @@
     .o-sheet-item {
       cursor: pointer;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: var(--os-background-gray-color-hover);
       }
     }
 

diff --git a/src/components/bottom_bar/bottom_bar_sheet/bottom_bar_sheet.css b/src/components/bottom_bar/bottom_bar_sheet/bottom_bar_sheet.css
@@ -8,20 +8,20 @@
     margin-left: -1px;
     cursor: pointer;
     &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
+      background-color: var(--os-background-gray-color-hover);
     }
 
     &.active {
       color: var(--os-action-color);
-      background-color: #ffffff;
+      background-color: var(--os-active-sheet-bg);
       box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
     }
 
     .o-sheet-icon {
       z-index: 1;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: var(--os-background-gray-color-hover);
       }
     }
 

diff --git a/src/components/bottom_bar/bottom_bar_statistic/bottom_bar_statistic.css b/src/components/bottom_bar/bottom_bar_statistic/bottom_bar_statistic.css
@@ -4,7 +4,7 @@
     padding: 4px 4px 4px 8px;
     cursor: pointer;
     &:hover {
-      background-color: rgba(0, 0, 0, 0.08) !important;
+      background-color: var(--os-background-gray-color-hover) !important;
     }
   }
 }
diff --git a/src/components/color_picker/color_picker.css b/src/components/color_picker/color_picker.css
@@ -3,7 +3,6 @@
     padding: var(--os-picker-padding) 0;
     /* FIXME: this is useless, overiden by the popover container */
     box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
     line-height: 1.2;
     overflow-y: auto;
     overflow-x: hidden;
@@ -40,9 +39,8 @@
       border: var(--os-item-border-width) solid var(--os-gray-600);
       padding: 0px;
       font-size: 16px;
-      background: white;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: var(--os-background-gray-color-hover);
         outline: 1px solid var(--os-gray-500);
         cursor: pointer;
       }
@@ -55,20 +53,20 @@
         width: 100%;
         padding: 5px;
         font-size: 14px;
-        background: white;
+        background-color: var(--os-white-bg);
         border-radius: 4px;
         &:hover:enabled {
-          background-color: rgba(0, 0, 0, 0.08);
+          background-color: var(--os-background-gray-color-hover);
         }
       }
     }
     .o-add-button {
       border: var(--os-item-border-width) solid var(--os-gray-300);
       padding: 4px;
-      background: white;
+      background-color: var(--os-white-bg);
       border-radius: 4px;
       &:hover:enabled {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: var(--os-background-gray-color-hover);
       }
     }
     .o-separator {
@@ -92,13 +90,13 @@
         height: var(--os-magnifier-edge);
         width: var(--os-magnifier-edge);
         border-radius: 50%;
-        border: 2px solid #fff;
+        border: 2px solid var(--os-white);
         box-shadow: 0px 0px 3px var(--os-gray-300);
         position: absolute;
         z-index: 2;
       }
       .saturation {
-        background: linear-gradient(to right, #fff 0%, transparent 100%);
+        background: linear-gradient(to right, var(--os-white) 0%, transparent 100%);
       }
       .lightness {
         background: linear-gradient(to top, #000 0%, transparent 100%);

diff --git a/src/components/color_picker/color_picker.xml b/src/components/color_picker/color_picker.xml
@@ -1,7 +1,7 @@
 <templates>
   <t t-name="o-spreadsheet-ColorPicker">
     <Popover t-props="popoverProps">
-      <div class="o-color-picker" t-on-click.stop="" t-att-style="colorPickerStyle">
+      <div class="o-color-picker bg-white" t-on-click.stop="" t-att-style="colorPickerStyle">
         <div class="o-color-picker-section-name">Standard</div>
         <div class="colors-grid">
           <div
@@ -27,7 +27,7 @@
           <span>Custom</span>
         </div>
         <div class="colors-grid o-color-picker-toggler" t-on-click.stop="toggleColorPicker">
-          <div class="o-color-picker-line-item o-color-picker-toggler-button">
+          <div class="o-color-picker-line-item bg-white o-color-picker-toggler-button">
             <div class="o-color-picker-toggler-sign">
               <t t-call="o-spreadsheet-Icon.PLUS"/>
             </div>

diff --git a/src/components/color_picker/color_picker_widget.css b/src/components/color_picker/color_picker_widget.css
@@ -14,7 +14,7 @@
       border-radius: 2px;
       cursor: pointer;
       &:not([disabled]):hover {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: var(--os-background-gray-color-hover);
       }
     }
 

diff --git a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css
@@ -2,7 +2,6 @@
   .o-autocomplete-dropdown {
     pointer-events: auto;
     cursor: pointer;
-    background-color: #fff;
     max-width: 400px;
     z-index: 1;
     .o-autocomplete-value-focus {

diff --git a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.ts b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.ts
@@ -36,7 +36,7 @@ export class TextValueProvider extends Component<Props> {
 
   getCss(html: HtmlContent) {
     return cssPropertiesToCss({
-      color: html.color || "#000000",
+      color: html.color,
       background: html.backgroundColor,
     });
   }

diff --git a/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.xml b/src/components/composer/autocomplete_dropdown/autocomplete_dropdown.xml
@@ -3,7 +3,7 @@
     <div
       t-ref="autoCompleteList"
       t-att-class="{
-          'o-autocomplete-dropdown': props.proposals.length}">
+          'o-autocomplete-dropdown bg-white': props.proposals.length}">
       <t t-foreach="props.proposals" t-as="proposal" t-key="proposal.text + proposal_index">
         <div
           class="d-flex flex-column text-start"

diff --git a/src/components/composer/composer/composer.css b/src/components/composer/composer/composer.css
@@ -6,7 +6,7 @@
       word-break: break-all;
       padding-right: 2px;
 
-      caret-color: black;
+      caret-color: var(--os-black);
       padding-left: 3px;
       padding-right: 3px;
       outline: none;
@@ -74,5 +74,12 @@
         font-weight: 600 !important;
       }
     }
+
+    /* ADRM TODO: sucks in light mode. Change that */
+    .o-composer-assistant-container {
+      .fa-times-circle {
+        color: var(--os-primary-button-bg);
+      }
+    }
   }
 }
diff --git a/src/components/composer/composer/composer.ts b/src/components/composer/composer/composer.ts
@@ -1,6 +1,6 @@
 import { NEWLINE, SCROLLBAR_WIDTH } from "@odoo/o-spreadsheet-engine/constants";
 import { Component, onMounted, onWillUnmount, useEffect, useRef, useState } from "@odoo/owl";
-import { debounce, deepEquals, isFormula, setColorAlpha } from "../../../helpers/index";
+import { debounce, deepEquals, isFormula } from "../../../helpers/index";
 
 import { cssPropertiesToCss } from "@odoo/o-spreadsheet-engine/components/helpers/css";
 import { DEFAULT_TOKEN_COLOR } from "@odoo/o-spreadsheet-engine/constants";
@@ -43,6 +43,7 @@ export type HtmlContent = {
   onHover?: (rect: Rect) => void;
   onStopHover?: () => void;
   color?: Color;
+  opacity?: number;
   backgroundColor?: Color;
   classes?: string[];
 };
@@ -635,10 +636,6 @@ export class Composer extends Component<CellComposerProps, SpreadsheetChildEnv>
     const { end, start } = this.props.composerStore.composerSelection;
     for (let index = 0; index < tokens.length; index++) {
       const token = tokens[index];
-      let color = token.color || DEFAULT_TOKEN_COLOR;
-      if (token.isBlurred) {
-        color = setColorAlpha(color, 0.5);
-      }
       const classes: string[] = [];
       if (
         token.type === "REFERENCE" &&
@@ -662,7 +659,8 @@ export class Composer extends Component<CellComposerProps, SpreadsheetChildEnv>
 
       result.push({
         value: token.value,
-        color,
+        color: token.color || DEFAULT_TOKEN_COLOR,
+        opacity: token.isBlurred ? 0.5 : 1,
         classes,
         onHover: (rect) => this.onTokenHover(index, rect),
         onStopHover: () => this.onTokenHover(undefined),

diff --git a/src/components/composer/composer/composer.xml b/src/components/composer/composer/composer.xml
@@ -60,7 +60,7 @@
           t-on-click="closeAssistant"
           class="fa-stack position-absolute top-0 start-100 translate-middle fs-4">
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-times-circle fa-stack-1x text-muted"/>
+          <i class="fa fa-times-circle fa-stack-1x"/>
         </span>
         <div class="o-composer-assistant overflow-auto" t-att-style="assistantStyle">
           <FunctionDescriptionProvider