Skip to content

Commit

Permalink
Make README logo work in dark mode
Browse files Browse the repository at this point in the history
Dark mode is, they say, the new thing, and the logo doesn't work super
well with it, because it's black on dark grey.  This is surprisingly
hard to fix.  There are a few options:
- make the logo colored; sorry, but I like black
- add a white border to the logo; this is what Apollo does but I
  think it's pretty ugly in dark mode
- add svg with media queries; this works well but only if the github
  dark mode setting matches the browser(/OS) dark mode setting, since
  that's what the media queries look at
I opted for option 3.  This required converting the text in the SVG to
paths, since it really matters that you have the exact same font.  (I
tested on Android Firefox, which empirically doesn't have the same fonts
I have on desktop.)

Fixes #17.

Issue: #17

Test plan:
tested that it looks good on both mobile firefox in dark mode, and
desktop firefox+chrome in light mode.

Reviewers: dbraley, kevinb, kevindangoor, marksandstrom
  • Loading branch information
benjaminjkraft committed Sep 9, 2021
1 parent 6709c1e commit 86b88d7
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 60 deletions.
3 changes: 0 additions & 3 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,4 @@ check:
go run github.com/golangci/golangci-lint/cmd/golangci-lint run ./...
go test -cover ./...

docs/images/genqlient.png: docs/images/genqlient.svg
convert -density 600 -background transparent "$<" "$@"

.PHONY: example
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
![generated graphql client ⇒ genqlient](docs/images/genqlient.png)
<img width="100%" alt="generated graphql client ⇒ genqlient" src="docs/images/genqlient.svg">

# genqlient: a truly type-safe Go GraphQL client

Expand Down
5 changes: 5 additions & 0 deletions docs/images/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# genqlient logo

`genqlient-orig.svg` is the original logo. To create `genqlient.svg`, I:
- converted all text to paths
- added media queries to make the paths white if the user is in dark mode (see issue #17)
99 changes: 99 additions & 0 deletions docs/images/genqlient-orig.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/images/genqlient.png
Binary file not shown.
Loading

0 comments on commit 86b88d7

Please sign in to comment.