fix: dark-mode for scalar API docs when appearance is system settings #11085
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Added dark mode support for the Scalar API documentation in the RestPlayground component, ensuring proper theme synchronization with system settings.
- Added
useColorModehook import from@scalar/use-hooksinpackages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx - Configured
darkModeandforceDarkModeStateproperties in ApiReferenceReact based on theme context - Implemented lazy loading of color mode hook to ensure proper theme initialization
💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!
1 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
| import('@scalar/use-hooks/useColorMode').then((colorMode) => | ||
| colorMode.useColorMode(), | ||
| ); |
There was a problem hiding this comment.
logic: The useColorMode() hook is called immediately without being used, which may cause unnecessary re-renders
| darkMode: theme.name === 'dark', | ||
| baseServerURL: REACT_APP_SERVER_BASE_URL + '/' + schema, | ||
| forceDarkModeState: theme.name === 'dark' ? 'dark' : 'light', |
There was a problem hiding this comment.
style: Redundant dark mode configuration - darkMode and forceDarkModeState properties serve the same purpose
There was a problem hiding this comment.
- when using anyone of them: changing from dark to light mode works but from light to dark doesn't work as expected.
|
I cannot reproduce the original issue on main 🤔 |
|
I get the opposite behavior with this PR: 
IMO we should just close the original issue if it happens only when you change the system specifically on that page, and that we don't have a good/clean fix |
Seems to be a bigger issue, if I play around I can get similar behaviors in the app |
|
So I'm sorry @Nabhag8848 I will just close this and this original issue. Thanks for digging into this! |
Issue
Demo
Screen.Recording.2025-03-21.at.3.23.06.PM.mov