feat: Implement dark mode

[robinmanuelthiel]

This pull request implements the dark mode feature as described in issue #70.

This pull request introduces theme switching functionality to the web app, allowing users to toggle between light and dark modes. The implementation includes a new ThemeService, updates to the main app component and header bar to support theme switching, and the addition of a dark theme stylesheet. Minor CSS and font path fixes are also included.

Theme switching functionality:

• Added a new ThemeService to manage the current theme and notify components of changes (src/WebApp/Services/ThemeService.cs, src/WebApp/Extensions/Extensions.cs). [1] [2]
• Updated App.razor to inject ThemeService, apply the dark theme stylesheet conditionally, and respond to theme changes (src/WebApp/Components/App.razor). [1] [2] [3]
• Added a theme toggle button to the header bar and connected it to ThemeService (src/WebApp/Components/Layout/HeaderBar.razor). [1] [2] [3]

Styling updates:

• Added a new dark theme stylesheet with basic color overrides (src/WebApp/wwwroot/css/app.dark.css).
• Updated app.css to include styles for the theme selector and fixed a font file path (src/WebApp/wwwroot/css/app.css). [1] [2]

Other improvements:

• Minor refactor to add missing using directive in Routes.razor (src/WebApp/Components/Routes.razor).

[Copilot]

Pull Request Overview

This pull request implements dark mode functionality for the web application, allowing users to toggle between light and dark themes. The implementation includes a centralized theme management service with JavaScript integration, UI controls for theme switching, and styling updates to support both light and dark color schemes.

• Added a new ThemeService to manage theme state and provide theme switching functionality
• Integrated theme toggle button in the header bar with appropriate CSS styling
• Added dark mode styles and fixed font path issue in CSS

Reviewed Changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/WebApp/wwwroot/js/theme.js	JavaScript function to apply theme classes to document body
src/WebApp/wwwroot/css/app.css	Dark theme styles, theme selector styles, and font path fix
src/WebApp/Services/ThemeService.cs	Theme management service with toggle functionality and change notifications
src/WebApp/Extensions/Extensions.cs	Service registration for ThemeService
src/WebApp/Components/Routes.razor	Added missing using directive
src/WebApp/Components/Layout/MainLayout.razor	Added empty line
src/WebApp/Components/Layout/HeaderBar.razor	Theme toggle button integration
src/WebApp/Components/App.razor	Theme service injection and event handling

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The font filename appears to have a typo. 'open-san-v36-latin-italic.woff2' should likely be 'open-sans-v36-latin-italic.woff2' (missing 's' in 'sans').

Suggested change

	src: url('../fonts/open-san-v36-latin-italic.woff2') format('woff2');
	src: url('../fonts/open-sans-v36-latin-italic.woff2') format('woff2');

[Copilot]

The CSS selector has duplicate '.button' classes which is redundant. It should be 'body.dark .button.button-secondary' instead of 'body.dark .button.button.button-secondary'.

Suggested change

	body.dark .button.button.button-secondary {
	body.dark .button.button-secondary {

[Copilot]

Event handler subscription in OnInitialized may cause issues if the component is re-initialized. Consider checking if already subscribed or use OnAfterRender with firstRender parameter to ensure single subscription.

Suggested change

	protected override void OnInitialized()
	{
	ThemeService.OnThemeChanged += StateHasChanged;
	protected override void OnAfterRender(bool firstRender)
	{
	if (firstRender)
	{
	ThemeService.OnThemeChanged += StateHasChanged;
	}