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