Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/scarmuega/choose-your-side

Example of how to use Theme-dependent images in your README
https://github.com/scarmuega/choose-your-side

Last synced: about 6 hours ago
JSON representation

Example of how to use Theme-dependent images in your README

Host: GitHub
URL: https://github.com/scarmuega/choose-your-side
Owner: scarmuega
License: mit
Created: 2022-03-08T18:15:35.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-05-05T22:26:09.000Z (over 2 years ago)
Last Synced: 2025-01-28T22:46:55.479Z (about 7 hours ago)
Homepage:
Size: 116 KB
Stars: 86
Watchers: 1
Forks: 8
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

Choose Your Side

## Theme-Dependent README Images

I was today years old when I found out you could tell Github to use a different image in your README depending on the dark / light theme of the user.

No more white-border hacks to make your dark logo show in both themes!

This repo is a quick experiment to see how it works. If done correctly, this README should display Yoda in light mode and Vader in dark mode (try switching your settings if you wish to see the alternative).

To make it work, you need to add both images (light version and dark version) side-by-side in your readme and add a suffix to each one so that they display conditionally.

```markdown
## Light Theme
![Yoda](https://raw.githubusercontent.com/scarmuega/choose-your-side/master/yoda.svg?sanitize=true#gh-light-mode-only)

## Dark Theme
![Vader](https://raw.githubusercontent.com/scarmuega/choose-your-side/master/vader.svg?sanitize=true#gh-dark-mode-only)
```

Check the [offical Github documentation](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to) for more info.

All copyrights and trademarks of the character images used belong to their respective owners.