Reactive defineConfigs?

[versak]

Our app has a dark mode toggle, but some of the grid and labels don't look right when the dark & light are toggled. I tried setting reactive data but they don't seem to take effect unless you reload the page, which isn't ideal. What am I missing?

// this is working to set darkMode boolean
watch(()=>store.state.darkMode, ()=>{
   data.darkMode = store.state.darkMode;
});

const data = reactive({
    darkMode: store.state.darkMode    
})
const initialConfigs = vNG.defineConfigs({
  node: {
   label: {
      visible: true,
      color: data.darkMode ? "#fff" : "#000" // when dark mode is toggled, this value isn't updated
    }
  }
});
const configs = reactive(initialConfigs);

[versak]

The lightbulb went on as soon as I posted this, but here's how I accomplished it ....

watch(()=>store.state.darkMode, ()=>{
   data.darkMode = store.state.darkMode;
   setConfigs();
});

const data = reactive({
    darkMode: store.state.darkMode    
})
function setConfigs() {
    const initialConfigs = {
      node: {
       label: {
          visible: true,
          color: data.darkMode ? "#fff" : "#000"
        }
      }
    };
    return vNG.defineConfigs(initialConfigs);
}

then updated the confgs prop to :configs="setConfigs()"

(I was also able to toggle the view configs in the setConfigs function.)