Adding additional colours??

[kieranmansfield]

Description

Hey guys,

is it possible to add additional colours to the app.config.ts:

export default defineAppConfig({
  ui: {
    primary: 'cerulean',
    gray: 'neutral',
    secondary: 'toreabay',
    accent: 'white',
  },
})

Essentially I'm trying to implement a few different colour themes and override the options in app.config.ts with useAppConfig()

I should also point out that the additional colours are only used in custom components I've created.

[KealanAU]

Yes, you can customize the theme in Nuxt UI as described in their theming documentation, which you can find here: Nuxt UI Theming.

For a quick and straightforward method to create colour scheme, you might want to use the UIColors website. Here’s an example of how you can configure the colours using Tailwind CSS in your project:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import defaultTheme from "tailwindcss/defaultTheme";

export default <Partial<Config>>{
  theme: {
    extend: {
      fontFamily: {
        sans: ["DM Sans", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        keppel: {
          "50": "#f2fbf9",
          "100": "#d3f4ee",
          "200": "#a7e8dc",
          "300": "#74d4c7",
          "400": "#45b8ac",
          "500": "#2e9e94",
          "600": "#227f79",
          "700": "#1f6662",
          "800": "#1d5250",
          "900": "#1c4543",
          "950": "#0b2728",
        },
        waikawaGray: {
          "50": "#f2f7fb",
          "100": "#e7f0f8",
          "200": "#d3e2f2",
          "300": "#b9cfe8",
          "400": "#9cb6dd",
          "500": "#839dd1",
          "600": "#6a7fc1",
          "700": "#6374ae",
          "800": "#4a5989",
          "900": "#414e6e",
          "950": "#262c40",
        },
      },
    },
  },
};

Then, configure the UI theme in your app configuration like this:

// app.config.ts
import { defineAppConfig } from 'nuxt';

export default defineAppConfig({
  ui: {
    primary: 'keppel',
    gray: 'zinc',
    variables: {
      light: {
        background: 'var(--color-gray-50)',
        color: 'keppel',
      },
    },
  },
});

[benjamincanac]

As @KealanAU mentioned, the colors are supposed to be added in your tailwind.config.ts. The primary and gray colors configurable in the app.config.ts are only aliases to be changed at runtime.