PrimeVue4 的 Styled Mode，你會需要選一個既定的 theme 來套入，像是 Aura。若想要在既有的 Aura 來進行一些微調，官網步驟僅點到為止。這邊筆記下微調的方法。
內容
自訂方式
1. 先將某個你想要參照的主題，以 console.log 的方式取得完整物件
|
1 2 3 4 5 6 7 |
import { definePreset } from '@primeuix/themes' import Aura from '@primeuix/themes/aura' const preset = definePreset(Aura); // 在開發者工具的 Console 中印出完整的 Preset 物件 console.log(JSON.stringify(IndigoPreset, null, 2)); |
2. 將複製出來的物件，獨立放在一個 js 中。然後新增一個 js 將其引入，並將其想要調整的項目進行覆蓋
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import { definePreset } from '@primeuix/themes' import Aura from '@primeuix/themes/aura' import { merge } from 'lodash-es' import { basicThemeObj } from './base-theme-obj' const overrideObj = { primitive: { blue: { '50': '#EBF1FF', '100': '#D6E2FF', '200': '#B0C9FF', '300': '#89AFFF', '400': '#709CFF', '500': '#5D87FF', '600': '#4B72E5', '700': '#395ECB', '800': '#2849B2', '900': '#1A3798', '950': '#10247E', }, }, semantic: { primary: { '50': '{blue.50}', '100': '{blue.100}', '200': '{blue.200}', '300': '{blue.300}', '400': '{blue.400}', '500': '{blue.500}', '600': '{blue.600}', '700': '{blue.700}', '800': '{blue.800}', '900': '{blue.900}', '950': '{blue.950}', value: '{blue}', }, colorScheme: { dark: { primary: { contrastColor: '{surface.0}', }, }, }, }, } export const Theme = definePreset(Aura, merge({}, basicThemeObj, overrideObj)) |
建議使用 lodash-es 的 merge，避免多個 {…} 展開運算子導致維護困難
解讀
primitive 定義 border-radius 和各種顏色預設值
semantic 定義各種「語意」上的預設值，例如 primary-50 是代表 primitive 的 {blue.500} 之類的。你可以依照情境來修改
components 定義各種「元件」內的預設值
