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 enter image description here 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


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


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


  • Can you add your JS code? Is less.min.js loaded before you execute your custom code? Jul 4, 2022 at 14:32
  • No, after DOM loaded I am executing my custom js code. @MagePalExtensions Jul 6, 2022 at 4:38


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.