@angularforge/gallery

Theming the Colors

Match the gallery's surfaces to your project's palette via CSS variables.

The gallery's surfaces read their colors from CSS custom properties, so you can make them match your project's palette by overriding a few variables — no ::ng-deep or !important needed. The defaults reproduce the built-in light/dark look:

Token	Default (light)	Default (dark)	Used by
`--ngx-gallery-surface` / `--ngx-gallery-surface-dark`	`#ffffff`	`#111827`	dialog / full-gallery / header / toast backgrounds
`--ngx-gallery-text` / `--ngx-gallery-text-dark`	`#111827`	`#f3f4f6`	primary text & icons
`--ngx-gallery-muted` / `--ngx-gallery-muted-dark`	`#6b7280`	`#9ca3af`	secondary text (description)
`--ngx-gallery-border` / `--ngx-gallery-border-dark`	`#e5e7eb`	`#374151`	borders
`--ngx-gallery-hover` / `--ngx-gallery-hover-dark`	`#f3f4f6`	`rgb(255 255 255 / .1)`	hover backgrounds

Override them wherever the gallery is mounted (or globally on :root ). Only set what you need — usually just the dark surface to match your app's background:

styles.css

ngx-gallery {
  /* make the dark panels match your project's dark background */
  --ngx-gallery-surface-dark: #0d1117;
  --ngx-gallery-border-dark: #21262d;
  /* you can reuse your own design tokens, too */
  --ngx-gallery-surface: var(--app-bg);
  --ngx-gallery-text: var(--app-fg);
}