Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(18348): Add support for dark mode #249

Merged
merged 62 commits into from
Jan 5, 2024
Merged

Conversation

vanch3d
Copy link
Contributor

@vanch3d vanch3d commented Dec 18, 2023

See https://hivemq.kanbanize.com/ctrl_board/57/cards/18348/details/

This PR is part of an initiative aiming at preparing the styling of Edge with the design system being investigated for HiveMQ products.

It activates support for the dark mode and makes every component in the app to be both supportive of the dark mode (e.g. remove hard-coded colours) but also better designed for theming (e.g. using either colorScheme or variant).

The refactoring process in this PR tries to ensure that all components from this point forward will be easily styled by a single source of truth, the custom ChakraUI theme.

The dark mode is also a very welcome addition to accessibility for Edge

A few related issues are also being fixed:

  • add a switch button on the navigation menu, allowing users to switch between "light" and "dark" mode
  • the Edge node in the Workspace has a new design
  • all the nodes (including the hosts) are now covered by a custom rendering, ensuring adequate theming
  • a basic theme has been added to the two charts
  • fix a bug with the forward reference of the colour picker

Out-of-scope

  • Most of the SVGs would benefit from a redesign to support light/dark mode out-of-the-box. At the moment, they require different sources for the two modes.
  • Being part of the app, the login page is also rendered in dark mode. However the switch is not available until users have logged in. This behaviour might have to be changed

Before

screenshot-localhost_3000-2023 12 18-16_39_35

After

screenshot-localhost_3000-2023 12 18-16_40_26

screenshot-localhost_3000-2023 12 18-16_40_48

screenshot-localhost_3000-2023 12 18-16_46_36

screenshot-localhost_3000-2023 12 18-16_47_04

screenshot-localhost_3000-2023 12 18-14_52_33

@cla-bot cla-bot bot added the cla-signed label Dec 18, 2023
@vanch3d vanch3d self-assigned this Dec 19, 2023
@vanch3d vanch3d force-pushed the refactor/18077/charts-design-system branch from 082249e to 8ee21ca Compare December 19, 2023 14:29
Base automatically changed from refactor/18077/charts-design-system to feat/18150/workspace-manual-grouping December 19, 2023 14:30
@vanch3d vanch3d force-pushed the feat/18150/workspace-manual-grouping branch 2 times, most recently from 307e083 to 72e68e8 Compare December 20, 2023 09:34
Base automatically changed from feat/18150/workspace-manual-grouping to master December 20, 2023 10:22
@vanch3d vanch3d requested review from sfrehse and removed request for sfrehse December 20, 2023 12:32
@vanch3d vanch3d marked this pull request as ready for review December 20, 2023 12:33
Copy link
Collaborator

@simon622 simon622 left a comment

Choose a reason for hiding this comment

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

Looks good and functions as expected

@simon622 simon622 merged commit 392a6d2 into master Jan 5, 2024
10 checks passed
@simon622 simon622 deleted the feat/18348/dark-mode branch January 5, 2024 11:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants