Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

Nettalco Theme is designed to slot into any Angular 21+ project with minimal configuration. Once the package is installed, a single providePrimeNG call in your app.config.ts activates the entire preset — all 75+ PrimeNG components will immediately reflect Nettalco’s brand colors, typography spacing, and component token overrides, with no additional CSS to write.
1
Authenticate and Install
2
If you haven’t installed the package yet, follow the Installation guide to configure your .npmrc and run:
3
npm install @nettalco/nettalco-theme
4
Make sure you also have the peer dependencies installed:
5
npm install primeng primeicons @primeuix/themes
6
Import MyPreset
7
MyPreset is the default export from @nettalco/nettalco-theme. It is a fully constructed PrimeNG preset object ready to be passed directly to providePrimeNG.
8
import MyPreset from '@nettalco/nettalco-theme';
9
You can also use the named export if preferred:
10
import { MyPreset } from '@nettalco/nettalco-theme';
11
Configure providePrimeNG in app.config.ts
12
Open (or create) your app.config.ts and wire up providePrimeNG with MyPreset. The configuration below enables light-only mode, which is the recommended default for most Nettalco projects:
13
import { ApplicationConfig } from '@angular/core';
import { providePrimeNG } from 'primeng/config';
import MyPreset from '@nettalco/nettalco-theme';

export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: MyPreset,
        options: {
          darkModeSelector: false, // Light mode only
        },
      },
    }),
  ],
};
14
darkModeSelector: false completely disables dark mode token generation, keeping bundle size slightly smaller. To enable dark mode, see Dark Mode.
15
Import PrimeNG CSS Styles
16
Add the PrimeNG base stylesheet and PrimeIcons to your project’s entry point or global stylesheet. This is required for PrimeNG components to render correctly:
17
main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import 'primeng/resources/primeng.css';
import 'primeicons/primeicons.css';

bootstrapApplication(AppComponent, appConfig).catch(console.error);
styles.scss
@import 'primeng/resources/primeng.css';
@import 'primeicons/primeicons.css';
18
Use PrimeNG Components
19
That’s it — your components now carry full Nettalco branding automatically. Here’s a minimal Angular component to verify everything is working:
20
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CardModule } from 'primeng/card';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonModule, CardModule],
  template: `
    <p-card header="Nettalco Theme">
      <p>Your PrimeNG components are now styled with Nettalco branding.</p>
      <ng-template pTemplate="footer">
        <p-button label="Primary Action" />
        <p-button label="Secondary" severity="secondary" [outlined]="true" />
        <p-button label="Success" severity="success" />
        <p-button label="Warning" severity="warn" />
      </ng-template>
    </p-card>
  `,
})
export class AppComponent {}
21
The buttons will render using nettalcoPrimary (#112A46 navy) for the primary variant, nettalcoSuccess (#2BA5CD cyan) for success, and nettalcoWarn (#D57952 orange) for warnings.

​
Dark Mode

To enable dark mode support, change darkModeSelector: false to darkModeSelector: '.p-dark' in your app.config.ts. Then toggle the class programmatically:
// Toggle dark mode
document.documentElement.classList.toggle('p-dark');

// Force dark mode
document.documentElement.classList.add('p-dark');

// Force light mode
document.documentElement.classList.remove('p-dark');
Nettalco Theme’s dark mode uses a custom dark-blue surface palette (rather than zinc gray) so the brand feel is preserved in dark mode. See Dark Mode for the full reference.

​
Complete app.config.ts Example (with Dark Mode)

app.config.ts (with dark mode)
import { ApplicationConfig } from '@angular/core';
import { providePrimeNG } from 'primeng/config';
import MyPreset from '@nettalco/nettalco-theme';

export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: MyPreset,
        options: {
          darkModeSelector: '.p-dark',
          cssLayer: false,
        },
      },
    }),
  ],
};

​
Next Steps

Design Tokens

Understand the two-level token system and learn how to extend or override it.

Color Palette

Browse the full 50–950 swatches for all five Nettalco brand palettes.

Dark Mode

Enable dark mode and explore the custom dark-blue surface scale.

Versioning & Publishing

Publish a new version of the library to GitHub Packages.

Build docs developers (and LLMs) love

Get started for freeTalk to us