Dark theme

[normanrz]

• Implements a dark theme for webKnossos through a separate stylesheet
• Tweaks the necessary styles for the UI components to adapt to both light and dark themes, i.e.
  • move color codes out of JS, if possible
  • replace specific hex/rgb codes with antd-provided variables (see https://antdtheme.com/default#Color and https://ant.design/docs/spec/colors)
• Reorganizes some stylesheets, e.g.
  • remove unused CSS styles
  • move spotlight stuff out of main.less
  • add a _utils.less stylesheet for exposing antd-variables as CSS variables
• The charts in time_line_chart_view.js and statistic_view.js just got a white background, because the Google Chart module doesn't allow easy theming. Should be fixed in a follow-up PR.

TODO

• persist mode (backend)
• publication gallery
• spotlight_view
• welcome header
• onboarding.js
• dataset_upload_view.js
• dataset_import_view.js
• stacked_bar_chart.js
• nml_upload_zone_container.js
• viewport_status_indicator.js
• dataset_position_view.js
• dataset_settings_view.js
• time_line_chart_view.js
• experience_modal.js
• dataset_action_view.js
• toast.js
• save_button.js
• tracing_layout_view.js
• dataset_info_tab.js
• meshes_view.js
• setting_input_view.js
• share_modal.js
• mapping_info_view.js
• notifications
• context menu
• info tab
• isosurface tab
• tree tab
• abstract tree tab (fixed with a white background)
• segmentation tab
• version restore
• tracing-view navbar
• Merge with Layout rework #5279
• Merge with [WIP] Status bar #5369
• Merge with Improve import+formats docs and add explanations to upload UI #5420

URL of deployed dev instance (used for testing):

• https://darktheme.webknossos.xyz

Steps to test:

• Open https://darktheme.webknossos.xyz, switch to dark mode and try everything :-)

---

• Updated (unreleased) changelog
• Updated (unreleased) migration guide if applicable
• Ready for review

[normanrz]

Although there are still a few TODOs, I think the code is ready for a second pair of eyes.

[philippotto]

I just pushed several tweaks which caught my eye during testing. From my point of view this PR can be merged. @fm3 Could you double-check the light theme to ensure that no embarrassing regression is introduced? The dark theme is marked as beta, so we are relatively safe there.

[fm3]

Thanks for pinging me about the light theme :) I did notice some changes, only one of which I’d consider blocking:
light theme changes

• hover color for welcome banner links is brighter (a little less legible but less impact than the recent font change)
• error toast font color is red now (fine by me)
• brush preview rendering has trippy new color scheme (Screenshot from Firefox. It’s better in chrome, but still definitely different from master. I think this one should be fixed)
  
• toggling the theme leads to “collapse”/“combination” of top menus (I just see a … instead of dashboard/administration/statistics…) as if there was too little space. It’s fixed on reload.
  

[philippotto]

Thanks for testing! I agree with your assessment of the blocking part.

• brush preview rendering has trippy new color scheme (Screenshot from Firefox. It’s better in chrome, but still definitely different from master. I think this one should be fixed)
  

Very interesting. I cannot reproduce this. It might be related to my comment here: #5407 (comment)
Could you check out this branch locally and set alpha to false just to check whether this fixes the rendering issue?

[fm3]

Could you check out this branch locally and set alpha to false just to check whether this fixes the rendering issue?

Indeed, removing the alpha: true, line restores the master behavior

[normanrz]

Thanks for your testing and suggestions!

• hover color for welcome banner links is brighter (a little less legible but less impact than the recent font change)

I made the hover color a bit darker

• brush preview rendering has trippy new color scheme (Screenshot from Firefox. It’s better in chrome, but still definitely different from master. I think this one should be fixed)
  

I fixed this.

• toggling the theme leads to “collapse”/“combination” of top menus (I just see a … instead of dashboard/administration/statistics…) as if there was too little space. It’s fixed on reload.
  

I couldn't reproduce this :-(

[fm3]

Excellent news :)

Concerning the last point, this seems to work fine in Chrome, but I can consistently reproduce the described problem in Firefox Windows+Linux. I don’t know how much of a problem it is, since reloading fixes the issue and most users won’t be switching themes very often.

[normanrz]

Excellent news :)

Concerning the last point, this seems to work fine in Chrome, but I can consistently reproduce the described problem in Firefox Windows+Linux. I don’t know how much of a problem it is, since reloading fixes the issue and most users won’t be switching themes very often.

I could also reproduce it in Firefox and fixed it now :-)

[fm3]

I could also reproduce it in Firefox and fixed it now :-)

Works for me 🎉

[philippotto]

Excellent! Mergy-merge?