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

Make logo dark-mode friendly #4020

Merged
merged 1 commit into from
Oct 13, 2021
Merged

Make logo dark-mode friendly #4020

merged 1 commit into from
Oct 13, 2021

Conversation

takameyer
Copy link
Contributor

@takameyer takameyer commented Oct 12, 2021 •
edited
Loading

What, How & Why?

Added SVG in the logo that detects dark-mode preference from the users system settings and changes the text color based on said preference.
Unfortunately, if the user has their system setting to "dark" and their github preferences to "light", it will display the wrong fill color. I assume this should work for 99% of the vistors reading the Readme.

@cla-bot cla-bot bot added the cla: yes label Oct 12, 2021
@takameyer takameyer force-pushed the andrew/logo branch 5 times, most recently from d4fa901 to e85c9f6 Compare October 12, 2021 16:03
@kraenhansen
Copy link
Member

Great idea. I wonder if this should be using the Realm logo from our LeafyGreen design system or if this is reserved for the "server side" / sync part of the product: https://www.mongodb.design/component/logo/example/

@takameyer
Copy link
Contributor Author

Great idea. I wonder if this should be using the Realm logo from our LeafyGreen design system or if this is reserved for the "server side" / sync part of the product: https://www.mongodb.design/component/logo/example/

The SVG is actually from the design department. I just made it dark mode aware

@kraenhansen
Copy link
Member

The SVG is actually from the design department.
Oh okay. I guess they use different logos for SDKs vs the product in Atlas.

kraenhansen
kraenhansen approved these changes Oct 12, 2021
View reviewed changes
Copy link
Member

@kraenhansen kraenhansen left a comment

Choose a reason for hiding this comment

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

LGTM if the logo was produced by someone brand aware.

@nirinchev
Copy link
Member

It's not a showstopper, but this doesn't appear to work on Safari 😭

Safari

Screen Shot 2021-10-12 at 23 02 20

Chrome

Screen Shot 2021-10-12 at 23 02 24

@takameyer takameyer force-pushed the andrew/logo branch 5 times, most recently from 12766c7 to 43b0c2a Compare October 13, 2021 06:33
@takameyer
Copy link
Contributor Author

takameyer commented Oct 13, 2021 •
edited
Loading

It's not a showstopper, but this doesn't appear to work on Safari 😭

Safari

Screen Shot 2021-10-12 at 23 02 20

Chrome

Screen Shot 2021-10-12 at 23 02 24

Oh no! It seems Safari does not support this feature in SVGs embedded inside an <img>. So close!

@kneth
Copy link
Contributor

kneth commented Oct 13, 2021

I have approved the change. It is not a full-proof solution but it is an improvement to what we have now.

@takameyer takameyer merged commit 8a51d6e into master Oct 13, 2021
@takameyer takameyer deleted the andrew/logo branch October 13, 2021 07:49
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@kraenhansen kraenhansen kraenhansen approved these changes

@kneth kneth kneth approved these changes

Assignees
No one assigned
Labels
cla: yes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@takameyer @kraenhansen @nirinchev @kneth