在 Styled Mode 內有帶到客製主題的設定方法，今日來彙整下在實務上有使用到的主題設定。

definePreset

在安裝 PrimeVue 後，使用 definePreset 可自定義主題，針對 Aura 主題有更進一步的客製設定。

import PrimeVue from 'primevue/config';
import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';

const MyPreset = definePreset(Aura, {
    // 將客製化樣式設定於此
});

app.use(PrimeVue, {
    theme: {
        preset: MyPreset
    }
 });

usePreset

除了 Aura 之外，PrimeVue 也有提供 Lara 主題，在使用上有更多元的選擇，以下範例說明如何透過 usePreset 自由切換兩種主題。

1. 頁面上採用 SelectButton 元件進行主題切換。
2. 引入 Aura 及 Lara 主題。
3. 在 SelectButton 加上事件，被選到的主題會透過 usePreset 套用。

// Home.vue
<script>
// 改變主題
import { usePreset } from '@primevue/themes'
import Aura from '@primevue/themes/aura'
import Lara from '@primevue/themes/lara'
const themeValue = ref('Aura') 
const options = ref(['Aura', 'Lara'])
const changeTheme = () => {
  usePreset(themeValue.value === 'Aura' ? Aura : Lara)
}
</script>

<template>
  <main>
    <SelectButton
      v-model="themeValue"
      :options="options"
      aria-labelledby="basic"
      @update:modelValue="changeTheme"
      class="mb-4"
    />
  </main>
</template>

Aura 主題套用效果：

Lara 主題套用效果：

updatePreset

在 styled mode 一篇中提及設定客製的主題色，若不須客製主題，可採用 primeVue 提供的 Aura 主題，該主題內有包含多種顏色可套用及更換。

官方文件中的 updatePreset 使用在色彩切換時，將顏色帶入如下位置：

import { updatePreset } from '@primevue/themes';

const changePrimaryColor() {
    updatePreset({
        semantic: {
            primary: {
                50: '{indigo.50}',
                100: '{indigo.100}',
                200: '{indigo.200}',
                300: '{indigo.300}',
                400: '{indigo.400}',
                500: '{indigo.500}',
                600: '{indigo.600}',
                700: '{indigo.700}',
                800: '{indigo.800}',
                900: '{indigo.900}',
                950: '{indigo.950}'
            }
        }
    })
}

若要針對不同的色彩進行動態切換，可將以上色彩名稱作為變數，在點擊不同按鈕時將對應的色彩名稱帶入。

以下範例使用 Knob 元件展示不同色彩切換時的狀態：

<script setup>
import { ref } from 'vue'

// 改變色彩
import { updatePreset } from '@primevue/themes'
const knobValue = ref(60)
const changePrimaryColor = (color) => {
  updatePreset({
    semantic: {
      primary: {
        50: `{${color}.50}`,
        100: `{${color}.100}`,
        200: `{${color}.200}`,
        300: `{${color}.300}`,
        400: `{${color}.400}`,
        500: `{${color}.500}`,
        600: `{${color}.600}`,
        700: `{${color}.700}`,
        800: `{${color}.800}`,
        900: `{${color}.900}`,
        950: `{${color}.950}`
      }
    }
  })
}
</script>

<template>
  <main class="p-6">
    <Button
      label="primary"
      class="bg-primary-500 border-0 me-2"
      rounded
      @click="changePrimaryColor('emerald')"
    />
    <Button
      label="indigo"
      class="bg-indigo-500 border-0 me-2"
      rounded
      @click="changePrimaryColor('indigo')"
    />
    <Button
      label="rose"
      class="bg-rose-500 border-0 me-2"
      rounded
      @click="changePrimaryColor('rose')"
    />
    <Button label="cyan" class="bg-cyan-500 border-0" rounded @click="changePrimaryColor('cyan')" />

    <Knob v-model="knobValue" class="mt-2" />
  </main>
</template>

當色彩切換成 indigo 時，primary 也一同切換以 indigo 為主題色：

當色彩切換成 rose 時，primary 也一同切換以 rose 為主題色：

Aura 主題所帶有可替換的色彩可在安裝@primevue/themes 後，在 node_modules 內找到，預設為 “emerald” 色彩。

檔案位置：node_modules > @primevue > themes > aura > index.mjs

參考連結：https://primevue.org/theming/styled