Theme Configuration

To configure the default theme, you need to update the ./app/app.config.ts file.

// app.config.ts
export default defineAppConfig({
  colors: {
    primary: 'orange',
    gray: 'neutral',
  },
  borderRadius: 0.5,
  sidebarColor: 'background',
  sidebarVariant: 'sidebar',
  fonts: {
    sans: 'Inter',
  },
})

INFO

If you change the colors you might need to remove css-colors-primary, css-colors-gray, and css-colors-root from your browser's local storage.

Colors

To provide dynamic colors, the css-colors module located in ./layers/theme/modules/colors generates our theme (CSS variables) at runtime.

You can use any of the Tailwind CSS colors or your own custom colors.

Custom colors

When you use a custom color, make sure to define all the shades from 50 to 950 and use the static theme option.

Example:

In ./app/assets/css/main.css:

@theme static {
  --color-lavender-50:  oklch(0.98 0.0061 317.75);
  --color-lavender-100: oklch(0.96 0.0163 313.61);
  --color-lavender-200: oklch(0.92 0.0306 315.90);
  --color-lavender-300: oklch(0.86 0.0564 316.63);
  --color-lavender-400: oklch(0.77 0.0923 315.86);
  --color-lavender-500: oklch(0.65 0.1400 316.07);
  --color-lavender-600: oklch(0.60 0.1471 316.85);
  --color-lavender-700: oklch(0.53 0.1390 316.88);
  --color-lavender-800: oklch(0.47 0.1153 318.05);
  --color-lavender-900: oklch(0.41 0.0947 318.73);
  --color-lavender-950: oklch(0.31 0.0869 317.31);
}

Then in app.config.ts:

export default defineAppConfig({
  colors: {
    primary: 'lavender',
  },
})

Override Theme Colors

You can override the default colors theme:

// app.config.ts
export default defineAppConfig({
  colors: {
    customMappings: {
      gray: {
        light: {
          // Example changing the background color to gray[50]:
          background: 50 // shade number or CSS color value
        }
      }
    }
  },
})

Disable Colors Module

If you want to disable the module:

// nuxt.config.ts
cssColors: {
  enabled: false,
},