见下面的基本组成部分（和小提琴在这里：https://jsfiddle.net/j4oxths6/14/）
我正在使用Handlebars和香草HTML，CSS和Javascript。
作为我的JSON对象的一部分，存在的属性是“theme”，它可以是多个选项（总是由JSON定义，而不是用户驱动）。
如何更新下面的代码来处理各种主题选项？例如，当主题为“默认”时，main-nav应该是淡粉色，但当主题为“暗”时，它将是黑色？
有没有一个干净简单的方法来更新CSS类，以基于我假设的变量？

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

const data = {
  "direction": "ltr",
  "theme": "default",
  "skinnyBannerItems": [
    {
      "label": "Option 1",
      "url": ""
    },
    {
      "label": "Option 2",
      "url": ""
    },
    {
      "label": "Option 3",
      "url": ""
    },
    {
      "label": "Option 4",
      "url": ""
    }
  ],
  "navigationItems": [
    {
      "label": "Option 5",
      "url": ""
    },
    {
      "label": "Option 6",
      "url": ""
    },
    {
      "label": "Option 7",
      "url": ""
    },
    {
      "label": "Option 8",
      "url": ""
    },
    {
      "label": "Option 9",
      "url": ""
    }
  ]

};

const output = template(data);

console.log(output);
document.body.innerHTML = output;

body {
  margin: 0;
}

.skinny-banner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  
  height: 40px;
  padding-right: 40px;
  background-color: green;
}

.skinny-nav-menu{
  display: flex;
  list-style: none;
  gap: 20px;
}

.skinny-nav-menu li a {
  color: white;
  text-decoration: none;
}

.main-nav {
  display: flex;
  align-items: center;
  
  min-height: 115px;
  background-color: lightpink;
}

.nav-menu{
  display: flex;
  list-style: none;
  gap: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" type="text/javascript"></script>

<script id="Template" type="text/template">
<div class="nav-container">
    <div class="skinny-banner">
    <ul class="skinny-nav-menu">
      {{#each this.skinnyBannerItems}}
      <li><a href="{{url}}">{{label}}</a></li>
      {{/each}}
    </ul>
  </div>
  <div class="main-nav">
    <ul
        class="nav-menu"
     >
        {{#each this.navigationItems}}
        <li><a href="{{url}}">{{label}}</a></li>
        {{/each}}
      </ul>
  </div>
</div>
 
</script>