Customize Alpine

Leverage the tokens.config.ts to give your identity to Alpine.

Look at the default tokens config to check all the Alpine related Design Tokens.

Alpine is also powered by @nuxt-themes/tokens, see the package tokens.config.ts.

You can configure all the theme tokens to change the apperance of Alpine by creating a tokens.config.ts in your project:

import { defineTheme } from 'pinceau'

export default defineTheme({
  alpine: {
    body: {
      // Update the background color in light & dark mode
      backgroundColor: {
        initial: '#f8fafc',
        dark: '#0f172a'
      }
    }
  }
})

If you are using Nuxt Studio, you can use an UI to update the token.config.ts of your Alpine project: