Feature/dark mode

[interim17]

Problem

Advances #84

Solution

This PR adds a theme provider for antd, simplifies global styling where possible, and introduces media queries to check for the user's preferences on dark vs light theme.

No manual option to set the theme is provided.

I didn't cross reference with any design files so the styling dtails here need to be updated/confirmed, but as a template for dark/light mode and use of antd theming, this works.

As for global styling, while theming mostly covers colors, I noticed some odd spacing and overflow here and there so I tried to tighten up the layout a bit.

For starters there was a Footer component with no content, and fixed dimension, which was leading to overflow, so I just removed it.

Also the .app-container wraps everything, so I didn't see the purpose of having display: flex also set on body so I changed it to display: block and removed the min height and width.

• New feature (non-breaking change which adds functionality)

[github-actions]

PR Preview Action v1.6.2
Preview removed because the pull request was closed.
2025-10-01 17:46 UTC

[ascibisz]

Since the footer footer was removed in App.tsx, this whole block should be removed

But per our discussion yesterday, could we add a 128px margin bottom on the Viewer?

[interim17]

Yes, I just removed the footer rule, and add a bottom margin to the Viewer component.

I still dont really understand that bottom margin tbh, but it's on there now :)

[rugeli]

Looks good! With this code structure, it should be easy to switch color palettes once we get one from UX.

only one thought on the lack of a toggle: users with their prefers-color-scheme default to light might still want to switch to dark occasionally, like for viewing the result in embedded viewer. we can discuss next time whether we'd like to have a button or not.