About half of GitHub's visitors use dark mode. A stats card made for dark mode is a black box on a white page for the other half, and the reverse. Profile README Studio gives each card a version for each theme, so every visitor sees the one that fits.
Choose how widget colours work
In Page settings, Widget colours has two choices:
- Match each visitor: every card has a light and a dark version, and GitHub shows the one that matches the visitor's theme
- Same for everyone: one version for every visitor, whatever their theme
Match each visitor is the right choice for almost everyone. Use Same for everyone only if you want one fixed look, like a dark card design on purpose.
Pick a light and a dark theme
With Match each visitor, pick two themes: one for Light mode and one for Dark mode. There are 57 in total, for example:
| Light themes | Dark themes |
|---|---|
| GitHub light, Solarized light, Catppuccin Latte, Gruvbox light | GitHub dark, GitHub dimmed, Tokyo Night, Dracula, Nord, Catppuccin Mocha, Rosé Pine, One Dark Pro |
Auto: light + dark uses GitHub's own light and dark themes. Pick a matching pair (Catppuccin Latte with Catppuccin Mocha, Gruvbox light with Gruvbox) and your profile looks designed in both modes.
Hide card borders removes the frame around cards, which usually looks cleaner on GitHub's page.
See how it works
For each card, the studio writes a <picture> element with two sources: the dark and the light file of that card in your profile repository.
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/you/you/main/profile-assets/card-stats-dark.svg" />
<img src="https://raw.githubusercontent.com/you/you/main/profile-assets/card-stats-light.svg" alt="GitHub stats" />
</picture>The browser picks the dark source when the visitor uses dark mode, and the plain image otherwise. GitHub allows this in READMEs, so no JavaScript is involved. The guide to dark mode images explains the details.
Preview both themes and a phone
Above the preview, switch between Light and Dark, and between Desktop and Phone. Check all four combinations once:
- In Light, look for cards with dark backgrounds that did not switch
- In Dark, look for images with white backgrounds, like a logo or a GIF
- On Phone, look for rows of cards or icons that get too small, and banners that cut off text
Images you add yourself with Image or GIF can also have a light and a dark version. A logo with a transparent background and dark text disappears in dark mode unless you give it a second version.
Colour the rest to match
Blocks that are not cards (the banner, badges, dividers, the typing text) have their own colour settings. Take the accent colour from your dark theme and use it in the banner and badges, and the whole README reads as one design.
The next lesson adds the parts that show your work: repositories, your tech stack, posts and links.