feat(webapp): align standalone UI with DVLS theme

[Krista House (kristahouse)]

Aligns the standalone Gateway webapp styling with the DVLS theme, adding light and dark theme support and refreshing the main UI surfaces users interact with.

This updates the sidebar, login page, session backgrounds, dropdowns, reconnect form layout, and toast spacing so the standalone Gateway webapp feels consistent with the DVLS experience.

Issue: N/A

[Krista House (kristahouse)]

Implementation notes:

• Added a ThemeService plus early document theme class setup so PrimeNG and Gateway styles can share .dark-theme behavior without flicker.
• Switched PrimeNG to the DVL preset and copied the DVLS/demo token stack for standalone Gateway surfaces.
• Kept the sidebar in a fixed dark token scope to match DVLS while allowing the main workspace to switch themes.
• Pinned @devolutions/iron-remote-desktop-vnc to 0.7.0 because 0.7.1 caused ARD sessions to connect but render transparent in Gateway; 0.7.0 matches DVLS and fixes the rendering path.
• Scoped the PR to theme/UI foundation only; Active Directory functionality and AD-specific package wiring are intentionally excluded for the stacked follow-up PR.

Validation:

• pnpm --filter gateway-ui lint
• pnpm --filter gateway-ui build
• Manual smoke test of light/dark theme, sidebar, login, dropdowns, reconnect form layout, toast spacing, and ARD rendering

[github-actions]

Let maintainers know that an action is required on their side

• Add the label release-required Please cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module) when you request a maintainer to cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module)

• Add the label release-blocker Follow-up is required before cutting a new release if a follow-up is required before cutting a new release

• Add the label publish-required Please publish libraries (`Devolutions.Gateway.Utils`, OpenAPI clients, etc) when you request a maintainer to publish libraries (Devolutions.Gateway.Utils, OpenAPI clients, etc.)

• Add the label publish-blocker Follow-up is required before publishing libraries if a follow-up is required before publishing libraries

[Copilot]

Pull request overview

This PR restyles the standalone Devolutions Gateway web UI to match the DVLS design system, introducing full light/dark theme support. It vendors the DVLS design-token stylesheets, adds a runtime ThemeService plus an inline bootstrap script (to avoid a flash of unstyled content), introduces a PrimeNG DvlPreset, and refreshes many surfaces (sidebar, login page, session backgrounds, dropdowns/dialogs, forms, toasts).

Changes:

• Add DVLS theme infrastructure: ThemeService, inline theme bootstrap in index.html, generated dvls-stack variables + light/dark themes, and a PrimeNG DvlPreset wired into app.module.ts (with a new darkModeSelector/cssLayer order).
• Restyle UI surfaces via CSS variables (sidebar/menu, login, session backgrounds, net-scan, forms, PrimeNG overrides for dropdowns/dialogs/buttons/toasts) and add a sidebar theme toggle.
• Minor form robustness fixes (hostnames default to [], catchError returns a well-formed object) plus an unrelated iron-remote-desktop-vnc dependency downgrade.

Reviewed changes

Copilot reviewed 48 out of 49 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
webapp/pnpm-lock.yaml / package.json	Downgrade VNC client 0.7.1→0.7.0 (unrelated to theming)
src/client/index.html	Inline pre-bootstrap theme resolution; drop hardcoded light-theme body class
shared/services/theme.service.ts	New service resolving/persisting/applying theme, reacts to system preference
app/styles/dvl.preset.ts	New PrimeNG preset mapping components to DVLS CSS vars
app.module.ts / app.component.ts	Use DvlPreset, .dark-theme selector, new layer order; initialize theme
base/menu/app-menu.*	Sidebar restyle, theme toggle, download-link/tooltip logic, wider menu
base/main-app/main-app.*	Sidebar kept in fixed dark scope; workspace background tokens
modules/login/login.component.scss	Login page background/gradient/icons, card and input theming
web-client/form/*	optionValue/label on protocol select, hostname label fix, null-safety
web-client/net-scan/*	Panel/button tokens; replace inline edit SVG with icon font
shared/components/.scss, web-client//*.scss	Session background + toolbar comment updates via CSS vars
assets/css/theme/_root	_light
assets/css/dvls-stack/**	Vendored DVLS generated variables and light/dark themes
assets/css/override/* , style/base.scss , main.scss	PrimeNG overrides + shared helper classes and imports

Files not reviewed (1)

• webapp/pnpm-lock.yaml: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Krista House (kristahouse)]

Note on file size: this PR copies a larger set of DVLS theme values instead of trying to trim it down immediately. That makes the UI more consistent and avoids missing values that only show up in specific controls like dropdowns, dialogs, or messages. The final built CSS is still small for the installer impact (~231 KB before compression, ~39 KB compressed). If maintainers feel the copied theme set is too large, we can trim it down in a follow-up or before merge, but I kept it complete here to reduce the risk of missing styling edge cases.

[Benoît Cortier (CBenoit)]

Thank you Krista!

Note on file size: this PR copies a larger set of DVLS theme values instead of trying to trim it down immediately. That makes the UI more consistent and avoids missing values that only show up in specific controls like dropdowns, dialogs, or messages. The final built CSS is still small for the installer impact (~231 KB before compression, ~39 KB compressed). If maintainers feel the copied theme set is too large, we can trim it down in a follow-up or before merge, but I kept it complete here to reduce the risk of missing styling edge cases.

I would indeed prefer a trimmed down version, but I’ll trust your call here. If it’s a maintenance burden for you, no need to invest time into that.

[Benoît Cortier (CBenoit)]

LGTM! Thank you!