fix #4257 fixed ui for mermaid diagrams in dark mode

[X1Vi]

fixes #4257
The diagrams are now visible and can be seen easily in dark mode

[RoccoSmit]

@X1Vi , by forcing dark mode light mode now has the issue dark mode had. Are you able to set the values dynamically based on the user settings?

Current light mode:

PR light mode:

[X1Vi]

Fixed the issue
I am dynamically changing the values now.
Thanks for the advice.

When Dark theme

When light theme

[RoccoSmit]

When you select Follow System as the theme the commonContext.appearance value is system, meaning that system set dark mode will use light mode styles.

Have a look here to see how this has been handled in the past

[X1Vi]

When you select Follow System as the theme the commonContext.appearance value is system, meaning that system set dark mode will use light mode styles.

Have a look here to see how this has been handled in the past

Can you elaborate more as to what you want exactly ? because if it is system it just goes to default.

[RoccoSmit]

@X1Vi , there are 3 theme options

Light -> Always use light theme,
Dark -> Always use dark theme,
Follow System -> Use light or dark based on what your OS/browser is set to use

When you select Follow System and your OS/browser is set to dark mode, your code will see system != dark and show the diagram in light mode while the rest of the app loads in dark mode

My suggestion was to either

• use the code linked above that uses getSystemColorScheme in utils.ts to get the light or dark value from system
• use the local storage value that gets set in the above linked code

@johnnyjoygh added a 3rd option of using the useColorScheme method from the @mui/joy library to get the theme to use

[X1Vi]

@johnnyjoygh I have made a new and better solution I wasn't completely aware that how the theme works completely (Didn't knew there was another hook as well). I have selected themes which I sought suitable if you feel like they are not suitable then feel free to ping me. I think we will have to just adjust the themes.

[X1Vi]

I have fixed the changes as told by @RoccoSmit

[RoccoSmit]

LGTM

[johnnyjoygh]

Suggested change

	const handleMermaidTheme = () => {
	return mode == "dark" ? "dark" : "default";
	};
	const mermaidTheme = mode == "dark" ? "dark" : "default";

[johnnyjoygh]

Please use const instead function call.

[X1Vi]

Please use const instead function call.

Done

[johnnyjoygh]

LGTM