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 }})
Table of Contents