Customisation

In the Getting Started section (which I know you read) you imported the default theme into your global css style.

This file declares many default Tailwind colours into Nitpick palettes, such as "foreground", "accent", "danger" etc.

Here's what the default-theme.css
looks like that's bundled with Nitpick.

 csssrc/node_modules/nitpick-ui/dist/default-theme.css
@import 'tailwindcss';

@theme {
    /* Default colours */
    --color-accent-50: var(--color-indigo-50);
    --color-accent-100: var(--color-indigo-100);
    --color-accent-200: var(--color-indigo-200);
    --color-accent-300: var(--color-indigo-300);
    --color-accent-400: var(--color-indigo-400);
    --color-accent-500: var(--color-indigo-500);
    --color-accent-600: var(--color-indigo-600);
    --color-accent-700: var(--color-indigo-700);
    --color-accent-800: var(--color-indigo-800);
    --color-accent-900: var(--color-indigo-900);
    --color-accent-950: var(--color-indigo-950);

    --color-foreground-50: var(--color-slate-50);
    --color-foreground-100: var(--color-slate-100);
    --color-foreground-200: var(--color-slate-200);
    --color-foreground-300: var(--color-slate-300);
    --color-foreground-400: var(--color-slate-400);
    --color-foreground-500: var(--color-slate-500);
    --color-foreground-600: var(--color-slate-600);
    --color-foreground-700: var(--color-slate-700);
    --color-foreground-800: var(--color-slate-800);
    --color-foreground-900: var(--color-slate-900);
    --color-foreground-950: var(--color-slate-950);

    --color-background-50: var(--color-slate-50);
    --color-background-100: var(--color-slate-100);
    --color-background-200: var(--color-slate-200);
    --color-background-300: var(--color-slate-300);
    --color-background-400: var(--color-slate-400);
    --color-background-500: var(--color-slate-500);
    --color-background-600: var(--color-slate-600);
    --color-background-700: var(--color-slate-700);
    --color-background-800: var(--color-slate-800);
    --color-background-900: var(--color-slate-900);
    --color-background-950: var(--color-slate-950);

    --color-danger-50: var(--color-rose-50);
    --color-danger-100: var(--color-rose-100);
    --color-danger-200: var(--color-rose-200);
    --color-danger-300: var(--color-rose-300);
    --color-danger-400: var(--color-rose-400);
    --color-danger-500: var(--color-rose-500);
    --color-danger-600: var(--color-rose-600);
    --color-danger-700: var(--color-rose-700);
    --color-danger-800: var(--color-rose-800);
    --color-danger-900: var(--color-rose-900);
    --color-danger-950: var(--color-rose-950);

    /*Shorts*/
    --color-background: var(--color-background-100);
    --color-foreground: var(--color-foreground-600);
    --color-surface: var(--color-white);
    --color-danger: var(--color-danger-500);
    --color-border: var(--color-foreground-200);
    --color-accent: var(--color-accent-500);
}

If you don't like some or all the colours in Nitpicks default theme (this site is custom too) you can override these variables in your own file.

For example, on the Nitpick Docs site the globals.css
file looks like this:

 csssrc/app/globals.css
@import 'tailwindcss';
@source "../../node_modules/nitpick-ui/dist/";
@import "../../node_modules/nitpick-ui/dist/default-theme.css";

@theme {
    /* Custom theme */
    --color-foreground-50: var(--color-neutral-50);
    --color-foreground-100: var(--color-neutral-100);
    --color-foreground-200: var(--color-neutral-200);
    --color-foreground-300: var(--color-neutral-300);
    --color-foreground-400: var(--color-neutral-400);
    --color-foreground-500: var(--color-neutral-500);
    --color-foreground-600: var(--color-neutral-600);
    --color-foreground-700: var(--color-neutral-700);
    --color-foreground-800: var(--color-neutral-800);
    --color-foreground-900: var(--color-neutral-900);
    --color-foreground-950: var(--color-neutral-950);

    --color-background-50: var(--color-neutral-50);
    --color-background-100: var(--color-neutral-100);
    --color-background-200: var(--color-neutral-200);
    --color-background-300: var(--color-neutral-300);
    --color-background-400: var(--color-neutral-400);
    --color-background-500: var(--color-neutral-500);
    --color-background-600: var(--color-neutral-600);
    --color-background-700: var(--color-neutral-700);
    --color-background-800: var(--color-neutral-800);
    --color-background-900: var(--color-neutral-900);
    --color-background-950: var(--color-neutral-950);

    /* Nitpick required */
    --color-background: var(--color-background-100);
    --color-foreground: var(--color-foreground-600);
    --color-surface: var(--color-white);
    --color-danger: var(--color-danger-500);
    --color-border: var(--color-foreground-200);
    --color-accent: var(--color-accent-500);
}

h1, h2, h3 {
    font-family: Geist;
    font-weight: 500;
}

@import "../../node_modules/nitpick-ui/dist/index.css";

@custom-variant dark (&:where(.dark, .dark *));

Note here we're including the default-theme.css
and then overriding its variables with our own choices. This allows us to use the Nitpick components without having to worry about the default themes opinions.

If you don't use Tailwinds default palettes you can exclude the default-theme.css
file altogether and declare them yourself based off your own palette names.

Keep in mind you must still include the index.css
file after you have declared the required variables from default-theme.css
.