question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Document auto theme change in README

See original GitHub issue

Is your feature request related to a problem? Please describe.

As explained in #690, it is not yet possible to switch the theme automatically on the Vercel instance. Nevertheless, there are multiple ways to get the card to switch themes on the client side. The methods for doing this (i.e. transparent background, #gh-dark-mode-only and source media) need to be explained in the README so that users are aware these options exist.

Describe the solution you’d like

It would be great if README would have a section for setting up dynamic themes. This section should explain:

Anurag's GitHub stats

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent)
  • That users can use bg_color=00000000 to set a transparent background.

Anurag's GitHub stats

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark&bg_color=00000000)

Anurag's GitHub stats Anurag's GitHub stats

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only)
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=default#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only)
  • That they can use GitHub’s new media feature in the HTML <picture> element to switch the theme automatically based on the set GitHub theme. This option, however, requires the user to refresh the page before the card theme is updated.
<a href="https://github.com/anuraghazra/github-readme-stats">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark">
  <img alt="Shows Anuraghazra's GitHub Stats." src="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=default">
</picture>
</a>
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark"> Shows Anuraghazra's GitHub Stats. </picture>

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:15 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
lostgirljourneycommented, Oct 4, 2022

I want to get assigned to this.

0reactions
rickstaacommented, Oct 28, 2022

Done in #2229.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Automatically switch between day and night themes #1001
In the github night mode, displaying the white README element is really bad~~ ... Automatically switch between day and night themes #1001.
Read more >
Dark Mode: Overview & Custom CSS - ReadMe Documentation
If your ReadMe plan doesn't support custom CSS: you'll see a one-time “Enable Dark Mode” button. Once enabled, your project's color scheme will...
Read more >
How to add color to GitHub's README.md file - Stack Overflow
One way to add color to a README is by utilising a service that provides placeholder images. For example this Markdown can be...
Read more >
Markdown | IntelliJ IDEA Documentation - JetBrains
When you clone a project, there is usually a README.md file with ... Click the corresponding gutter icon or press Ctrl+Shift+F10 while the ......
Read more >
Markdown Preview Github Styling - Visual Studio Marketplace
Extension for Visual Studio Code - Changes VS Code's built-in markdown preview to ... auto : Automatically match the editor color theme.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found