Logo

菜单

发布于 2026-01-06 2 阅读
0

向 GitHub 自述文件页面添加深色/浅色模式专用图片

向 GitHub 自述文件页面添加深色/浅色模式专用图片

最近，我们完成了开源项目Novu#gh-dark-mode-only的新 logo 设计，并在 GitHub 文档中发现，可以使用.md src 源后缀上的以下代码分别指定浅色和深色模式的图像：

以下是一个例子：

![Logo Dark](https://image-link.png#gh-dark-mode-only)
![Logo Light](https://image-link.png#gh-light-mode-only)
Enter fullscreen mode Exit fullscreen mode

根据用户的主题偏好，只会显示一张图片。让我们来看实际效果：

浅色模式

浅色模式图像

深色模式

暗模式图像

将图像居中

我们经常需要将较小的图片居中显示在屏幕中央。幸运的是，我们可以使用align="center"支持的div标签上的属性来实现这一点。


<div align="center">

  ![Logo Dark](https://user-images.githubusercontent.com/8872447/165779319-34962ccc-3149-466c-b1da-97fd93254520.png#gh-dark-mode-only)

</div>

<div align="center">

  ![Logo Light](https://user-images.githubusercontent.com/8872447/165779274-22a190da-3284-487e-bd1e-14983df12cbb.png#gh-light-mode-only)

</div>
Enter fullscreen mode Exit fullscreen mode

div 标签开始和结束之前的换行符很重要，否则图像将无法渲染。

我认为新的主题与徽标搭配起来非常棒，这是让你的 GitHub 个人或开源项目自述文件脱颖而出的又一个细节。

请在评论区分享你的结果！

文章来源：https://dev.to/scopsy/adding-darklight-mode-specific-images-to-your-github-readme-page-3cdj
使用 Next.js 重建我的博客
使用 HTML、CSS 和 Jav...