Javascript 如何实现无服务器端主题？

我需要从服务器端更改主题，如下所示：

useEffect(()=>{
  const themeFromServer = {
    primaryColor:'d02a02'
  }
  //refresh .less file but not refresh page(if possible)
},[])

//then, refresh .less file

@import client from './somewhere'

function getPrimaryColor = (client) =>{
    switch (client) {
        case 'A':
    return 'red'
            break;
        case 'B':
    return 'blue'
            break;
    }
    default:
    return 'black'
}

@primaryColor:getPrimaryColor();


.header {
  color: @primaryColor;
}

.less文件

@primaryColor: #000000;

.header {
  color: @primaryColor;
}

但我不知道如何刷新less文件并在less文件中更改变量。或者有没有办法在.less文件中使用javascript变量，如下所示：

useEffect(()=>{
  const themeFromServer = {
    primaryColor:'d02a02'
  }
  //refresh .less file but not refresh page(if possible)
},[])

//then, refresh .less file

@import client from './somewhere'

function getPrimaryColor = (client) =>{
    switch (client) {
        case 'A':
    return 'red'
            break;
        case 'B':
    return 'blue'
            break;
    }
    default:
    return 'black'
}

@primaryColor:getPrimaryColor();


.header {
  color: @primaryColor;
}

---

这个问题我不清楚。服务器上的文件较少。它是在服务器上还是在客户端上转换为CSS？它是如何变化的？客户端是否知道更改？@jabaa客户端中的文件较少。我想知道是否有一种方法可以动态更改jsx文件中的LESS变量？（如通过单击按钮触发），服务器向客户端发送LESS文件，客户端将其转换。现在，您想更改服务器上较少的文件并将新文件发送到客户端，对吗？这是开发系统还是生产系统？客户端转换较少的文件是不寻常的。通常，您有一个构建步骤，将较少的文件转换为CSS文件，而在生产中，您只需提供CSS文件。@jabaa我这里有一个在线演示：较少的文件位于前端项目中。我需要从服务器获取主题数据，以更改较少的变量。less文件不在服务器端。但主题配置来自服务器。