# 02 - Color Theme
🎨 Apply dark mode to the entire chart.
<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;
},