feat: dark theme

[wilhus]

Added dark theme to main window and splash screen. There is a button to toggle the theme at the top right corner of the session builder.

Also fixed button icon size.

Please try it out and let me know what you think!

Screenshots

Session builder

Session inspector

Cloud providers

Closes #642

[eglitise]

Thanks for picking up this long-requested feature! I haven't tested this out yet, but one of the first things I noticed were the dark mode cloud provider logos. If each provider does actually use these exact same dark mode images in their own marketing, then that's fine, but if not, I would suggest avoiding any color adjustments, as this may potentially cause issues (for example, my company has explicitly defined branding guidelines for its logo colors, which may also be the case here)

[eglitise]

Seems like there's a non-insignificant amount of changes that aren't directly related to dark mode - maybe these can be extracted into a separate PR and merged first? The button icon size does seem to be fixed 👍 Would you be able to also increase the size for the Badge and Switch elements?

[wilhus]

Thanks for picking up this long-requested feature! I haven't tested this out yet, but one of the first things I noticed were the dark mode cloud provider logos. If each provider does actually use these exact same dark mode images in their own marketing, then that's fine, but if not, I would suggest avoiding any color adjustments, as this may potentially cause issues (for example, my company has explicitly defined branding guidelines for its logo colors, which may also be the case here)

Thanks for pointing this out! I did not consider this at all, I just changed the colors in the existing svgs. Do you know where I can find "official" dark theme logos in the same size as the existing ones?

[eglitise]

Thanks for pointing this out! I did not consider this at all, I just changed the colors in the existing svgs. Do you know where I can find "official" dark theme logos in the same size as the existing ones?

Historically most, if not all the logos were added by the providers themselves, though I have also adjusted some logos in the past, for providers who had updated their logo since. I don't think there is a single place where all these dark theme logos are stored - my best suggestion is to search the web for each provider's logo, and try to find a dark theme-compatible logo that's used on that provider's website or social media account. You can then either copy it (if it's SVG) or just copy its colors. If there is no dark mode version available, I would suggest sticking to the light mode logo.

[eglitise]

After some brief testing, most of the elements look quite nice in dark mode! It is maybe a bit too dark though - is it possible to make the background a few shades lighter instead of fully black? I did also find a few items that don't look too great:

1. Coordinates overlay in the screenshot's Coordinate Mode:
2. Selected element in element search:

[eglitise]

Another minor thing (not directly related to this PR) about the Badge colors - currently each Badge element is explicitly set to blue, but this can also be set in the theme provider for easier adjustment in dark theme (if needed):

    components: {
      Badge: {
        colorError: '#1677ff',

(blue is a different shade of blue so it won't work)

[eglitise]

The docs will also need to be updated, but I can handle that in a separate PR.

[eglitise]

Just noticed two minor things probably related to antd v5 (again, not due to this PR) - but since you are already changing CSS, would you mind changing these in Inspector.module.css?

• For .inspector-main :global(.ant-card-head): add margin-bottom: 0px;
  • When selecting an element and scrolling down the attributes list, the list currently overlaps the border with the header
• For .inspector-main :global(.ant-card-body): change the height offset from 48px to 54px
  • When opening e.g. Actions tab and expanding a few Collapses, the bottom of the main area slightly extends outside of the bottom border of the card