DEV Community

Cover image for Using Dark/Light Mode Specific Images in GitHub Markdown

Using Dark/Light Mode Specific Images in GitHub Markdown

Arnav Kumar on February 14, 2022

Hey There Devs! ๐Ÿ‘‹ Hope you are doing great with your projects. TOC Why this post? ๐Ÿค” Procedure ๐Ÿงช Example Live Example ...
Collapse
 
tlylt profile image
Liu Yongliang

That's interesting:)
Did a bit of search online and found the official documentation of this feature here and the discussions leading up to this feature in the community

Collapse
 
arnavkr profile image
Arnav Kumar

Thats really nice!

Hope we will be getting somethng like that in dev.to post markdowns too

Collapse
 
lionelrowe profile image
lionel-rowe

Really not a fan of GitHub's approach here. Markdown is supposed to be a format that's compatible with many platforms, and a valid URL can only have one hash. That means that other platforms either have to implement the URL hash matching logic along with the gh-* names, or they have to implement it in an inconsistent way, such as through query params (https://example.com/img.jpg?gitlab-theme=dark&discourse-theme=dark&some-other-platform=dark#gh-dark-mode-only). Why not just use a single, cross-platform query param (?theme=dark), add this as a documented part of GitHub-flavored markdown, and be done with it? Other platforms that fully or partially support GFM can then add support in their own time, without using up the single "slot" in the URL's hash or using explicitly gh-* named parameters.

Collapse
 
arnavkr profile image
Arnav Kumar

I am totally agree with your points here. And also i didn't like how they restricted to the images that are only hosted via github. Ig they did that to overcome that hash issue in urls. They might have thought that if they won't allow any other urls, there won't be any problems in using hash.
tbh its a very bad and untidy approach to simple thing. In my views either the query paramaters are good or specifying them as options like ![Dark](https://example.com/dark_img.png){theme = dark}.

Seems like its time to open an issue at the their support or in the github repo

Collapse
 
arnavkr profile image
Arnav Kumar

In the community the actual guy who requested for the feature actually had suggested somewhat better approach but the GitHub doesn't seem to take his suggestions.

Image

Collapse
 
lionelrowe profile image
lionel-rowe

I guess they are owned by Microsoft now so maybe we shouldn't be surprised by this kind of embrace-extend-extinguish bullshit.

Collapse
 
arnavkr profile image
Arnav Kumar

Microsoft keep doing unusual things ๐Ÿ˜‘

Collapse
 
nicolus profile image
Nicolas Bailly

To be fair github started using "github flavored markdown" (which basically means that if you clone a repository on any other host your readme.md will not display correctly) loooong before Microsoft every thought about buying them.

Thread Thread
 
lionelrowe profile image
lionel-rowe

I'm on board with GFM, especially now it has become a de-facto standard (albeit one among several). Ideally there'd be a proper spec for it, but there isn't one of those even for the original version of Markdown.

The problem with gh-* hash params is that it forces other implementers of GFM to implement this explicitly GitHub-centric API that even end users have to know about. I mean maybe that's intentional from a "branding" point of view, but it's incredibly obnoxious from a design point of view.

Collapse
 
rajnishanand profile image
Rajnish Anand

Actually i been looking for this. โœจ

Collapse
 
arnavkr profile image
Arnav Kumar

Pleased to be helpful โค๏ธ

Collapse
 
incrementis profile image
Akin C. • Edited

Hello Arnav Kumar,

thank you for your article.
I enjoyed reading it and testing what you wrote.
I took two images that let the user know what mode he/she is in.
This is interesting because I'm telling the user what mode he/she is in without me knowing what mode the user is really in :D!

Collapse
 
arnavkr profile image
Arnav Kumar

What a creative idea lol! โค๏ธ๐Ÿ‘

Collapse
 
andypiper profile image
Andy Piper

This is so useful -- thanks! Bookmarked!

Collapse
 
arnavkr profile image
Arnav Kumar

โค๏ธ

Collapse
 
athifbinu profile image
Athif binu

Tanks for the valuable information

Collapse
 
arnavkr profile image
Arnav Kumar

โค๏ธ

Collapse
 
athifbinu profile image
Athif binu

Hi bro i want to speak withe u .
becuase i want to your mentoring support tanks bro see you

Collapse
 
kiril6 profile image
Kiril Delovski

short but enough and super cool. :)

Collapse
 
arnavkr profile image
Arnav Kumar

Thanks!โค๏ธ

Collapse
 
capscode profile image
capscode

This is cool..
Thanks for this article ๐Ÿ˜Š

Collapse
 
arnavkr profile image
Arnav Kumar

โค๏ธ

Collapse
 
anurag90tech profile image
___Anurag__Saikia___

Great work brother ๐Ÿ‘๐Ÿ˜€

Collapse
 
arnavkr profile image
Arnav Kumar

Thanks! โค๏ธ

Collapse
 
scalaadeveloper profile image
Scalaadeveloper

Do you have a video for this because I can't understand your text I can't speak english

Collapse
 
arnavkr profile image
Arnav Kumar • Edited

Created a simple demo, hope you get it now

Collapse
 
scalaadeveloper profile image
Scalaadeveloper

Thank you very much

Collapse
 
virtualvivek profile image
Vivek Verma

This is interesting and much helpful for my projects.

Collapse
 
arnavkr profile image
Arnav Kumar

Thanks! โค๏ธ

Collapse
 
melfordd profile image
Melford Birakor

Thank you

Collapse
 
arnavkr profile image
Arnav Kumar

โค๏ธ

Collapse
 
kavyaj profile image
kavyaj

Such a cool idea Arnav! Thanks for sharing ๐Ÿ˜

Collapse
 
arnavkr profile image
Arnav Kumar

Thanks! โค๏ธ

Collapse
 
afzl210 profile image
Mohd Afzal Khan

Thanks

Collapse
 
arnavkr profile image
Arnav Kumar

โค๏ธ

Collapse
 
arnavkr profile image
Arnav Kumar

I already mentioned those in disclaimers thought can paste your images in the markdown editor and it will get uploaded then you can use it the way you want

Collapse
 
sscsps profile image
Sahil Soni

Just used this and found that when you have the other theme than the one provided, the element is still displayed, and there's an extra (empty) line where the expected image is to be,

to Mitigate this, I just added both images in one line, take a look at this for reference github.com/SscSPs/color/issues/47

Collapse
 
aymhenry profile image
Ayman Henry • Edited

I use app to do work for me.
I use (typo) app.

Collapse
 
peterrox profile image
Info Comment hidden by post author - thread only accessible via permalink
PeterRox

How to disable Markdown rendering ?
Dua For Love Marriage To Agree Parents

Collapse
 
arnavkr profile image
Arnav Kumar • Edited

Ig currently there's isn't any way to do that now but i wonder why anyone would want to disable markdown rendering in markdowns thats the main core point of the markdowns.

If you don't wanna render it, then just use simple .txt files its all you need

Dua For Love Marriage To Agree Parents

Btw this link doesn't seem relatable to the context

Some comments have been hidden by the post's author - find out more