Description
Here is how I got it to work if it helps anyone.
css
:root{--text-color:#000;--switcher-color:rgba(0,0,0,.4);--switcher-hover-color:rgba(0,0,0,.65);--checkbox-border-color:#d9d9d9;--checkbox-background-color:#f5f5f5;--checked-color:#1890ff;--disabled-color:rgba(0,0,0,.25);--disabled-border-color:#d9d9d9;--disabled-background-color:#f5f5f5}.treejs{color:var(--text-color)}.treejs .treejs-switcher:before{border-top-color:var(--switcher-color)}.treejs .treejs-switcher:hover:before{border-top-color:var(--switcher-hover-color)}.treejs .treejs-checkbox:before{border-color:var(--checkbox-border-color)}.treejs .treejs-checkbox:hover:before{box-shadow:0 0 2px 1px var(--checked-color)}.treejs .treejs-node__checked>.treejs-checkbox:before{background-color:var(--checked-color);border-color:var(--checked-color)}.treejs .treejs-node__checked>.treejs-checkbox:after{border-color:#fff}.treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--checked-color);border-color:var(--checked-color)}.treejs .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#fff}.treejs .treejs-node__disabled{color:var(--disabled-color)}.treejs .treejs-node__disabled .treejs-checkbox:before{border-color:var(--disabled-border-color)!important;background-color:var(--disabled-background-color)!important}.treejs .treejs-node__disabled .treejs-checkbox:hover:before{box-shadow:none!important}.treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after,.treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{border-color:var(--disabled-border-color);background-color:var(--disabled-background-color)}@media (prefers-color-scheme: dark){:root{--text-color:#fff;--switcher-color:rgba(255,255,255,.4);--switcher-hover-color:rgba(255,255,255,.65);--checkbox-border-color:#555;--checkbox-background-color:#444;--checked-color:#1890ff;--disabled-color:rgba(255,255,255,.25);--disabled-border-color:#555;--disabled-background-color:#444}}
JS in loaded
`
const treeContainer = document.querySelector('.treejs');
const applyDarkMode = (isDarkMode) => {
if (isDarkMode) {
treeContainer.classList.add('treejs-dark');
} else {
treeContainer.classList.remove('treejs-dark');
}
};
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
applyDarkMode(darkModeMediaQuery.matches);
darkModeMediaQuery.addEventListener('change', (event) => {
applyDarkMode(event.matches);
});
`