維基媒體維基的深色模式相容性建議
| 本相容性建議由網頁團隊提出並維護。 它們以資料、科技趨勢以及我們的能力為基礎。 因此，它們會不斷發展並可能改變。 |
允許使用者在標準模式和深色模式（夜間模式）之間切換是許多網站、行動裝置等都採用的功能。它給了使用者更多的控制權，使閱讀更加舒適。
橫跨維基媒體維基，人們正在努力在桌面版和行動版網站的使用者偏好設定中引入深色模式。 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變數）
定義背景顏色時，如果文字顏色與條目文字顏色相同，可能會傾向於不特別定義文字顏色。 然而，當應用不同的主題（例如夜間模式）時，可能會產生意想不到的後果（例如黃底白字）。 因此，建議您始終同時定義兩者。 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設計標籤定義背景和文字時，盡可能提供備援值
當使用行內樣式修改文字或背景時，請使用介面外觀支援的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>
覆蓋深色模式樣式／停用深色模式主題
In the current implementation of the Page Content Service (the service used by mobile apps to display articles), night mode works by overriding the colors of most elements with night styles, using the !important CSS property.
This is precisely because of the large numbers of templates and elements that specify inline styles.
In the web version, this also happens to a lesser extent (primarily on elements relating to infoboxes, navboxes and other common templates).
There may be cases where the color removal is unwarranted or where editors may disagree with the choice made.
In such cases, you can include the notheme class in the element's style, which will prevent its color from being overridden (i.e. themed).
This will result in the content being styled across themes (e.g. night/light/sepia) in exactly the same way.
不良範例
In this example, the theme will be overridden inside Wikimedia apps and any colors will be inverted in night mode on desktop or mobile web:
<div class="pane">Text</div>
良好範例
In this example, the template has explicitly requested not to be overridden inside Wikimedia apps and the colors won't be inverted elsewhere:
<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.
Consider patterns rather than background colors
Colorblind readers can have difficulties telling apart and recognizing small colored items. In articles, consider using patterns rather than, or in addition to, color where appropriate. Ideally, where the pattern is separate from the text. Consider using monochrome CSS Background Patterns and reading about how Trello introduced a colorblind friendly mode.
不良範例
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