Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop,Mobile: Resolves #3201: Render mermaid diagrams in dark mode when Joplin is in dark mode #9631

Merged

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Dec 29, 2023

Summary

Renders mermaid diagrams in dark mode when Joplin is in dark mode.

Resolves #3201.

Testing

Both mobile and desktop:

  1. Create a note with the following content:
# Summary

Renders mermaid diagrams in dark mode when Joplin uses a dark theme.


## Testing

Mindmap:
```mermaid
mindmap
	root((Dark mode rendering))
		Note viewer
			Desktop
				Auto-switch themes works ✅
				Light mode ✅
				Dark mode  ✅
				Editing the diagram causes re-rendering ✅
			Mobile
				Android
					Dark mode ✅
					Light mode ✅
					Auto-switch themes works ✅
				iOS
					Not tested ⛔
		Server/publish
			Dark mode not supported -- as before
			Now has wrong bg color ⛔
		RTE
			Visible ✅
			Auto-switch themes ⛔	
```

Flowchart:
```mermaid
flowchart LR
	a["Test"]
	b["Testing"]
	c["???"]
	d["Test 2"]
	a --> b
	b --> a
	a -.test.-> d
	d --> c
	b --> c
	c --> a
```

gitGraph:

```mermaid
gitGraph
	commit
	commit
	commit
	branch foo
	checkout foo
	commit
	checkout main
	commit
	merge foo
```

mermaid from a `div`:
<div class="mermaid">
gitGraph
	commit
</div>
2. Enable "auto-switch theme" 3. Switch the system theme to dark mode 4. Open the note in the note viewer 5. Switch the system theme to light mode 6. Open a different note, then open the original note in the viewer

Just desktop:
7. Switch the theme to "Dark"
8. Open the note in the rich text editor
9. Switch the theme to "Light"
10. Open the note in the rich text editor
11. Publish the note

  1. Open the note on Joplin Server

This has been tested on Android 12 and Ubuntu 23.10.

Known issues

  • While the theme does switch in the rich text editor, it does not switch automatically with the system theme. It is necessary to switch to a different note and back for the theme to change.

Screenshots

desktop and mobile screenshot: Dark mode
desktop and mobile screenshot: Light mode
server screenshot: Renders as before

@personalizedrefrigerator personalizedrefrigerator changed the title Desktop,Mobile: Resolves #3201: Render mermaid diagrams in dark mode Desktop,Mobile: Resolves #3201: Render mermaid diagrams in dark mode when Joplin is in dark mode Dec 29, 2023
Copy link
Collaborator

@tessus tessus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. LGTM.

@laurent22 laurent22 merged commit 4e09b6f into laurent22:dev Jan 4, 2024
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Render Mermaid diagrams with Dark theme when darker Joplin themes are on
3 participants