Can't modifyVars dynamically in Less / Nuxt.Js

Question

I'm building a web platform using Nuxt.Js and Ant as a front-end framework. I saw that it is possible to change the theme of Ant using Less and Less-loader. So I did it before the build with the following code :

antd-ui.js

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)

nuxt.config.js

...
css: [
    {
      src: 'ant-design-vue/dist/antd.less',
      lang: 'less'
    }
],
...
build: {
    transpile: [/^element-ui/],
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          // You can here change your Ant vars
        }
      },
    },
...

So it works but now I want to implement a Dark Mode so I need to modify the vars dynamically through the code like this :

component.vue

<script>
import less from 'Less'

export default {
  ...
  methods: {
    changeTheme() {
      less.modifyVars(
        ...
      )
    }
  ...
}
...

But I have the following message in the console :

Less has finished and no sheets were loaded

And nothing has changed... So if you can help me in any way, thanks in advance !

Shortstop

any updates from this? – Dolorisdolorita