[Dark mode] Does SpreadJS Designer support dark mode?

[Dark mode] Does SpreadJS Designer support dark mode?

Posted by: anh.pham on 16 August 2024, 12:02 am EST

• 

  anh.pham

  • Post Options:
  • Link
    Copy

  Posted 16 August 2024, 12:02 am EST - Updated 16 August 2024, 12:07 am EST

  Hi,
  
  We are working on the SpreadJS Designer in the browser’s dark mode setting, but the SpreadJS Designer does not seem to be adopting the dark theme. I would like to inquire about whether the SpreadJS Designer supports dark mode.

  Additionally, we would like to inquire about whether the SpreadJS Designer supports the WCAG 2.1 accessibility standard.
  
  We are looking forward to hearing from you soon.

  Best Regards,
  
  Marco

  

  1920×1040 63.5 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 16 August 2024, 9:26 am EST

  Hi Marco

  The feature for adding dark theme for Designer Ribbon Component is already present in the product backlog with internal tracking id SJS-10945. Currently, we don’t have an ETA for the feature.

  Regarding the WCAG 2.1 Accessibility Support, I have asked the dev team on this. The internal tracking id for the same is SJS-23162. I will let you know when there is more info on this from the dev team.

  Regards,

  Ankit

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 18 August 2024, 11:18 pm EST

  Hi,

  Regarding the SpreadJS Designer Accessibility Support (SJS-23162), the devs have mentioned that the SpreadJS Designer already supported accessibility starting with SpreadJS V16.2.0.

  Refer to the following demo on Accessibility Support: https://developer.mescius.com/spreadjs/demos/features/accessibility/introduction/purejs

  Kindly use a SpreadJS Version V16.2.0 or above (the latest being V17.1.3) and let us know if you face any issues.

  Regards,

  Ankit

• 

  anh.pham

  • Post Options:
  • Link
    Copy

  Posted 19 August 2024, 12:14 am EST - Updated 19 August 2024, 12:19 am EST

  Hi Ankit,
  
  Thanks for your response.
  
  We’ve already discussed the theme functionality. It would be ideal if the editor could also adopt the theme color. Do you have any solutions?
  
  

  

  1573×870 87.1 KB

  
  
  Best Regards,
  
  Marco

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 20 August 2024, 1:05 am EST

  Hi,

  The Editor Style is not affected by the SpreadJS Current Theme (same as Microsoft Excel). You could override the activateEditor method, get the Editor Context and then apply the style you want to apply.

  Kindly refer to the following code snippet and the below sample:

  // Override the activateEditor method
  let oldActivateEditor = GC.Spread.Sheets.CellTypes.Text.prototype.activateEditor;
  GC.Spread.Sheets.CellTypes.Text.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
      let result = oldActivateEditor.apply(this, arguments);
      let parentContainer = editorContext.parentElement.parentElement;
      // Apply Black Border Color
      parentContainer.style.border = "2px solid black";
      // Optional make the Background color as gray
      editorContext.style.backgroundColor = "gray";
      editorContext.style.color = "white";
      return result;
  }

  Sample: https://jscodemine.mescius.io/share/hqQIXyn9h0yuvnLfN7JQJg/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  ActivateEditor method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.Text#activateeditor

  Regards,

  Ankit