Multi-layer theming
Pinceau supports loading multiple tokens.config.ts
files from multiple sources.
That allows multiple usages, like creating a preset for your themes and sharing it accross different projects.
Loading another tokens.config
file
Layers configuration lives under configLayers
key in options.
vite.config.ts
import { defineConfig } from 'vite'
import Pinceau from 'pinceau/vite'
export default defineConfig({
plugins: [
Pinceau({
configLayers: [
{
// Layer cwd
cwd: resolve(__dirname, './theme'),
// Custom configFileName at layer level
configFileName: 'tokens.config',
},
]
})
]
})
Nuxt extends feature support
When using
extends
key in nuxt.config
file, every layer will be pushed into configLayers
by default.
That can be disabled using extends
option.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['pinceau/nuxt'],
pinceau: {
extends: false
}
})
Edit this page on GitHub