RI-7754: improve system theme handling

[pd-redis]

What

In ThemeComponent the conditional to change theme if it is system is applied only if themeContext.usingSystemTheme is true.

This is required, because this component - which is meant to load theme from localstorage on app load, is also listening for changes in the browser theme query. Which is trigerred when we change theme in settings. And we get a race condition, when we change from SYSTEM to LIGHT, we actually apply the theme BEFORE updating localStorage, and event hadler is trigerred and sees old value - system and changes it right away to dark (which is my system theme)

Key changes:

• Added useThemeContext custom hook with error boundary for better developer experience
• Updated ThemeComponent to use the new custom hook instead of useContext directly
• Improved system theme detection logic with additional checks for usingSystemTheme state
• Removed unused event parameter from theme change handler
• Enhanced type safety and error handling for theme context usage

Testing

To verify the changes:

1. Open the Redis Insight
2. Navigate to Settings → General
3. Test theme switching between Light, Dark, and System themes:
   • Switch to "Light" theme - verify UI changes to light mode
   • Switch to "Dark" theme - verify UI changes to dark mode
   • Switch to "System" theme - verify it follows your OS theme preference
   • Switch to "Light" theme - verify UI changes to light mode
   • repeat as many times as needed

---

Note

Remove ThemeComponent and its test, introduce useThemeContext and isValidTheme, and validate theme selection during initialization.

• Theme Context:
  • Add isValidTheme guard for stored/query theme validation and use it during initialization.
  • Export new useThemeContext hook for consuming theme context.
• App:
  • Remove ThemeComponent import/usage from ui/src/App.tsx.
• Tests:
  • Delete components/theme/ThemeComponent.spec.tsx.
• Cleanup:
  • Remove components/theme/ThemeComponent.tsx.

^{Written by Cursor Bugbot for commit 3d68098. This will update automatically on new commits. Configure here.}

[github-actions]

Code Coverage - Frontend unit tests

St.❔	Category	Percentage	Covered / Total
🟢	Statements	82.94%	20906/25205
🟡	Branches	68.1%	8820/12952
🟡	Functions	78%	5713/7324
🟢	Lines	83.35%	20471/24559

Test suite run success

5410 tests passing in 701 suites.

Report generated by 🧪jest coverage report action from 3d68098

[jit-ci]

❌ Jit has detected 1 important finding in this PR that you should review.
The finding is detailed below as a comment.
It’s highly recommended that you fix this security issue before merge.

Repository Risks:

• Critical Severity Findings: Indicates that the resource has critical severity security findings that need immediate action.
• Internally Accessible: Accessible only within the internal network, reducing exposure to external threats but still requiring proper controls.
• Database Integration: Connects to a database, often involving sensitive data that must be securely managed.
• Production: Critical as it operates in a live production environment, directly impacting users and business operations.

Repository Context:

graph LR
    GitHub$Repository_U23_redis/RedisInsight["GitHub Repository<br/>redis/RedisInsight"]:::GitHub$Repository
    DBIntegration_U23_redis["DBIntegration<br/>redis"]:::DBIntegration
    GitHub$Actions_U23_pipeline_U2D_build_U2D_windows_U2E_yml["GitHub Actions<br/>pipeline-build-windows.yml"]:::GitHub$Actions
    GitHub$Repository_U23_redis/RedisInsight -- "Is accessible to" --> DBIntegration_U23_redis
    GitHub$Repository_U23_redis/RedisInsight -- "Has" --> GitHub$Actions_U23_pipeline_U2D_build_U2D_windows_U2E_yml

Loading

[cursor]

Bug: System theme change listener completely removed instead of improved

The ThemeComponent that listened for OS theme changes via window.matchMedia(THEME_MATCH_MEDIA_DARK).addEventListener('change', handler) has been completely deleted rather than improved as described in the PR. This removes the ability for the app to automatically respond when users change their OS light/dark mode preference while having "System" theme selected. The PR description mentions adding checks for usingSystemTheme state, but instead the entire listener functionality was removed without being moved to ThemeProvider or elsewhere.

redisinsight/ui/src/App.tsx#L51-L52

RedisInsight/redisinsight/ui/src/App.tsx

Lines 51 to 52 in 3d68098

	return (
	<div className="main-container">

 

---