如何利用 HTML 的 `<picture>` 元素,在 GitHub Markdown 中根据用户主题模式

开发者切换到 GitHub 的暗黑模式(或反之亦然) 时,标准图片可能会显得不协调,背景太亮或颜色冲突。

而不是强制使用一刀切的图片,你可以根据主题调整你的视觉效果,使其无缝融合。这是一个小改变,但可以使你的项目看起来更加精致。

一个片段,两种主题!

这是你可以复制到你的 README(或任何 Markdown 文件)中的魔法片段:

ini 复制代码
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="dark-mode-image.png">
  <source media="(prefers-color-scheme: light)" srcset="light-mode-image.png">
  <img alt="Fallback image description" src="default-image.png">
</picture>

虽然我们说这是魔法,但让我们揭开幕后看看它是如何工作的:

  • <picture> 标签允许你为不同的场景定义多个图片源。

  • The <source media="..."> attribute matches the user's color scheme.

    • media="(prefers-color-scheme: dark)" 时,浏览器会在 GitHub 处于暗黑模式时加载 srcset 图片。
    • 类似地,当 media="(prefers-color-scheme: light)" 时,浏览器会在 GitHub 处于光明模式时加载 srcset 图片。
  • 如果浏览器不支持 <picture> 元素,或者用户的系统不符合任何定义的媒体查询,将使用 fallback <img> 标签。

你可以在你的仓库 README 文件、托管在 GitHub 上的文档,以及任何其他在 GitHub.com 上渲染的 Markdown 文件中使用这种方法!

Demo

没有什么比一个演示来帮助你入门更好了。这里是如何在实践中实现的:


GitHub 博客

@Cassidy Williams

一句话总结

介绍如何利用 HTML 的 <picture> 元素,在 GitHub Markdown 中根据用户主题模式(黑暗/光明)动态切换图片。

摘要

本文介绍一种优化 GitHub 仓库 README 文件及其他 Markdown 文档中图片显示效果的方法,使其能够根据用户的 GitHub 主题设置(黑暗模式或光明模式)自动调整。通过使用 HTML 的 <picture> 元素,开发者可以指定不同的图片资源对应不同的主题模式。文章提供了具体的代码示例,解释了 <picture> 元素的工作原理,包括如何使用 media 属性来检测用户的主题偏好,以及如何在不支持 <picture> 元素的浏览器中提供备用图片。这种方法可以提升 GitHub README 文件的专业性和用户体验,使项目在不同主题下都呈现出最佳视觉效果。

主要内容

    1. 使用 <picture> 元素可根据 GitHub 主题动态切换图片

    通过 <picture> 标签和 media 属性,可以针对黑暗和光明模式加载不同的图片,提升在不同主题下的视觉效果。

    1. source 标签的 media 属性匹配用户颜色方案

    media="(prefers-color-scheme: dark)" 匹配黑暗模式,media="(prefers-color-scheme: light)" 匹配光明模式。

    1. 提供兼容性方案,确保所有浏览器都能正常显示图片

    当浏览器不支持 <picture> 或用户系统不匹配任何 media 查询时,img 标签确保图片正常显示。

精选

  • GitHub 现已支持黑暗/光明模式,开发者们,让你的 README 图片在这两种主题下都光彩夺目!
  • 告别一刀切,定制视觉效果,与主题无缝融合。
  • <picture> 标签允许你为不同的场景定义多个图像源。
相关推荐
wuk9987 小时前
基于MATLAB编制的锂离子电池伪二维模型
linux·windows·github
ai小鬼头8 小时前
AIStarter如何助力用户与创作者?Stable Diffusion一键管理教程!
后端·架构·github
天天扭码8 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
独立开阀者_FwtCoder11 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
极客悟道13 小时前
巧解 Docker 镜像拉取难题:无需梯子和服务器,拉取数量无限制
后端·github
独立开阀者_FwtCoder13 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
T__TIII15 小时前
Dify 自定义插件
人工智能·github
小皮侠19 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github
汪汪队睡大觉7519 小时前
OpenAI-Kotlin文档详解
github
蛋黄蛋黄19 小时前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github