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.

Sign up for GitHub

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

Jump to bottom

Excalidraw diagrams don't look good in dark mode on Safari #3497

Closed
willmcgugan opened this issue Oct 10, 2023 · 6 comments · Fixed by #3503
Closed

Excalidraw diagrams don't look good in dark mode on Safari #3497

willmcgugan opened this issue Oct 10, 2023 · 6 comments · Fixed by #3503
Assignees
@rodrigogiraoserrao

Comments

@willmcgugan
Copy link
Collaborator

I think this is due to the CSS that modifies the SVGs when in dark mode.

The CSS in question uses css "filter:". I wonder duplicating those rules with "-webkit-filter" would fix it.
@rodrigogiraoserrao rodrigogiraoserrao self-assigned this Oct 10, 2023
@rodrigogiraoserrao
Copy link
Contributor

Do you mean specifically in mobile?

@willmcgugan
Copy link
Collaborator Author

No, Safari on macBook.

@rodrigogiraoserrao
Copy link
Contributor

rodrigogiraoserrao commented Oct 10, 2023 •
edited
Loading

Safari + macbook the filter is being applied properly (not on mobile, though).
For example, this (v) is the diagram I get for pushing screens:

Screenshot 2023-10-10 at 15 11 52

Renaming filter to -webkit-filter or duplicating it and making a -webkit-filter rule don't make a difference on safari + macbook.

Do you see something different, do you mean to say you don't like these colours, or am I missing something?

@willmcgugan
Copy link
Collaborator Author

What version of Safari do you have? This is what I see.

Screenshot 2023-10-10 at 15 15 51

I have 17.0 (19616.1.27.211.1)

@rodrigogiraoserrao
Copy link
Contributor

Version 16.4 (18615.1.26.110.1)!
I'll update and then fix this.

rodrigogiraoserrao added a commit that referenced this issue Oct 10, 2023
@rodrigogiraoserrao
Add will-change to excalidraw diagrams.
12240ef 
Adding will-change: filter seems to fix the issue with the Excalidraw diagrams on dark mode and recent Safari versions.
This change was also tested on Firefox and Chrome and it didn't break the diagrams in those browsers.

This fixes #3497.
@rodrigogiraoserrao rodrigogiraoserrao mentioned this issue Oct 10, 2023
Merged
willmcgugan pushed a commit that referenced this issue Oct 10, 2023
@rodrigogiraoserrao
Add will-change to excalidraw diagrams. (#3503)
e1c3800 
Adding will-change: filter seems to fix the issue with the Excalidraw diagrams on dark mode and recent Safari versions.
This change was also tested on Firefox and Chrome and it didn't break the diagrams in those browsers.

This fixes #3497.
@github-actions
Copy link

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rodrigogiraoserrao rodrigogiraoserrao

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add will-change to excalidraw diagrams. Textualize/textual
2 participants
@willmcgugan @rodrigogiraoserrao