小編精選 - 技術文章翻譯 · 11月23日

使用 Markdown 與 React 在 Github 文件中顯示淺色模式、深色模式

警告：所表達的觀點可能不適合所有受眾！ 😂

簡介

在本文結束時，您將了解並能夠根據使用者偏好 - 深色或淺色模式展示您的 Markdown 影像。

我將介紹如何在 GitHub README.md 中加入兩個圖像 - 根據所選的“主題”，您的圖像將正確回應。
我將引導您在 Markdown 中合併影像的過程，並示範如何使用 React 使它們回應。 😎

你使用淺色還是深色？

我不了解你的情況，但無論平台如何，如果他們可以選擇在淺色和深色模式之間切換，那就沒有競爭了。

淺色主題正在切換為深色，事實上，當然在我寫這篇文章的時候！

深色主題

話雖如此，在軟體開發的快速發展中，創造無縫的使用者體驗至關重要。

這種體驗的一部分涉及適應使用者偏好，例如淺色和深色模式。

我還記得幾年前，Github 宣布了用戶可以切換到「深色模式」的選項，這是一件非常大的事情。

GitHub 深色主題

【Github揭曉黑暗主題的重要時刻】(https://t.co/HEotvXVJ7R) 🤩

2020 年 12 月 8 日🎆

近年來，使用者介面中深色和淺色模式選項的出現已成為一種流行趨勢。

我絕對不是唯一一個喜歡使用深色主題選項的人，根據 Android 用戶的說法，91.8% 的用戶更喜歡深色模式所以我們可以猜測這個數字在所有作業系統中都相當高。

這當然可能會引起激烈的爭論，所以我會盡力將自己的觀點降到最低。

輕模式迷因

改善使用者體驗

主要目標是透過在應用程式中提供選項來改善用戶體驗。

有多種方法可以建立每個圖像的多個版本，在本教程中我們不會深入討論細節。

只要確保您的圖像在兩個主題中脫穎而出並具有透明背景，您就會獲得成功。

讓我們開始派對吧！

GitHub 自述文件中的響應式圖像

您有一個專案並想讓您的 GitHub 專案 README.md 真正流行嗎？

無論使用者使用什麼淺色主題，我們都需要一種方法來指定圖像應在 Markdown 中顯示哪種主題（淺色或深色）。

當您想要根據使用者選擇的配色方案優化圖片的顯示時，這特別有用，並且它涉及將 HTML <picture> 元素與 prefers-color-scheme 媒體功能結合使用如下所示。

繼續將圖片檔案直接拖曳到 GitHub 中並放在“srcset=”後面。

<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 暗模式

SAML Jackson 燈光模式

太好了，你有 5 秒嗎？

https://github.com/boxyhq/jackson

使用 React 在 Markdown 中回應影像

假設今天我將像平常一樣用 Markdown 編寫博客，並將其發佈到我的網站上。

我使用的圖像需要根據使用者偏好做出回應，但在 Markdown 中不可能偵聽本地儲存和設定狀態中的「主題」變更。

本機儲存

值得慶幸的是，如果我們將 React 匯入到 Markdown 檔案中，但先建立一個元件，就有一種方法可以解決這個困境。

反應文件

src/components/LightDarkToggle.js

import React, { useEffect, useState } from 'react';

function ToggleImages() {

// Define a state variable to track the user's login status
const [currentTheme, setcurrentTheme] = useState(localStorage.getItem('theme'));

// Add an event listener for the 'storage' event inside a useEffect
useEffect(() => {
  const handleStorageChange = (event) => {
    console.log('Storage event detected:', event);

    // Check the changed key and update the state accordingly
    console.log("event", event.key)
    if (event.key === 'theme') {
      setcurrentTheme(event.newValue);
    }
  };

  window.addEventListener('storage', handleStorageChange);

  // Clean up the event listener when the component unmounts
  return () => {
    window.removeEventListener('storage', handleStorageChange);
  };
}, []); // The empty dependency array ensures that this effect runs once when the component mounts

  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 鉤子管理 currentTheme 的狀態，它代表使用者選擇的儲存在本機儲存中的主題。
useEffect 掛鉤用於為「儲存」事件新增事件偵聽器。當儲存事件發生時（表示本機儲存發生變化），元件會檢查變更的鍵是否為“theme”，並相應地更新“currentTheme”狀態。
此元件根據使用者選擇的主題呈現不同的影像，如果主題是“淺色”，則顯示淺色模式影像；如果主題是其他主題，則顯示深色模式影像。

酷，讓我們繼續吧！

降價文件

讓我們為新部落格建立一個 .md 檔案。


---
slug: light-and-dark-mode-responsive-images
title: 'Light and Dark Mode Responsive Images'
tags_disabled:
  [
    developer,
    react,
    javascript,
    open-source,
  ]
image: /img/blog/light-dark.png
author: Nathan Tarbert
author_title: Community Engineer @BoxyHQ
author_url: https://github.com/NathanTarbert
author_image_url: https://boxyhq.com/img/team/nathan.jpg
---

import ToggleImages from '../src/components/LightDarkToggle.js';

## 🤩 Let's start this blog off with a bang! 

Our business logo is now responsive with each user's preference, whether it's **light** or **dark** mode!


<div>
  <ToggleImages />
</div>


More blog words...

此時，我們只需匯入 React 元件並將其呈現在 Markdown 檔案中。

由於這是一個 Next.js 應用程式，讓我們啟動伺服器“npm run dev”並查看結果。

貓鼓滾