Yes, you heard me right, my GitHub readme has light and dark modes and is even responsive. In this article I will briefly cover the tricks I used t...
For further actions, you may consider blocking this person and/or reporting abuse
You should submit your README to:
A curated list of awesome READMEs
Awesome README
Elements in beautiful READMEs include, but are not limited to: images, screenshots, GIFs, text formatting, etc.
Examples
Nice, I was going to submit it to the other repo that showcases readmes but it had like 425 issues. This one looks maintained, so thanks! ππΌπ
You're welcome.
It looks fine ππΎ, but for some reason one half is generated in a light style and the other half in a dark style.
Hmmmm, that looks like you have the theme set to dark directly in GitHub but the system setting is light mode maybe (and they do some weird trickery for light and dark mode on images)?
Darn, not sure how to fix that unless I use 2 different versions for the buttons and then use the
<picture>element to fix.I will have to have a fiddle, can I ask what browser (and if you have light mode as your system preference as I think?). Thanks for the bug report! π€£ππΌπ
Safari Version 17.1.2 (19616.2.9.11.12)
I change the system theme, and the light version works fine.
When I change to the dark version, only the bottom half of the readme changes.
Ahhhh, it is the other problem, SVGs using embedded media queries for light mode preference don't work on Safari (actual iOS / MacOS issue) if you have dark mode enabled there!
I will fix that with 2
<picture>elements then, thanks for the heads up, never knew that restriction! ππΌπuse image with transparent background
Doesnβt work like that sadly as the colour scheme within the buttons needs to change for colour contrast. π
Very nice job @grahamthedev! Just one small correction:
The
data:URIs aren't considered the same context/origin (and will never be). It works because GitHub explicitly allows loading images using thedata:protocol as the image source. I've imported the policy from your profile with Secutils.dev to illustrate (take a look at theImage source (img-src)field): "[Dev.To] GrahamTheDev's Profile" content security policyThe
Image source (img-src)also shows that we have a few other options should GitHub removedata:from the allowed sources :)And a shameless plug, if anyone likes to learn more about CSP, feel free to check out my other post on exploring web applications through their (CSP): dev.to/azasypkin/explore-web-appli...
Ahhhh, maybe that was raw.github.com that had the more restrictive policy (or maybe I just made it up lol).
I will try and have a dig around on Monday and will correct it!
Thanks! ππΌπ
Love this! Cool stuff Graham!
Thanks bud! ππΌπ
To get rid of the vertical space between images, just set
line-heightto 0 in the wrapping div:I don't think GitHub will allow you to that and it will get stripped (or is
line-heightan allowed style attribute they accept?).I had the same thought with SVGs on the profile readme! I just was not motivated to carve up images to demonstrate. Nice work!
Haha, don't blame you on that one, this took me hours to get right and working within all the restrictions! Better to just have a simple readme in the end lol! π€£π
If you have seen some beautiful GitHub readme's, please share them in the comments section, I would love to see them! πͺπΌπ
This is so Cool. Thanks for sharing your insights, and I look forward to more posts about these topics.
Nice work π₯
Awesome!!
Killer work! This is a great idea, Graham π₯
Wonder if this is a big vulnerability to hide JS code in.
No, JS code will not work in an SVG
foreignObjecton GitHub due to their Content Security Policy settings, so it is pretty safe in that respect. πAmazing stuff!!!
100% πͺπΌπ
Incredible, thanks for sharing!
No problem, I hope you manage to steal a trick or two! πͺπΌπ
You're so extra lol π
impressive π₯π₯π₯, I'll try myself
Love this! Useful stuff π₯
I hope it helps someone create a cool looking readme! π€πΌπ
Amazing.
GitHub might contact and grab you into their UI/UX team :)
Haha, doubt it, there are far too many hacks here that will make them cry! π€£π
wow
Guys anyone tell me how to implement this and where please
Is there a way to create it easily for myself? I don't have any idea about html
I am afraid that if you do not know html and css this will be very difficult to do. You can always grab the source code from my repo and the images and try and adjust them to your needs but I imagine it will be tough if you donβt understand some of what is going on. π
Stop MySpacing my GitHub π
Uh oh...you just gave me an idea! π±π€£π
Exceptionally dank. Thank you for the tips! I will be taking a few ideas an incorporating them in my own GitHub profile.
Awesome, let me know when you do, would love to see it! π
Yes, you heard me right, my GitHub readme has light and dark modes and is even responsive. In this article I will briefly cover the tricks I
Discovering.
Too bad that it does not work on GitLab's README.md. :-/