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

This page is a translated version of the page Recommendations for night mode compatibility on Wikimedia wikis and the translation is 100% 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），以更了解維基上的色彩對比問題。

不良範例

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

良好範例

@media screen {
	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 */
/* Note: If using a CSS variable, there is no need to make use of `@media screen` */
@media screen {
	html.skin-theme-clientpref-night .pane {
		background-color: black;
		color: white;
	}
}

@media screen and (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

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

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

定義背景顏色時，如果文字顏色與條目文字顏色相同，可能會傾向於不特別定義文字顏色。然而，當應用不同的主題（例如夜間模式）時，可能會產生意想不到的後果（例如黃底白字）。因此，建議您始終同時定義兩者。為支援編者識別存在此問題的頁面和模板，提供了lint規則。

即使使用CSS變數，也必須明確定義背景顏色，以避免系統假定其使用情境。例如，模板所嵌入的另一個模板或表格，可能定義了自己的背景或顏色，又或者應用於頁面的全域樣式，可能會無意中影響到您的內容。

不良範例

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設計標籤定義背景和文字時，盡可能提供備援值

于Phabricator查看
任务T360562
已解决

于Phabricator查看
任务T361934
已解决

于Phabricator查看
任务T368637
开放任务；尚未认领

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或skin-invert-image類別）。當縮圖帶有說明文字時，您應該使用skin-invert-image類別以避免說明文字被反轉。

不良範例

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

[[File:Tupac Shakur's signature.svg|thumb]]
[[File:Gas flare fr.svg|thumb|left|É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]]
[[File:Gas flare fr.svg|thumb|left|class=skin-invert-image|É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.]]

For templates with no option to specify the class, you can use a <div> tag to wrap around the template and apply the class there. For example:

<div class="skin-invert-image">
    {{multiple image|align=center|total_width=540
        |image1=...
    }}
</div>

要反轉圖庫中的所有圖片，您可以根據內容在‎<gallery>標籤中新增skin-invert或skin-invert-image類別。 (If your gallery uses captions, you should use skin-invert-image to avoid inverting the caption text.)

Gallery example

<gallery class="skin-invert-image">
Tupac Shakur's signature.svg
Gas flare fr.svg|É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.
</gallery>

When `skin-invert` does not work

Certain images will not be easily invertible in night mode without losing important information (for instance, images with a dark base accompanied by bright colors). In these cases, the best option to preserve the image's original colors is probably to provide a light-colored background rather than invert the image, so that it can be seen in both day and night modes.

避免使用`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

@media screen {
	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;
	}
}

Why are links black in colored tables

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 with an underline so they are accessible
T357575	File pages are not compatible with night mode

Instead of blue links inside these tables, such links will appear as black. If this behaviour is not wanted, please revise your tables to not use inline styles.

More information in phab:T371411.

Note this behaviour only applies to article namespace. If you are using a table with different colored rows in another namespace, you should consider creating a template that provides support for making links pass WCAG AA color contrast standards. You can use Extension:TemplateStyles to style links appropriately.

已停用文字不必符合色彩對比準則

From https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

頁面沒有遵循這些規則，但我覺得看起來不錯，為什麼？

為了減少維基採用深色模式所需的初始工作量，頁面可能暫時採用了各種通用解決方案來幫助其兼容深色模式。當維基適應新主題後，這些樣式最終將被移除。

這些暫時解決方案如下列：

WikimediaMessages SiteAdminHelper - the site admin helper ships various styles that improve night mode support - this includes disabling/updating backgrounds and borders in elements with the class .navbox, .infobox, .quotebox, .side-box, .metadata, .navigation-box, and all elements on the main page. It also enforces black text color on any element which defines an inline style with a background rule. Note, while this fixes the large majority of issues, this also causes breakage to some elements, in particular any style attribute that sets background: inherit and background: transparent.
MediaWiki:Vector-2022.css / MediaWiki:Minerva.css rules - some wikis may have adopted generalized rules that change links to black underlined text to any table element that have inline styles that apply backgrounds. For example English Wikipedia.
A local solution may have already been applied to the template you are looking at. Be sure to inspect the element and look at any associated styles provided by template styles that may be applying specific rules when the night theme classes are detected on the HTML element.

範例

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

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

一般問題

Links inside table rows with background colors: phab:T360844
Tables with alternating row colors T358003
Transparent SVGs in infoboxes Example fix

主題

Portal:新聞動態 T357717

模板及模組

Template:Color T360683
Module:Tracklist T357730
Module:Citation https://phabricator.wikimedia.org/T359894
Template:No_article_text https://test.wikipedia.org/w/index.php?title=Template%3ANo_article_text&diff=596846&oldid=494808
Module:Message_box https://test.wikipedia.org/w/index.php?title=Module%3AMessage_box&diff=596845&oldid=579405
Licensing templates:
- Template:PD-self https://test.wikipedia.org/wiki/Template:PD-self
Template:Key press

Messages

Please review the following messages on your wiki:

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

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

建議

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

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

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

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

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

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

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

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

When skin-invert does not work

避免使用background: none或background: transparent

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

該不該反轉？

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

Why are links black in colored tables

已停用文字不必符合色彩對比準則

頁面沒有遵循這些規則，但我覺得看起來不錯，為什麼？

範例

一般問題

主題

模板及模組

Messages

When `skin-invert` does not work

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