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

参见：​Recommendations for mobile friendly articles on Wikimedia wikis

允許使用者在標準模式和深色模式（夜間模式）之間切換是許多網站、行動裝置等都採用的功能。它給了使用者更多的控制權，使閱讀更加舒適。

橫跨維基媒體維基，人們正在努力 在桌面版和行動版網站的使用者偏好設定中引入深色模式。 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; }
}

當定義背景顏色時，始終定義文字顏色（若不使用CSS變數）

If using CSS variables per this guideline this guideline can be safely ignored.

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

不良範例

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 without fallback for use inside TemplateStyles ( phab:T360562, phab:T361934). In the mean time you can define and use tokens inside inline styles, 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類別）或對圖片套用白色背景。

不良範例

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

[[File:Tupac Shakur's signature.svg|thumb]]

良好範例

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

[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]]

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

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

More generally, we want to encourage editors to think of templates and articles as being agnostic with respect to theming and styles. In addition to night mode, there can be any number of potential color themes, and indeed the Wikipedia mobile apps (via the Page Content Service) already offer a "sepia" theme, as well as a "black" theme intended for power-saving OLED screens.

該不該反轉？

An invert using CSS filters provides a quick way to convert content designed in a light theme into a darker theme. While we cannot recommend this approach for all content , it is still a useful tool that can often be utilized safely and cheaply. The Wikipedia night mode gadget uses the invert CSS filter property to style content. You can prevent an element from having colors inverted by adding the mw-no-invert class. You can also use the skin-invert class to request that the content is inverted by the software when available.

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

色盲讀者可能難以區分和辨識細小的彩色物件。 在條目中，適時考慮將顏色替換為紋理圖案，或添加紋理圖案。 理想情況下，紋理圖案與文字是分開的。 考慮使用單色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;
}

範例

The following tickets explain fixes for various namespaces/templates and types of pages that were applied to a single project. They may be useful to other projects with similar templates or outdated copies of those templates.

Please be sure to read the associated discussion – and ask questions if you have any so other projects can benefit from sharing expertise.

主題

• Portal:Current events T357717

模板

• Template:Color T360683