change Org Chart JS css or mode programmatically

[maryammoshtoofar]

Wondering if it is possible to change orgChart mode (dark to light or vice versa) when user switches to dark mode/light mode in website. I tried to change orgchart.config.mode and then call chart.draw() but that didn't work. I also tried to save mode in sessionStorage and call chart.draw() on theme change event (my own custom event triggered manually) but that didn't work either.

Any help would be much appreciated.

[maryammoshtoofar]

Hey. Just wanted to say I found a way to make it work. I check .boc-light and boc.dark class names and add/remove them accordingly. Here is my code:

window.addEventListener("change-theme", (e) => { if (chart.element.classList.contains("boc-light")) { chart.element.classList.remove("boc-light"); chart.element.classList.add("boc-dark"); } else { chart.element.classList.add("boc-light"); chart.element.classList.remove("boc-dark"); } });

Although I still appreciate it if anyone can suggest a better solution.

[ZornitsaPesheva]

You can check how the olivia template is created with different CSS for dark and light modes: https://balkan.app/OrgChartJS/Docs/PredefinedTemplates#oliviaTemplate Click on "Get the source code of olivia" to see the below code

OrgChart.templates.olivia.defs = 
    `<style>
        #olivia_gradient {
            --color-stop-1: #ffffff;
            --color-stop-2: #eeeeee;
            --opacity-stop: 1;
        }
        .olivia-f0 {
            font-size: 18px;
            fill: #757575;
        }
        .olivia-f1 {
            font-size: 14px;
            fill: #757575;
        }
        .boc-dark .olivia-f0, .boc-dark .olivia-f1 {
            fill: #aeaeae;
        }
        .boc-dark #olivia_gradient {
            --color-stop-1: #646464;
            --color-stop-2: #363636;
            --opacity-stop: 1;
        }
    </style>
    '<linearGradient id="olivia_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="var(--color-stop-1)" stop-opacity="var(--opacity-stop)" />
        <stop offset="100%" stop-color="var(--color-stop-2)" stop-opacity="var(--opacity-stop)" />
    </linearGradient>`;