基于JSON主题值为组件添加CSS类的技术实现咨询

我正在用Handlebars、原生HTML/CSS/JS开发导航组件，后端返回的JSON数据里包含theme属性（非用户控制），有多种主题选项。需要改造代码实现主题切换：当theme为default时，.main-nav背景色为lightpink；为dark时为黑色。想找简洁的方式基于变量更新CSS类。

最简洁方案：Handlebars直接绑定主题类 #

利用Handlebars的变量插值功能，直接在模板中把theme变量作为类名追加，配合CSS类选择器实现样式切换，这是最适配后端驱动场景的方式：

1. 修改Handlebars模板
   在.main-nav元素上追加theme-{{this.theme}}类：

<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 theme-{{this.theme}}">
    <ul class="nav-menu">
        {{#each this.navigationItems}}
        <li><a href="{{url}}">{{label}}</a></li>
        {{/each}}
      </ul>
  </div>
</div>
</script>

2. 更新CSS样式
   保留.main-nav基础布局样式，针对不同主题类编写背景色规则：

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;
}

/* default主题样式 */
.main-nav.theme-default {
  background-color: lightpink;
}

/* dark主题样式 */
.main-nav.theme-dark {
  background-color: black;
}

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

渲染后，当theme为default时，元素会自动生成<div class="main-nav theme-default">，对应lightpink背景；theme为dark时则生成<div class="main-nav theme-dark">，对应黑色背景。

备选方案：条件判断类（复杂场景适用） #

如果需要针对主题添加额外逻辑（比如多类名组合），可以用Handlebars的条件助手：

<div class="main-nav {{#if this.theme '===' 'default'}}theme-default{{else if this.theme '===' 'dark'}}theme-dark{{/if}}">

CSS部分和上述方案一致，适合需要分支判断的场景。

备选方案：JS动态添加类（非模板层面） #

如果不想修改模板，也可以在渲染完成后通过JS动态追加类：

const output = template(data);
document.body.innerHTML = output;

// 渲染后添加主题类
document.querySelector('.main-nav').classList.add(`theme-${data.theme}`);

CSS同样和最简洁方案保持一致。

内容的提问来源于stack exchange，提问作者cts