How to override base theme settings

The USWDS comes with a lot of settings, which are documented at Settings, in order to modify any of them you can follow the next steps:

1. Open the sass/_settings.scss file.

2. You will find something like this:

   @use "uswds-core" with (
$theme-show-compile-warnings: false,
$theme-show-notifications: false,
$theme-image-path: '/themes/custom/my_new_theme/assets/uswds/img',
$theme-grid-container-max-width: "widescreen",
$theme-banner-max-width: "widescreen",
$theme-header-max-width: "widescreen",
);

3. Add modify those settings or add the ones you need to modify.

4. Compile the sass:

   npm run build

5. Done.

Example: Change the primary color family to red.

1. Go to the sass/_settings.scss file.

2. Add the following setting inside the with(…):

   $theme-color-primary-family: 'red',
$theme-color-primary:'red-60v',
$theme-color-primary-dark: 'red-warm-70v',
$theme-color-primary-darker: 'red-warm-80v',

3. The result should be the following:

   @use "uswds-core" with (
$theme-show-compile-warnings: false,
$theme-show-notifications: false,
$theme-image-path: '/themes/custom/my_new_theme/assets/uswds/img',
$theme-grid-container-max-width: "widescreen",
$theme-banner-max-width: "widescreen",
$theme-header-max-width: "widescreen",
$theme-color-primary-family: 'red',
$theme-color-primary:'red-60v',
$theme-color-primary-dark: 'red-warm-70v',
$theme-color-primary-darker: 'red-warm-80v'
);

4. npm run build

5. Clear the cache, just in case.

6. Done.