From cae82fbe94c5e5504608e83c314d8ac38ddb6e4f Mon Sep 17 00:00:00 2001 From: Wong Chieh Yie Date: Sat, 2 May 2026 10:34:17 +0800 Subject: [PATCH 1/2] deps: add @primeuix/themes for PrimeNG v21 theme presets --- frontend/package-lock.json | 10 ++++++++++ frontend/package.json | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5bcc876..97b6a11 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -18,6 +18,7 @@ "@angular/platform-browser-dynamic": "~21.2.10", "@angular/router": "~21.2.10", "@fortawesome/fontawesome-free": "^6.7.2", + "@primeuix/themes": "^2.0.3", "filesize": "^9.0.11", "moment": "^2.30.1", "ngx-filesize": "^3.0.7", @@ -5727,6 +5728,15 @@ "@primeuix/styled": "^0.7.4" } }, + "node_modules/@primeuix/themes": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz", + "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==", + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.7.4" + } + }, "node_modules/@primeuix/utils": { "version": "0.6.4", "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index 4e44069..832dfc5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,8 +22,9 @@ "@angular/platform-browser-dynamic": "~21.2.10", "@angular/router": "~21.2.10", "@fortawesome/fontawesome-free": "^6.7.2", - "moment": "^2.30.1", + "@primeuix/themes": "^2.0.3", "filesize": "^9.0.11", + "moment": "^2.30.1", "ngx-filesize": "^3.0.7", "ngx-moment": "^6.0.2", "primeflex": "^4.0.0", From 785c25337b86557b37d14bc4222e0560052a9d86 Mon Sep 17 00:00:00 2001 From: Wong Chieh Yie Date: Sat, 2 May 2026 10:34:27 +0800 Subject: [PATCH 2/2] feat(theme): configure PrimeNG v21 Aura dark theme The Angular 13->21 migration removed primeng/resources/themes/bootstrap4-dark-blue/theme.css (no longer exists in PrimeNG v17+) but never added a replacement. This left all CSS variables undefined, breaking the entire UI. - Add providePrimeNG({ theme: { preset: Aura, darkModeSelector: '.p-dark' } }) to AppModule - Add class="p-dark" to to permanently activate dark mode - Add :root CSS variables restoring --surface-b, --text-color, --font-family with the original bootstrap4-dark-blue values --- frontend/src/app/app.module.ts | 8 ++++++++ frontend/src/index.html | 2 +- frontend/src/styles.scss | 6 ++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 1ce6ca9..fef457b 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,5 +1,7 @@ import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; +import {providePrimeNG} from 'primeng/config'; +import Aura from '@primeuix/themes/aura'; import {AppComponent} from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @@ -124,6 +126,12 @@ import { SessionStatusComponent } from './components/session-status/session-stat useValue: window.environment, }, DialogService, + providePrimeNG({ + theme: { + preset: Aura, + options: { darkModeSelector: '.p-dark' } + } + }), ], bootstrap: [AppComponent] }) diff --git a/frontend/src/index.html b/frontend/src/index.html index ae78b25..7d28474 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -1,5 +1,5 @@ - + Storm diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index d5724de..3f4e829 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,3 +1,9 @@ +:root { + --surface-b: #1b2838; + --text-color: #dee9f5; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + body { background-color: var(--surface-b); padding: 0;