添加功能以根据 JSON 对象的值添加 CSS 类 - 颜色主题

Question

请参阅下面的基本组件（并在此处小提琴：https://jsfiddle.net/j4oxths6/14/）

我正在使用 Handlebars 和普通的 HTML、CSS 和 Javascript。

作为我的 JSON 对象的一部分，存在的属性是“主题”，它可以是多个选项（总是由 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>

Answer 1

在父级 上添加一个类似于 theme-{{theme}} 的变量。这将动态添加新类，如 theme-dark、theme-default 等。

<div class="nav-container theme-{{theme}}">

然后在您的 CSS 中，您可以引用这些类和主导航子项。

.theme-default .main-nav{
    background-color: lightpink;
}

.theme-dark .main-nav{
    background-color: black;
}

您可以根据需要轻松扩展它，加上将主题附加到父项，您可以随时根据需要更改子项，而不仅仅是主导航。

Answer 2

你可以为此使用 css 变量。在

:root

中添加css变量like

:root {
  --bg: black;
}

...

.main-nav {
  display: flex;
  align-items: center;
  
  min-height: 115px;
  background-color: var(--bg);
}
...

检查数据中的主题并更新 css 变量，像这样

if(data.theme == "default") {
document.documentElement.style.setProperty('--bg', 'lightpink');
} else {
document.documentElement.style.setProperty('--bg', 'black');
}