themes

Subscribe to all “themes” posts via RSS or follow GitHub Changelog on Twitter to stay updated on everything we ship.

→ ~ cd github-changelog
→ ~/github-changelog|main git log main
showing all changes successfully

High contrast theme improvements

A screenshot showing the adjusted UI elements for the high and dark color contrast themes

The light and dark high contrast themes have been updated to improve readability.

Now:

  • Both themes aim to meet a minimum contrast ratio of 7:1 for all elements, and the secondary or “muted” text and icons appear slightly lighter or darker than the default text, enhancing the visual hierarchy throughout GitHub’s interface.
  • In the light high contrast theme, the global navigation bar appears inset with a darker background color.
  • In the dark high contrast theme, the foreground text over solid backgrounds is now white, and higher contrast borders have been added to all interactive elements.
See more

Specify theme context for images in Markdown GA

You can now specify whether to display images for light or dark themes in Markdown, using the HTML <picture> element in combination with the prefers-color-scheme media feature.

For example:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>
See more

Specify theme context for images in Markdown (Beta)

You can now specify whether to display images for light or dark themes in Markdown, using the HTML <picture> element in combination with the prefers-color-scheme media feature.

For example:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

An animated screenshot of an issue comment that changes the color mode. The content shows an octobiwan in light and stormtroopocat in dark color mode.

See more

Tritanopia Colorblind Theme Beta

A new Tritanopia colorblind theme for blue/yellow color blindness is now available to all github.com users in a public beta. Based on customer feedback, the previous Colorblind theme has been split into two themes: a Protanopia & Deuteranopia colorblind theme, and a Tritanopia colorblind theme. A Protanopia & Deuteranopia colorblind theme is now also available in beta. Navigate to the “Appearance” page in your profile settings to update your theme preferences.

Share feedback

 

See more

Protanopia & Deuteranopia Colorblind Themes Beta

New Protanopia & Deuteranopia colorblind themes for red/green color blindness are now available to all github.com users in a public beta. Based on customer feedback, the previous Colorblind theme has been split into two themes: a Protanopia & Deuteranopia colorblind theme, and a Tritanopia colorblind theme. This Protanopia & Deuteranopia colorblind theme is an update to the previous Colorblind themes. A Tritanopia colorblind theme is now also available in beta. Navigate to the “Appearance” page in your profile settings to update your theme preferences.

Share feedback

 

See more

Light high contrast theme GA

A light high contrast theme, with greater contrast between foreground and background elements, is now generally available to all github.com users. Navigate to the "Appearance" page in your profile settings to choose the light high contrast theme.

A VS Code light high contrast theme matching the official github.com theme is also now generally available. To start using the new theme, go to the VS Marketplace, click on the "Install" button, and select your preferred theme in VS Code.

Share feedback

appearance settings with new light high contrast theme

See more

Specify theme context for images in Markdown

Users can now specify the theme an image is displayed for in Markdown. Appending #gh-dark-mode-only or #gh-light-mode-only to the end of an image url will define whether it's only shown to viewers using a light or a dark GitHub theme. For example:

Two screenshots of the same issue in dark and light color mode demonstrating the two fragment options by showing an optimized github logo for each color mode

The GitHub logo in the above screenshots uses the following Markdown to specify the theme context:

![GitHub-Mark-Light](https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png#gh-dark-mode-only)![GitHub-Mark-Dark](https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png#gh-light-mode-only)
See more

Dark high contrast theme beta for github.com

A dark high contrast theme, with greater contrast between foreground and background elements, is now available to all github.com users as a public beta. Opt-in to the beta by enabling the theme in your Feature Preview settings, located in the profile menu dropdown. Once the Feature Preview has been enabled, navigate to the "Appearance" page in your profile settings to choose the dark high contrast theme.

Please note, you may notice color issues with other themes when in this beta. If they are disruptive you can opt-out by disabling in Feature Preview.

Share feedback

Animated image of switching between dark default theme and dark high contrast on the appearance settings page

See more

Dark and dimmed themes are now generally available

Dark and dark dimmed themes are now generally available to all github.com and GitHub Enterprise Cloud users. The updated appearance settings included in this release are designed to give you more control over your theme preferences. Select Single theme or Sync to system to customize the themes that are active during day and night. GitHub will now default to match system preferences when a user is logged out, or when a user is logged in and theme preferences have not yet been set. Manage your theme settings in the "Appearance" tab located in your profile settings.

Share feedback

GitHub-dimmed-theme

See more
View more changes