🦓 斑马指南：展示Markdown图像的明暗模式 🚀
警告：表达的观点可能不适合所有观众！ 😂
TL;DR #
通过本文，您将了解并能够根据用户偏好展示您的Markdown图像-Dark或Light模式。
我将介绍如何在GitHub README.md中添加两个图像-根据所选择的
theme，您的图像将适当地响应。我将指导您完成整合过程。 如何在Markdown中添加图片，并展示如何使用React使其具有响应式功能。 😎
目录 #
- TL;DR
- 目录
- 你使用浅色还是深色主题？
- 提高用户体验
- 在您的GitHub README中使用响应式图像
- Markdown中使用React实现响应式图片
- React文件
- author_image_url: https://boxyhq.com/img/team/nathan.jpg
你使用浅色还是深色主题？ #
我不知道你是怎么想的，但无论在哪个平台上，如果它们有切换浅色和深色模式的选项，那当然是浅色模式。
事实上，当我写这篇文章的时候，我正在将浅色主题切换为深色主题！
[
这个重要的时刻 近年来，用户界面中暗色和亮色模式选项的出现已成为一种流行趋势。
根据安卓用户的说法，我绝对不是唯一一个喜欢使用暗色主题选项的人，91.8%的用户偏爱暗模式 (opens new window)，所以我们可以猜测这个数字在所有操作系统中都相当高。
当然，这可能引发激烈的争论，所以我会尽量少发表自己的观点。
提高用户体验 #
主要目标是通过在您的应用中提供选项来改善用户体验。
有几种方法可以创建每个图像的多个版本，在本教程中我们不会深入讨论细节。
只需确保您的图像在两个主题中都能显眼，并且具有透明背景，您将会很满意。
让我们开始吧！
在您的GitHub README中使用响应式图像 #
您是否有一个项目并希望使您的GitHub项目README.md更加引人注目？
无论用户使用什么样的亮色主题，我们都需要一种方法来指定图像应在Markdown中显示的主题（明亮或暗）。
当您想要根据用户选择的配色方案优化图像的显示时，这一点尤为有用，并且它涉及使用下面显示的**HTML <picture>**元素与prefers-color-scheme媒体特性相结合。
请继续拖放您的图像文件到指定位置。
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/boxyhq/.github/assets/66887028/df1c9904-df2f-4515-b403-58b14a0e9093">
<source media="(prefers-color-scheme: light)" srcset="https://github.com/boxyhq/.github/assets/66887028/e093a466-72ea-41c6-a292-4c39a150facd">
<img alt="BoxyHQ Banner" src="https://github.com/boxyhq/jackson/assets/66887028/b40520b7-dbce-400b-88d3-400d1c215ea1">
</picture>
进入全屏模式 退出全屏模式
然后就是这样了！
[![SAML Jackson light mode] 请点赞⭐ SAML Jackson 仓库
Markdown中使用React实现响应式图片 #
假设今天我要像往常一样用Markdown写一篇博客，并发布到我的网站上。
我使用的图片需要根据用户偏好进行响应式设计，但在Markdown中无法监听本地存储中的theme变化并设置状态。
[ {
// 定义一个状态变量来跟踪用户的登录状态
const [currentTheme, setcurrentTheme] = useState(localStorage.getItem('theme'));
// 在useEffect中添加一个'存储'事件的事件侦听器
useEffect(() => {
const handleStorageChange = (event) => {
console.log('检测到存储事件:', event);
// 检查更改的键并相应地更新状态
console.log("事件", ev 下面是将上述Markdown翻译为中文并删除一级标题（ent.key）的结果：
```jsx
import { useState, useEffect } from 'react';
const ToggleImages = () => {
const [currentTheme, setCurrentTheme] = useState('');
useEffect(() => {
const handleStorageChange = (event) => {
console.log('Storage change event:', event);
if (event.key === 'theme') {
setCurrentTheme(event.newValue);
}
};
window.addEventListener('storage', handleStorageChange);
// 组件卸载时清除事件监听器
return () => {
window.removeEventListener('storage', handleStorageChange);
};
}, []); // 空的依赖数组确保此效果在组件挂载时只运行一次
return (
<div className="image-container">
{currentTheme === 'light' ? (
<img
id="light-mode-image"
src="/img/blog/boxyhq-banner-light-bg.png"
alt="Light Mode Image"
></img>
) : (
<img
id="dark-mode-image"
src="/img/blog/boxyhq-banner-dark-bg.png"
alt="Dark Mode Image"
></img>
)}
</div>
);
}
export default ToggleImages;
``` * React的useState hook用于管理`currentTheme`的状态，该状态代表用户在本地存储中选择的主题。
* useEffect hook用于添加一个事件监听器，监听 'storage' 事件。当 'storage' 事件发生时（表示本地存储发生改变），组件会检查改变的键是否为 `theme`，然后相应地更新 `currentTheme` 的状态。
* 该组件根据用户选择的主题渲染不同的图片，如果主题为 `light`，则显示亮色模式的图片，否则显示暗色模式的图片。
很好，让我们继续！
## Markdown文件
让我们为我们的新博客创建一个 .md 文件。
slug: light-and-dark-mode-responsive-images title: '亮色和暗色模式响应式图片' tags_disabled: [ developer, react, javascript, open-source, ] image: /img/blog/light-dark.png author: Nathan Tarbert author_title: "BoxyHQ的社区工程师" author_url: https://gi 以下是Markdown的中文翻译，并删除了一级标题：thub.com/NathanTarbert author_image_url: https://boxyhq.com/img/team/nathan.jpg #
从一个轰动的开始开始这篇博客吧！
我们的商标现在能够根据每个用户的喜好进行响应式设计，无论是亮色模式还是暗色模式！
更多博客内容...
进入全屏模式 退出全屏模式
此时，我们只是在导入我们的React组件并在Markdown文件中渲染它。
由于这是一个Next.js应用程序，让我们启动服务器`npm run dev`并查看结果。
[](https://res.cloudinary.com/practicaldev/image/fetch/s--LU-V8X3e--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyjzjqgcwaubyj ](https://res.cloudinary.com/practicaldev/image/fetch/s--Nb11OWfC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qraltb34mrl9y8j9jppq.png)
并切换到浅色主题
[](https://res.cloudinary.com/practicaldev/image/fetch/s--lX0_yGQO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u33jgzha5fbfy6tlb4hs.png)
让我们打开控制台查看我们的事件
[，下次见！