@angularforge/gallery

Dark Mode

The gallery adapts to light and dark themes using your Tailwind dark-mode strategy.

All page-level surfaces (share dialog, full-gallery view, header bar, toast, "show all pictures" button, close/share buttons) ship with dark: variants, so the gallery adapts to light and dark themes automatically — using whatever dark-mode strategy your Tailwind build is configured for.

System preference (Tailwind default): nothing to do. The dark: classes respond to @media (prefers-color-scheme: dark) .
Class / toggle based (e.g. you add a .dark class on <html> ): opt in from your CSS entry point so dark: follows that class instead of the media query (see below).

styles.css

/* styles.css (Tailwind v4) */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

In Tailwind v3 set darkMode: 'class' (or 'selector' ) in tailwind.config.js .