維基媒體維基的深色模式相容性建議

This page is a translated version of the page Recommendations for night mode compatibility on Wikimedia wikis and the translation is 97% complete.

本相容性建議由網頁團隊提出並維護。它們以資料、科技趨勢以及我們的能力為基礎。因此，它們會不斷發展並可能改變。

允許使用者在標準模式和深色模式（夜間模式）之間切換是許多網站、行動裝置等都採用的功能。它給了使用者更多的控制權，使閱讀更加舒適。該功能作為阅读/网页/无障碍阅读專案的一部分新增至我們的軟體中。

橫跨維基媒體維基，人們正在努力在桌面版和行動版網站的使用者偏好設定中引入深色模式。 iOS和Android版的維基百科應用程式早就有了這些選項。

實現深色模式的一個主要障礙是如何建造和設計模板。另一個挑戰是在各個條目中使用，明確指定為行內CSS樣式的顏色。

我們可以透過提高編者，尤其是模板編者對深色模式的認識來解決這些問題。模板可以嵌入包含在許多條目中，因此對深色模式的相容性有很大影響。

以下是編者在編寫條目和模板時應牢記的一般性建議和指南。

如何在MediaWiki使用不同的主題？

現時，您可以在任何URL的尾端加上?minervanightmode=1，以在深色主題下檢視當前內容。您也可以前往https://test.m.wikipedia.org/wiki/Special:MobileOptions，在我們的測試維基啟用深色模式。隨著功能的開發，我們將更新此說明。

建議

使用建議的HTML標記來製作模板

深色模式附帶的樣式會自動修復模板的已知普遍問題。這對於技術編者較少的專案很重要。將notheme類別新增至對應元素或全域新增該類別，可以停用這些樣式（phab:T358071）。不使用這些類別的專案可能會比其他專案更晚獲得該功能。

更多資訊：在跨維基的模板元件的HTML標記中使用標準化類別名稱

使用通過WCAG AA檢測的無障礙顏色

淺色模式中使用的許多顏色歷來是不符合無障礙規範的。為深色模式挑選顏色時，請務必使用WebAIM對比檢查器檢查現有顏色。請考慮修改亮度以使顏色通過檢查。推薦安裝瀏覽器擴充功能，例如WCAG色彩對比工具（Chrome、Firefox），以更了解維基上的色彩對比問題。

不良範例

html.skin-theme-clientpref-night .element {
    background-color: #666666;
    color: #ace;
}

良好範例

html.skin-theme-clientpref-night .element {
    background-color: #383838;
    color: #ace;
}

使用標準媒體查詢和HTML類別來指向深色模式

啟用深色模式後，標準可讀的skin-theme-clientpref-night類別將應用於HTML元素中。但是，指向深色模式的樣式也應指向prefers-color-scheme，因為某些使用者可能已透過其作業系統選擇加入並透過skin-theme-clientpref-os訂閱了這些樣式。指向prefers-color-scheme將適當地為兩組使用者設定內容樣式。

不良範例

Template:Example/styles.css

html.skin-theme-clientpref-night .pane {
    background-color: white;
    color: black;
}

良好範例

Template:Example/styles.css

/* forced night mode */
html.skin-theme-clientpref-night .pane {
      background-color: black;
      color: white;
}
@media (prefers-color-scheme: dark) {
    /* automatic mode */
    html.skin-theme-clientpref-os .pane {
      background-color: black;
      color: white;
    }
}

避免將行內背景和文字顏色設定為靜態值

許多模板和條目使用了明確指定的行內顏色樣式，但實際上並不必要。建立新模板或檢閱既有模板時，請考慮刪除背景或文字的行內顏色樣式。如此一來，當前介面外觀會自動將其樣式應用至所有元素。

如果您在深色模式下瀏覽條目，並注意到某個元素似乎發生顯示衝突（例如亮白色的表格背景），則很可能是由於為該元素指定了行內顏色樣式所致。建議檢閱輸出該元素的條目或模板，並刪除行內顏色樣式。

如果您認為某個元素應該具有特定的顏色，請考慮尋找可以應用於該元素的適當CSS類別（由介面外觀提供），這將賦予它更明顯的顏色。如果沒有這種CSS類別，請考慮聯絡介面外觀開發人員，要求建立新的CSS類別。

如果您想要設定樣式，建議您使用樣式表（更多資訊請見Help:模板樣式）或CSS變數。

不良範例

Template:Example

<div class="pane" style="background-color: white; color: black;">Text</div>

良好範例

Template:Example

<templatestyles src="Template:Example/styles.css" />
<div class="pane">Text</div>

Template:Example/styles.css

html.skin-theme-clientpref-night .pane { background-color: white; color: black; }
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .pane { background-color: black; color: white; }
}

當定義背景顏色時，始終定義文字顏色

定義背景顏色時，如果文字顏色與條目文字顏色相同，可能會傾向於不特別定義文字顏色。然而，當應用不同的主題（例如夜間模式）時，可能會產生意想不到的後果（例如黃底白字）。因此，建議您始終同時定義兩者。 A lint rule is provided to support editors to identify pages and templates with this issue.

Even if using CSS variables, it is important to explicitly define the color alongside the background to avoid assumptions about the context in which it is being used. For example, a template may be embedded inside another template / table that defines its own backgrounds or colors or their may be global styles applying to the page that may inadvertently impact your own content.

不良範例

Template:Example

<div style="background-color: yellow; padding: 16px;">Text</div>

良好範例

Template:Example

<div style="background-color: yellow; color: #333; padding: 16px;">Text</div>

當使用CSS變數或CSS設計標籤定義背景和文字時，盡可能提供備援值

Recommendation is currently restricted to use inside TemplateStyles (phab:T360562, phab:T361934).

CSS variables can only be defined inside gadgets and site CSS e.g. MediaWiki:Common.css.

When using design tokens you must note that stability is currently not guaranteed and may require later changes based on phab:T340477.

當使用行內樣式修改文字或背景時，請使用介面外觀支援的CSS設計標籤。 Codex說明文件有一份設計標籤清單。在為Codex設計標籤使用CSS變數時，應始終為不支援CSS變數的介面外觀提供備援值。

您也可以在小工具內定義自己的CSS變數（例如英語維基導遊上預設隱藏的夜間模式小工具）。

不良範例

<span style="font-size:0.95em; font-size:95%; color: #54595d;">A subscription is required to read this URL.</div>

良好範例

在此範例中，使用了color-subtle設計標籤，#54595d僅在介面外觀中沒有CSS變數時用作備援值。這為具有深色模式的介面外觀提供了將內容調整為合適顏色所需的資訊。這為具有深色模式的介面外觀提供了將內容調整為合適顏色所需的資訊。

<!-- Always define a CSS fallback value for skins which do not support Codex e.g. Monobook. -->
<span style="font-size:95%; color:var(--color-subtle, #54595d);">A subscription is required to read this URL.</div>

覆蓋深色模式樣式／停用深色模式主題

目前頁面內容服務（PCS，行動應用程式用於顯示條目的服務）深色模式的實作方式，是使用!important CSS屬性覆蓋大多數元素的顏色，以深色樣式呈現。之所以採用這種方式，是因為有大量的模板和元素指定了行內樣式。在網頁版本中，這種情況偶爾也會發生（主要是資訊框、導航框和其他常見模板相關的元素）。

在某些情況下，顏色的去除可能缺乏依據，或者編者可能不同意此舉。在這種情況下，您可以在元素的樣式中加入notheme類別，防止其顏色被覆蓋（即主題化）。如此一來，不論主題為何（例如深色／淺色／棕褐色），內容樣式皆會完全相同。

不良範例

在此範例中，主題將在維基媒體應用程式內被覆蓋，任何顏色將在桌面或行動網頁的深色模式下被反轉：

<div class="pane">Text</div>

良好範例

在此範例中，模板已明確要求不要在維基媒體應用程式內覆蓋樣式，因此顏色不會在任何地方反轉：

<div class="pane notheme mw-no-invert">Text</div>

為透明背景的深色圖片套用濾鏡

某些圖像（例如，資訊框中的簽名）通常是透明背景的黑色內容。在深色模式下，黑色內容搭配深色背景，會導致SVG圖像難以辨識。要解決此問題，您可以套用CSS反轉濾鏡（使用skin-invert類別）。

當縮圖帶有說明文字時，您還應該添加notheme類別以避免反轉標題。

不良範例

在此範例中，這可能會導致黑色背景上出現黑色簽名。

[[File:Tupac Shakur's signature.svg|thumb]]
[[Fichier:Gas flare fr.svg|vignette|gauche|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

良好範例

此處的顏色被反轉，使簽名變成白色。

[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]]
[[Fichier:Gas flare fr.svg|vignette|gauche|class=skin-invert notheme|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

避免使用`background: none`或`background: transparent`

這些定義在大多數情況下是不必要的，更糟的是，這些會干擾專案在夜間模式下的自動修復。這些定義應該刪除，如有必要，應將其移至模板樣式中，以避免深色主題中的色彩對比問題。

不良範例

<div style="background: transparent;">Text with transparent background</div>

良好範例

非必要的背景規則。

<div>Text with transparent background</div>

可接受的範例

如果需要定義背景，同時定義color: inherit。

<div style="background: transparent; color: inherit;">Text with transparent background</div>

給製作替代主題的編者的建議

一般來說，我們建議編者將「模板和條目」與「主題和樣式」分開來看。除了深色模式外，色彩主題還有無窮的可能性。事實上，維基百科行動應用程式（透過頁面內容服務）已經提供了「棕褐色」主題，以及針對省電OLED螢幕的「黑色」主題。

該不該反轉？

套用CSS濾鏡進行反轉可快速將為淺色主題設計的內容轉換為深色主題。雖然我們不建議對所有內容使用這種方法，但它仍然是一個有用的工具，一般可以安全且輕易使用。維基百科深色模式小工具使用「反轉」CSS濾鏡屬性來設定內容樣式。您可以透過新增mw-no-invert類別來避免特定元素顏色被反轉。您也可以使用skin-invert類別來請求軟體適當地反轉內容。

建議使用紋理圖案而非純色背景

色盲讀者可能難以區分和辨識細小的彩色物件。在條目中，適時考慮將顏色替換為紋理圖案，或添加紋理圖案。理想情況下，紋理圖案與文字是分開的。考慮使用單色CSS背景紋理圖案並閱讀Trello如何引入色盲友善模式。

不良範例

Template:Example/styles.css

html.skin-theme-clientpref-night .ib-youtube-above {
    background-color: #B60000;
    color: white;
}

良好範例

Template:Example/styles.css

html.skin-theme-clientpref-night .ib-youtube-above {
    background-image: linear-gradient(135deg, #ff1c00 25%, transparent 25%), linear-gradient(225deg, #ff1c00 25%, transparent 25%), linear-gradient(45deg, #ff1c00 25%, transparent 25%), linear-gradient(315deg, #ff1c00 25%, var(--background-color-base) 25%);
    background-position: 8px 0, 8px 0, 0 0, 0 0;
    background-size: 8px 8px;
    background-repeat: repeat-x;
}

Consider globally setting link color inside tables with background

It is quite common for editors to create tables with background colors defined on rows or columns. If the table contains links this can be problematic, as often the color choices will be tailored towards accessibility in the standard theme, or will not consider accessibility at all.

For example the links in this table are accessible in light theme but not the dark theme:


Phab ticket	Description
T360844	Links in elements with background color should become black so they are accessible
https://phabricator.wikimedia.org/T357575	File pages are not compatible with night mode

Instead of blue links inside these tables, it might be better to create blank links with underlines (to distinguish them from other text).

More information in https://phabricator.wikimedia.org/T360844

/********* General fixes for night mode *********/
/* [[phab:T360844]] */
html.skin-theme-clientpref-night [style*="background"] a {
    color: #333;
    text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os [style*="background"] a {
    color: #333;
    text-decoration: underline;
  }
}

範例

以下工單解釋了如何修復單個專案的各種命名空間/模板和頁面類型的問題。能協助使用類似模板或過時模板副本的其他專案修復問題。

請務必閱讀相關討論——如果您有任何疑問，請提出問題，以便其他專案可以從專業知識分享中受益。

一般問題

Links inside table rows with background colors: phab:T360844
Tables with alternating row colors T358003

主題

Portal:新聞動態 T357717

模板 / 模組

Template:Color T360683
Module:Tracklist T357730
Module:Citation https://phabricator.wikimedia.org/T359894

如何在MediaWiki使用不同的主題？

建議

使用建議的HTML標記來製作模板

使用通過WCAG AA檢測的無障礙顏色

使用標準媒體查詢和HTML類別來指向深色模式

避免將行內背景和文字顏色設定為靜態值

當定義背景顏色時，始終定義文字顏色

當使用CSS變數或CSS設計標籤定義背景和文字時，盡可能提供備援值

覆蓋深色模式樣式／停用深色模式主題

為透明背景的深色圖片套用濾鏡

避免使用background: none或background: transparent

給製作替代主題的編者的建議

該不該反轉？

建議使用紋理圖案而非純色背景

Consider globally setting link color inside tables with background

範例

避免使用`background: none`或`background: transparent`