Fix color theme for modals

[hotzenklotz]

In this PR, the light/dark color theme for modals available from the "Menu" in the navbar are fixed, e.g. "Download", "Create Animation", "Share" etc.

By default, the navbar is always set to the dark theme. All it's React component children, i.e. all modals are also forced into dark mode. This PR applies correct color theming based on the user settings.

URL of deployed dev instance (used for testing):

• https://___.webknossos.xyz

Steps to test:

• Switch between light and dark mode
• Any modal in from the navbar menu should follow suite
• Make sure to test "view" and "annotation" mode

TODOs:

• Investigate some wrong color in light-mode

Issues:

• Contributes to Fix up CSS related problems after antd update #8427

---

(Please delete unneeded items, merge only when none are left open)

• Updated changelog
• Updated migration guide if applicable
• Updated documentation if applicable
• Adapted wk-libs python client if relevant API parts change
• Removed dev-only changes like prints and application.conf edits
• Considered common edge cases
• Needs datastore update after deployment

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request implements various UI theme updates to ensure consistency with user preferences. It adds a bug fix note to the changelog concerning dark mode dialogs and simplifies theme assignments in the Navbar. Additionally, the changes wrap modal components in a ConfigProvider to apply user-specific themes using updated theme functions. A new property in the theme configuration disables unwanted parent theme inheritance.

Changes

File(s)	Summary
CHANGELOG.unreleased.md	Added a changelog entry for a bug fix addressing dark mode UI dialogs that disregard the light theme preference.
frontend/javascripts/navbar.tsx	Simplified the ConfigProvider's theme prop assignment by directly passing the result of theme functions instead of using the spread operator.
frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx	Imported ConfigProvider and new theme functions; wrapped modals/components in ConfigProvider to apply user-specific theming.
frontend/javascripts/theme.tsx	Introduced the inherit: false property in the getAntdTheme function to disable inheritance from parent themes.

Possibly related PRs

• Improve styling of buttons in toolbar & refactor CSS #8295: Modified the Navbar component to apply a dark theme context, directly relating to how themes are managed across components.

Suggested reviewers

• philippotto
• daniel-wer

Poem

I'm a bunny in the code garden, hopping with glee,
Turning dark to light so effortlessly.
Navbar leaps and modals dance in a row,
With themes aligned just right, watch them glow.
A joyful hop for every line of change we see,
Celebrating UI magic as merry as can be!

Tip

⚡🧪 Multi-step agentic review comment chat (experimental)

• We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
  - To enable this feature, set early_access to true under in the settings.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6512ee0 and 591e27e.

📒 Files selected for processing (5)

• CHANGELOG.unreleased.md (1 hunks)
• frontend/javascripts/navbar.tsx (2 hunks)
• frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx (3 hunks)
• frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx (3 hunks)
• frontend/javascripts/theme.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: circleci_build

🔇 Additional comments (12)

CHANGELOG.unreleased.md (1)

30-30: Well-documented bug fix in changelog

The changelog entry clearly describes the issue of UI dialogs defaulting to dark mode regardless of user preference, with proper PR reference. This helps users understand what visual improvements to expect.

frontend/javascripts/theme.tsx (1)

115-116: Essential theme inheritance prevention

The addition of inherit: false to the theme configuration is crucial to prevent unwanted theme inheritance when nesting components with different themes. This property is well-documented with a clear comment explaining its purpose and aligns with Ant Design's theme configuration options.

frontend/javascripts/navbar.tsx (2)

952-954: Clean theme implementation for UpgradeVersionBanner

The code correctly applies a light theme to the UpgradeVersionBanner component using ConfigProvider without unnecessary object spreading. This ensures that the banner maintains a consistent light appearance regardless of the user's selected theme.

---

986-996: Proper dark theme application for navbar components

The trailing nav items are correctly wrapped in a ConfigProvider with the dark theme, ensuring the navbar elements maintain their dark appearance regardless of user theme selection. This is intentional since the navbar itself has a dark background.

frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx (4)

8-8: Added ConfigProvider import

Correctly added ConfigProvider to the imports which is needed for the theming solution.

---

20-20: Added theme utility imports

Added necessary imports for theme utilities that will determine and apply the correct theme based on user preferences.

---

97-98: User theme preference retrieval

Properly retrieves the user's theme preference using the getThemeFromUser utility, ensuring that modal dialogs respect individual user settings.

---

105-109: Fixed modal theming with ConfigProvider

The modals are now correctly wrapped in a ConfigProvider with the user's theme preference. This is the core fix that ensures modals display with the correct theme (light/dark) based on user settings, rather than inheriting the navbar's dark theme.

frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx (4)

35-35: Good addition of ConfigProvider to existing imports.

Adding the ConfigProvider is a good approach for applying theme context to the modals, ensuring they respect user preferences rather than inheriting from parent components.

---

81-81: Well-structured theme utility imports.

The added imports for getAntdTheme and getThemeFromUser provide the necessary functionality to apply user-specific themes to components. This is a good separation of concerns, keeping theme logic in dedicated utility functions.

---

781-782: Good approach to retrieve user theme preferences.

Retrieving the theme from the user object is a clean approach that ensures UI components respect individual user preferences.

---

790-790: Perfect implementation of ConfigProvider for modals.

Wrapping all modals in a ConfigProvider with the user's theme is an excellent solution to the issue described in the PR. This ensures that modal dialogs will now correctly follow the user's theme preference (light or dark) instead of being forced into dark mode.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[philippotto]

works great 👍