feat(UI): Add support for dark mode

[lordrip]

Context

This PR adds support for selecting light and dark modes in Kaoto. The mechanism works in 3 ways:

• Auto: It will try to read the preference from the system
• Light: Light mode
• Dark: Dark mode

Screenshot

Normal

Selected

Source Code editor

VS Code

Todo

• Propagate VS Code light / dark mode setting
• Add tests for the DOM manipulation part
• Find a better color scheme for the group title bar in dark mode

fix: #1543

[codecov]

Codecov Report

Attention: Patch coverage is 85.71429% with 4 lines in your changes missing coverage. Please review.

Project coverage is 81.50%. Comparing base (70bcb36) to head (7130325).
Report is 13 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/ui/src/App.tsx	0.00%	3 Missing ⚠️
...ckages/ui/src/components/SourceCode/SourceCode.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #2118   +/-   ##
=========================================
  Coverage     81.50%   81.50%           
  Complexity      456      456           
=========================================
  Files           522      523    +1     
  Lines         16716    16744   +28     
  Branches       3457     3492   +35     
=========================================
+ Hits          13624    13648   +24     
- Misses         2834     2838    +4     
  Partials        258      258           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[apupier]

current test failure:

 [@kaoto/kaoto]: FAIL src/multiplying-architecture/KaotoEditorApp.test.tsx
[@kaoto/kaoto]:   ● KaotoEditorApp › setTheme
[@kaoto/kaoto]: 
[@kaoto/kaoto]:     expect(jest.fn()).toHaveBeenCalledWith(...expected)
[@kaoto/kaoto]: 
[@kaoto/kaoto]:     Expected: 0
[@kaoto/kaoto]: 
[@kaoto/kaoto]:     Number of calls: 0
[@kaoto/kaoto]: 
[@kaoto/kaoto]:       173 |     await kaotoEditorApp.setTheme(EditorTheme.DARK);
[@kaoto/kaoto]:       174 |
[@kaoto/kaoto]:     > 175 |     expect(editorRef.current!.setTheme).toHaveBeenCalledWith(EditorTheme.DARK);
[@kaoto/kaoto]:           |                                         ^
[@kaoto/kaoto]:       176 |   });
[@kaoto/kaoto]:       177 |
[@kaoto/kaoto]:       178 |   it('sendReady', () => {
[@kaoto/kaoto]: 
[@kaoto/kaoto]:       at Object.toHaveBeenCalledWith (src/multiplying-architecture/KaotoEditorApp.test.tsx:175:41)

[apupier]

some text is written black on dark grey which is unreadable:

[apupier]

with Dark High Contrast theme in VS code, it stays light:

[apupier]

The datamapper icon on the tab might require a specific version in dark mode as it is hard to read it

[igarashitm]

(nit picking) typo, schema > schem"e"

[apupier]

The datamapper icon on the tab might require a specific version in dark mode as it is hard to read it

I do not see a difference now despite eb1e19c :

[lordrip]

@apupier this is running locally

[apupier]

@apupier this is running locally

retried and I have that now, I guess I have not recompiled correctly previously

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud