Skip to content

Conversation

@lukavdplas
Copy link
Contributor

@lukavdplas lukavdplas commented Dec 18, 2025

  • Adds dark mode (close Dark mode #1042)
  • Adds a documentation page about frontend styling, which explains the dark mode as well as some existing quirks.

The dark mode look is mostly just from bulma / primeNG, but I changed some CSS variables to increase contrast for text/borders. I'm not super happy about the look but I guess it's fine?

There is a component to let users pick dark/light mode. Default is "auto", i.e. adapt to system theme. But I would not mind using "light" as the default setting.

I used the runInIframe setting so Peace Portal always uses the light theme.

There is some extra logic to adjust colours for visualisations.

Copy link
Contributor

@JeltevanBoheemen JeltevanBoheemen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice dropdown.
Very well documented.
Code makes sense.

So my very minor two cents: I find the primary color too dark in dark mode. Maybe explore a slightly less saturated or lighter shade. (again, minor stuff)

@@ -0,0 +1,67 @@
# Styling
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beyond impressed by this documentation.

import { stylePreset } from './primeng-theme';
import { CoreModule } from './core/core.module';


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Load-bearing whitespace?

theme$: Observable<Theme>;

/** Default dark/light preference from the browser/OS */
private systemTheme$: Observable<Theme>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They're called System Team

chart: Chart;

constructor() { }
constructor() {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-load-bearing whitespace?

@JeltevanBoheemen
Copy link
Contributor

Just noticed that this is a draft PR. Sorry if the review is premature.

@lukavdplas
Copy link
Contributor Author

Not sure why I marked this as a draft, I think the code is done but I wasn't sure about the colours.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark mode

2 participants