[Dark mode] Does SpreadJS Designer support dark mode?

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

  • 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

  • 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

  • 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

  • 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?



    Best Regards,

    Marco

  • 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

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels