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.

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

Renamed repo-img- to only- to allow setting images for only one theme #2886

Merged
merged 1 commit into from
Dec 12, 2024

Conversation

george-gca
Copy link
Collaborator

Closes #930.

We already had classes for this kind of feature, but it was used specifically for repository information. Just renamed the classes so it is clear how they can be used.

To use them with markdown, just do it like this:

![Only light](assets/img/prof_pic_color.png){: .only-light}
![Only dark](assets/img/prof_pic.jpg){: .only-dark}

and with html:

<img
  class="only-light"
  src="assets/img/prof_pic_color.png"
>
<img
  class="only-dark"
  src="assets/img/prof_pic.jpg"
>

Copy link

netlify bot commented Dec 12, 2024

Deploy Preview for relaxed-lollipop-b6bc17 ready!

Name Link
🔨 Latest commit be6d48f
🔍 Latest deploy log https://app.netlify.com/sites/relaxed-lollipop-b6bc17/deploys/675b0175f960d4000837833c
😎 Deploy Preview https://deploy-preview-2886--relaxed-lollipop-b6bc17.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@george-gca george-gca merged commit a9da28e into alshedivat:main Dec 12, 2024
7 checks passed
@george-gca george-gca deleted the dark-mode-only-img branch December 12, 2024 15:45
raishish pushed a commit to raishish/raishish.github.io that referenced this pull request Dec 15, 2024
…heme (alshedivat#2886)

Closes alshedivat#930.

We already had classes for this kind of feature, but it was used
specifically for repository information. Just renamed the classes so it
is clear how they can be used.

To use them with markdown, just do it like this:

```markdown
![Only light](assets/img/prof_pic_color.png){: .only-light}
![Only dark](assets/img/prof_pic.jpg){: .only-dark}
```

and with html:

```html
<img
  class="only-light"
  src="assets/img/prof_pic_color.png"
>
<img
  class="only-dark"
  src="assets/img/prof_pic.jpg"
>
```

Signed-off-by: George Araújo <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow specifying different images for use with dark and light mode
1 participant