How to change the LESS variables using javascript based on the admin side configurations?

Question

I am Naveen raj, and I am a new Magento 2 so I don't know how to use the color values inside the less which I got from the admin side. I got value from the admin side and am trying to set that value to my theme custom variables here https://codepen.io/navikailas/pen/mdPKBvg I got some idea but I have tried this also and getting an error on console so can anyone help me to achieve this or suggest to me a proper method to use the dynamic .less variables inside the custom less file on /design

file path:

app/design/frontend/Vendor_name/theme_name/web/js app/design/frontend/Vendor_name/theme_name/web/requirejs-config.js

custom.js

require(["jquery", "less"], function ($, less) {
  $(document).ready(function () {
     less.modifyVars({ "primary-color": window.primaryColor });
     less.refreshStyles();
  });
});

requirejs-config.js

var config = {
 deps: ["js/custom"],
 paths: {
   swiper: "js/swiper.min",
   less: "js/less.min",
 },
 shim: {
   swiper: {
     deps: ["jquery"],
   },
   less: {
     deps: ["jquery"],
   },
 },

};