Jump to content

对维基媒体wiki的深色模式兼容性建议

From mediawiki.org
This page is a translated version of the page Recommendations for night mode compatibility on Wikimedia wikis and the translation is 100% complete.
Languages:
参见：​維基媒體維基上對移動版條目友善的建議

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

在維基媒體wiki间，人們正在努力 為匿名使用者引入桌面版和行動版網站下的深色模式。 iOS和Android版的維基百科應用程式 ，以及使用Vector 2022和Minerva外觀的已登入使用者早就有了這些選項。

實現深色模式的一個主要障礙是目前既存模板的構造方式和樣式使用。 另一個挑戰是在各個條目中使用，明確寫死在行內CSS樣式的顏色。

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

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

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

在默认Vector（2022） 皮肤中，点击屏幕右上角的按钮，也称为外观下拉菜单。 读者可以更改文本大小和内容宽度，但作为一项实验性功能，还可以设置颜色}、自动、浅色以及深色，这些设置会使屏幕变暗。 这也可以通过在外观章节的参数设置中进行操作来实现。

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

建議

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

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

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

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

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

良好範例

#ace 

@media screen {
	html.skin-theme-clientpref-night .element {
		background-color: #383838;
		color: #ace;
	}
}
不良範例

#ace 

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

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

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

良好範例
Template:Example/styles.css
/* 强制夜间模式 */
/* 备注：如果使用 CSS 变量，则无需使用 `@media screen` 。 */
@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;
	}
}
不良範例
Template:Example/styles.css
html.skin-theme-clientpref-night .pane {
	background-color: white;
	color: black;
}

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

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

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

如果您認為某個元素應該具有特定的顏色，請考慮尋找可以應用於該元素的適當​​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
开放任务；尚未认领
此建议目前仅适用于TemplateStyles内的使用（phab:T360562、​phab:T361934）。

CSS变量目前仅能在小工具或站内CSS（如MediaWiki:Common.css）中定义。

使用设计标签时，请务必注意目前不保证相关变量命名存在稳定性，基于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變數時用作備援值。 這為具有深色模式的介面外觀提供了將內容調整為合適顏色所需的資訊。 

<!-- 行内CSS使用变量时一定要记得为变量提供备选值，因为有不支持Codex的皮肤（比如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類別以避免說明文字被反轉。

務必注意：這些反轉類別僅應當用在全黑或深黑色的圖片上，例如簽名圖片或是純黑的徽標圖片。 当原始图像中使用了除黑色外的任何颜色时，应避免采用这种方法，因为这可能扭曲原始图像所使用的颜色的语义。 对部分图像而言，建议添加notheme类以使得其保持在浅色模式下相同的外观。

不良範例

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

[[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.]]

Image appears as in light mode (with background).
[[File:Tupac Shakur's signature.svg|thumb|class=notheme]]

对于没有提供选项指定class的模板，你可以使用<div>标签在外围包裹模板，在标签处指定CSS类。 例如： 

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

图库的例子

要反轉圖庫 中的所有圖片，您可以根據內容在‎<gallery>標籤中新增skin-invert或skin-invert-image類別。 （如果图库存在说明文字，应当使用skin-invert-image以避免反转说明文字的颜色。） 

<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>

當skin-invert不起作用時

某些图像在夜间模式下无法轻易反转，否则会丢失重要信息（例如，以深色为底色但又有使用明亮色彩的图像）。 这些情况下，保留图像原本颜色的最好方式大概是提供亮色背景而不是反转图片，这样就能让图片在白天和夜间模式都能清楚查看。

避免使用background: none或background: transparent

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

不良範例 

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

良好範例

非必要的背景規則。 

<div>Text with transparent background</div>

可接受的範例

如果需要定義背景，例如包含一个有透明背景的SVG文件的div标签，同時定義color: inherit，以避免与背景相关的 Lint 错误 。 

<div style="background: transparent; color: inherit;">[[File:Image with transparent background.svg]]</div>

避免使用light-dark()功能

MediaWiki计划支持的所有浏览器目前尚未完全支持CSS功能light-dark()。因此，在至少2028年之前，请避免使用此功能来定义深色模式颜色。 详情请参阅浏览器兼容性列表 。

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

一般來說，我們建議編者將「模板和條目」與「主題和樣式」分開來看。 除了深色模式外，色彩主題還有無窮的可能性。事實上，維基百科行動應用程式（透過頁面內容服務）已經提供了「棕褐色」主題，以及針對省電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-repeat: repeat-x;
		background-size: 8px 8px;
	}
}

为什么背景有颜色的表格中链接颜色是黑色的？

一种常见情况是，编者在条目中添加行列拥有额外背景颜色的表格。 如果表格包含链接，这可能会导致问题，因为这些背景颜色的选择通常是根据标准主题进行定制的，或者一开始就根本没有考虑的情况也很常见。

例如，此表中的链接可在浅色主题中清楚地看见，但在深色主题中就无法分辨了：

Phab工單 描述
T360844 具有背景颜色的元素中的链接应变为黑色并带有下划线以便查看
T357575 文件描述頁不適用深色模式

这些表格内的链接不会显示为蓝色，而是显示为黑色。 如果不希望出现这种行为，请修改您的表格以避免使用行内样式。

詳細資訊，請見phab:T371411。

请注意，此行为仅适用于主空间。 如果您在另一个命名空间中使用具有不同颜色的行列的表格，则应考虑创建一个模板，让模板提供支持以使得链接颜色满足WCAG AA颜色对比度标准。 您可以使用Extension:TemplateStyles（模板样式） 来适当设置链接的样式。

在极少数情况下，额外指定了背景颜色的表格中，使得链接变黑的样式可能会导致深色背景上出现深色文本。 可以通过在style属性中任何其他颜色定义之前添加color: inherit来解决这个问题，或者将notheme类添加到具有内联样式的元素中。 将颜色样式移至TemplateStyles还会导致黑色链接修复功能失效。

请勿添加任何包含非标准方法来解决此问题的代码，例如内联注释。 这可能会破坏嵌入在您的元素中的其他模板。

在标准浅色主题中，许多链接已经不符合无障碍标准，因为维基媒体皮肤的默认链接颜色通常与任何自定义背景颜色都不兼容。 如果在深色主题中遇到与此相关的问题，最好检查一下标准模式下的颜色对比度。 可能存在一个长期存在的无障碍问题，亟待解决！

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

節錄自 https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html ：

用户无法交互的用户界面组件（例如HTML中已禁用的控件）无需满足对比度要求。 不可用的用户界面组件是指，能够看到但当前状态下不可操作的组件。 举例来说，表单末尾的提交按钮在所有必需栏位填写完之前，就呈现出不可用的状态，即可以看到但不能按下的状态。

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

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

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

  • 维基媒体消息 SiteAdminHelper - 網站管理員助手 提供各種可以改進深色模式支援的樣式，包括停用及更新具有以下CSS類別（.navbox、.infobox、.quotebox、.side-box、.metadata、.navigation-box）的元素及首頁元素的背景及邊框的樣式。 它还会强制所有定义内联样式且带有背景有关CSS规则的元素使用黑色的文本颜色。 请注意，虽然这解决了大多数问题，但也会导致某些元素出现问题，尤其是任何设置了 background:inherit 和 background:transparent 的行内样式属性的元素。
  • MediaWiki:Vector-2022.css / MediaWiki:Minerva.css 中的规则 - 部分wiki可能已经部署了通用的规则，将内联样式中更改背景的任何表格元素中的链接样式改为具有黑色下划线的文本样式。 比如英文维基百科。
  • 您所查看的模板可能已经使用了站内的修复方案。 请务必使用浏览器的审查元素功能并查看模板样式 提供的任何相关样式，这些样式可能会使得在HTML根元素上检测到夜间主题類別时啟用特定规则。

範例

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

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

一般問題

  • 具有背景颜色的表格横行中的链接颜色： phab:T360844
  • 表格横行交替更改背景颜色时的问题 T358003
  • Infobox裡的透明SVG 修復範例

主題

模板及模組

介面訊息

請在您的wiki上確認下列介面訊息的顯示樣式是否正常：

Retrieved from "https://www.mediawiki.org/w/index.php?title=Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis/zh&oldid=8487945"