# 02 - Color Theme

<ul class="theme-swatches" v-for="(swatch, index) in palette" :key="index">
    <li class="theme-swatches-item" v-for="theme in swatch" :key="theme.name" @click="switchTheme(theme.name)">
      <label class="theme-swatches-label" :for="theme.name">
        <input class="theme-swatches-checkbox" type="checkbox" :id="theme.name" />
        <span class="theme-swatches-name">{{ theme.name }}</span>
      </label>
    </li>
  </ul>

 <vuetiful-board
    :theme="theme"
    :dark-mode="darkMode"
    :col-num="colNum"
    :row-height="rowHeight"
    :layout-editable="layoutEditable"
    :datasets="[]"
  />

switchTheme(themeName) {
  this.theme = themeName;
},